js常用节点操作实例总结
作者:小白白中之白
一:父节点
1:返回父节点
element.parentNode,得到的是离元素最近的父节点。如果找不到则返回为null
代码:
<body> <div> <div> <div></div> </div> </div> <script> var divs=document.querySelector(".s") console.log(divs.parentNode); </script> </body>
效果:
二:子节点
1:返回子节点
element.children,是一个只读属性,返回所有子元素节点,其余节点不返回
代码:
<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> var ul=document.querySelector("ul") console.log(ul.children); </script> </body>
效果:
2:返回第一个和最后一个子节点
2.1:
element.firstElementChild,element.lastElementChild分别返回第一个和最后一个子元素节点,IE9+
代码:
<body> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> var ul=document.querySelector("ul") console.log(ul.firstElementChild); console.log(ul.lastElementChild); </script> </body>
效果:
2.2:
element.children[0] , element.children[element.children.length-1]分别返回第一个和最后一个子元素节点
代码:
<body> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> var ul=document.querySelector("ul") console.log(ul.children[0]); console.log(ul.children[ul.children.length-1]); </script> </body>
效果:
三:兄弟节点
1:返回兄弟节点
element.nextElementSibling,返回当前元素下一个兄弟元素节点,找不到则返回null
element.previousElementSiblig,返回当前元素上一个兄弟元素节点,找不到则返回null
IE9+
四:创建和添加元素节点
1:创建元素节点
1.1:
document.createElement(),动态创建元素节点
1.2:
innerHtml,创建节点
1.3:
document.write,创建节点,但导致页面重绘
2:添加节点
2.1:
fartherelement.appendChild(childelement),将一个节点添加到指定父节点的子节点列表末尾
注意事项:创建和添加元素节点需要联合使用
1&2:
添加前代码:
<body> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> </script> </body>
效果:
添加后代码:
<body> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> var ul=document.querySelector("ul") var li=document.createElement("li"); ul.appendChild(li) </script> </body>
注意:appendChild()中无引号。因为:规定变量或对象是不用加引号的
效果:
2.2:
element.insertBefore(child,指定元素),将一个节点添加到父节点指定节点前面
代码:
<body> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> var ul=document.querySelector("ul") var li=document.createElement("li"); ul.insertBefore(li,ul.children[0]) </script> </body>
效果:
五:删除节点
1:删除元素节点
element.removeChild()
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> button{ width: 100px; height: 100px; } </style> </head> <body> <button></button> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> var button=document.querySelector("button") var ul=document.querySelector("ul") button.onclick=function(){ ul.removeChild(ul.children[0]) } </script> </body> </html>
六:克隆节点
1:克隆节点(元素或文本)
element.cloneNode(),括号参数为空或者为false则为浅拷贝,只复制标签。括号参数为ture则复制标签和里面的内容。克隆节点需要和添加节点一起使用
感兴趣的朋友可以使用本站在线工具: http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果~