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) 收藏 举报