JS学习十一：DOM节点属性

 节点常用属性：nodeName，nodeType，nodeValue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box1 {
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #box2 {
                width: 200px;
                height: 200px;
                background-color: green;
            }
            #box3 {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <body style="height: 1000px;">
        <div id="box1"><p>我是第一个</p>
            <p>我是第二个</p>
            <p>我是第三个</p>
            <p>我是第四个</p>
        </div><div id="box2"></div>
        <div id="box3"></div>
        <input id="put" type="text" name="in" placeholder="请输出文本"/>
        <script type="text/javascript">
            var jsDiv1 = document.getElementById("box1")
            var jsDiv2 = document.getElementById("box2")
            var jsDiv3 = document.getElementById("box3")
            // 元素节点: DIV 1 null
            console.log(jsDiv1.nodeName, jsDiv1.nodeType, jsDiv1.nodeValue)
            
            var jsInput = document.getElementById("put")
            // s是属性placeholder的属性值,不是属性节点
            var s = jsInput.placeholder;        
                
            // 1.获取当前节点的所有子节点
            var allChilds = jsDiv1.childNodes;
            //结果: 共9个节点,1个div的text文本节点,4个p元素节点,4个p的text文本节点,不包括它自己的属性节点
            // 如果div之间没有换行,即第1个p标签跟着div后,则没有div的text文本节点
            console.log(allChilds);  //结果：NodeList(9) [text, p, text, p, text, p, text, p, text]
            // 根据nodeType过滤,只要4个p的元素节点
            for (var i in allChilds) {
                if (allChilds[i].nodeType == 1) {
                    console.log(allChilds[i]);
                }
            }
            
            //2.获取当前元素节点的第一个子节点:
            var firstChildNode = jsDiv1.firstChild;
            console.log(firstChildNode) // 文本节点,div的text节点：#text
            
            //3.获取当前元素节点的最后一个子节点
            var lastChildNode = jsDiv1.lastChild;
            console.log(lastChildNode);  //第4个p的文本节点: #text
            
            //4.获取当前节点的文档的根节点,相当于document
            var bootNode = jsDiv1.ownerDocument;
            console.log(bootNode);   // #document
            
            //5.获取当前节点的父节点
            var parentNode = jsDiv1.parentNode;
            console.log(parentNode, typeof(jsDiv1.parentNode));  //body节点, object
            
            //6.获取当前节点的前一个同级节点,即前一个兄弟节点
            var previousNode = jsDiv1.previousSibling;
             //当div1前面没有同级节点时,但是如div1与父节点中间有换行,则它的前一同级节点为文本节点#text;
             // 如果div1与父节点之间没有换行,则它的前一同级节点为null
            console.log(previousNode); 
            // div2的前一级同级节点为div1,但是如果div2与div1之间有换行,则div2的前一同级节点为文本节点#text
            //否则它的前一节点为div1
            console.log(jsDiv2.previousSibling); 
            
            //7.获取当前节点的后一个同级节点
            var nextNode = jsDiv1.nextSibling;             
            console.log(nextNode);  //div2
            // 以上6,7中出现的文本节点异常,在线上服务器上是不存在的,因为线上服务器会压缩html,中间的空白/换行,会被压缩掉
            
            //8.获取当前节点的所有的属性节点:
            console.log(jsInput.attributes);
            //获取当前节点的in属性节点:
            console.log(jsInput.attributes['in']);  //in属性节点

        </script>
    </body>
</html>

 

posted on 2018-11-18 22:51  myworldworld  阅读(131)  评论(0)    收藏  举报

导航