js中获取父节点,兄弟节点及处理属性节点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script type="text/javascript">        function getDom01(){            var div = document.querySelector(".box");

            //得到属性 class属性            console.log(div.className);            //得到的是值            console.log(div.getAttribute("class"));            //得到集合            var attrs = div.attributes;            for(var i=0;i<attrs.length;i++){                var attr = attrs[0];                console.log(attr.value);            }

            console.log("--------------------");            console.log(div.nodeName);            console.log(div.nodeType);            console.log(div.nodeValue);

            //console.log(div)        }

        function setAttr(){            var div = document.querySelector(".box");            div[‘test‘] = "ttttt";            //设置属性的值            div.setAttribute("testtest","tttttt");            //div.setAttribute("name","divdiv");            div.name = "divdiv";            div.removeAttribute("name");        }

        function setTextText(){            var div =  document.querySelector(".box");            //console.log(div.textContent)            console.log(div.innerHTML);            //改变文本里面的额内容            div.innerHTML = "<h1>this is a innerHTML test</h1>";        }

        /**         *         *                  元素节点            属性节点            文本节点         *         * NodeName          元素名             属性名              #text         *         * NodeType            1                2                   3         *         * NodeValue          null             属性值             文本内容         *         */

        //得到所有的子元素        function getChilds(_parent){            var childs = [];            if(_parent){                var child = _parent.childNodes;                for(var i=0;i<child.length;i++){                    var c = child[i];                    if(c.nodeType === 1){                        childs.push(c);                    }                }            }            return childs;        }

        function testGetChilds(){            var childs = getChilds(document.querySelector(".box"));            console.log(childs)        }        /**         *  通用的得到上一个下一个元素         */        function getSibling(_dom,sibling){            if(_dom){                sibling = sibling || "nextSibling";                _dom = _dom[sibling];                while(_dom && _dom.nodeType != 1) {                    _dom = _dom[sibling];                }                return _dom;            }            return null;        }

        //得到同级的下一个元素        function getNextSibling(_dom){            if(_dom){                _dom = _dom.nextSibling;                while(_dom.nodeType != 1){                    _dom = _dom.nextSibling;                }                return _dom;            }            return null;        }

        function testGetSibling(){            console.log(getSibling(document.querySelector(".box"),"previousSibling"))        }        //获取上一个节点        function getPreviousSibling(_dom){            return getSibling(_dom,"previousSibling");        }

        function testStyle(){            var div = document.querySelector("#box2");            div.style.border = "1px solid red";        }        function testStyle1(){            var div = document.querySelector("#box2");            //改变样式的注意事项            //当不是一个规则单词的时候            div.style.border = "none";            //用中括号赋值            div.style["margin-left"] = "10px";            //满足驼峰命名            div.style.marginRight = "20px";        }

    </script></head><body><input type="button" onclick="getDom01()" value="getDom01"/><input type="button" onclick="setAttr()" value="setAttr"/><input type="button" onclick="setTextText()" value="setTextText"/><input type="button" onclick="testGetChilds()" value="testGetChilds"/><input type="button" onclick="testGetSibling()" value="testGetSibling"/><input type="button" onclick="testStyle()" value="testStyle"/><input type="button" onclick="testStyle1()" value="testStyle1"/><hr/><div class="box" name="div">    <div id="box1" style="">        <span>this is a span in div 1</span>        <span>this is a span in div 2</span>    </div>    <div id="box2">        <span>this is a span in div 1</span>        <span>this is a span in div 2</span>    </div>    <div id="box3">        <span>this is a span in div 1</span>        <span>this is a span in div 2</span>    </div>    <div id="box4">        <span>this is a span in div 1</span>        <span>this is a span in div 2</span>    </div></div></body></html>
时间: 2024-10-24 23:03:54

js中获取父节点,兄弟节点及处理属性节点的相关文章

Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementByIdx_

js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)

第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe')[0];var ifr_document = iframe.contentWindow.document;//iframe中的文档内容 或者: var _iframe = document.getElementByIdx_x('iframeId').contentWindow; var _div =_

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

js中获取时间new date()的用法

js中获取时间new date()的用法 获取时间:   var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动(定时器) js中获取元素的方法 js中表单提交

60秒验证码倒计时js代码 <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { //removeAttribute() 方法删除指定的属性. disabled属性规定应该禁用 input 元素. val.removeAttribute("disabled"); val.value="免费获取验证码"

js中获取URL中指定的查询字符串

js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. 1 function getSearchString(key) { 2 // 获取URL中?之后的字符 3 var str = location.search; 4 str = str.substring(1,str.length); 5 6 // 以&分隔字符串,获得类似name=xiaoli这样的元素数组 7 var arr = str.split("&"); 8 var ob

js中获取键盘事件

1 <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 document.onkeydown=function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e && e.keyCode==27){ // 按 Esc 5 //要

JS中获取数据库中的值

在本次项目中,遇到很多问题,经过努力,都逐步得到解决.静下心来,做一个记录,以供以后学习. 在项目中遇到一个问题,需要在JS中读取数据库中的值,然后再把值返回到页面中,解决方案如下:使用Ajax方法来实现,需要用到ajax.dll(一个ajax技术开发的帮助类库). 实施过程如下: 1.引用Ajax.dll 2.在App_Code写具体的方法,最好单独建立一个类文件,然后写具体方法. public class AjaxMethod www.2cto.com { public AjaxMethod

小程序 js中获取时间new date()的用法(网络复制过来自用)

js中获取时间new date()的用法 获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();