js dom-node节点选择 Dear 丶 2021-07-25 01:33 339阅读 0赞 dom node 一切皆节点(对象、属性、空文本、文本、注释) 通用属性 .nodeName 返回节点的名称 .nodeType 返回节点的常数值 返回当前节点的相关节点属性 .ownerDocument 获得顶层对象,即document .nextSibling 返回当前节点的后面的第一个同级节点,空白也算文本节点,无返回null .previousSibling 返回当前节点的前面的第一个同级节点 返回子节点属性 .firstChild 返回当前节点的第一个子节点 .lastChild 返回当前元素的最后一个子节点 .childNodes 返回所有子节点的集合,不包括孙子节点 代码示例: <html> <head> <meta charset="utf-8"> <title>js node</title> <style> .box{ border:solid 1px red; } </style> </head> <body> <div class="box"> <!--这是一个p标签--> <p class="p1">123456</p> <span class="sp1">456789</span> <p>123456 <a href="">ww</a></p> <a href="">bb</a> <p>123456</p> <p>123456</p> <button id="bu" >点我</button> </div> <script> var box=document.querySelector(".box"); var p1=document.querySelector(".p1"); var sp1=document.querySelector(".sp1"); console.log(document.nodeName,document.nodeType); console.log(box.nodeName,box.nodeType); var attr=document.createAttribute("align"); console.log(attr.nodeName,attr.nodeType); console.log(box.ownerDocument,p1.ownerDocument,sp1.ownerDocument); console.log(p1.nextSibling.nextSibling); console.log(sp1.previousSibling.previousSibling); console.log(box.firstChild.nextSibling); console.log(box.childNodes); var bt=document.querySelector("#bu"); bt.onclick=function(){ var h1=document.createElement("h1"); h1.innerHTML="新增h1"; box.appendChild(h1); console.log(box.childNodes) } </script> </body> </html>
还没有评论,来说两句吧...