首页 > 代码库 > 父兄子节点的获取及子节点的添加、删除、克隆操作
父兄子节点的获取及子节点的添加、删除、克隆操作
第一.父兄子节点的获取
1.父节点的获取
某节点的parentNode属性值即为该节点的父节点。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> </div> <script> var son1 = document.getElementById("son1"); son1.parentNode.style.width = "200px"; </script> </body></html>
2.兄弟节点的获取
某节点的nextElementSibling属性值是该节点后面紧邻的兄弟节点,但是这个有兼容性,只适用于ie9以上版本(包含ie9)和其他浏览器,在ie9以下无效。而nextSibling属性也是同样的效果,只在ie9以下有效。所以可以用这两个属性来满足需求。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> <div></div> </div> <script> var son1 = document.getElementById("son1"); var son1NextSib = son1.nextElementSibling || son1.nextSibling; son1NextSib.style.width = "200px"; </script> </body></html>
与后面紧邻的兄弟节点对应的是前面紧邻的兄弟节点,previousElementSibling和previousSibling配合使用即可获得。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div></div> <div id="son2"></div> </div> <script> var son2 = document.getElementById("son2"); var son2PreviousSib = son2.previousElementSibling || son2.previousSibling; son2PreviousSib.style.width = "200px"; </script> </body></html>
3.子节点的获取
有两种方法,第一种比较麻烦,childNodes和nodeType配合使用,因为对于ie9以上(包括9)和其他浏览器来说,某个节点的childNodes属性值是该节点所有的子节点,这其中不仅仅是元素节点,也包含了文本节点,而我们想要的只是元素节点,所以还得通过nodeType是否等于1来过滤掉文本节点(元素节点的nodeType值为1,而文本节点的nodeType值为3)。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> <div id="son2"></div> </div> <script> var father = document.getElementById("father"); var childNodes = father.childNodes; var seriousChildNodes = []; for(var i = 0; i < childNodes.length; i++) { if(childNodes[i].nodeType == 1) { seriousChildNodes.push(this); } } alert(seriousChildNodes.length); </script> </body></html>
第二种方法是直接通过children属性值来获取,某节点的children属性值就是该元素的所有的元素子节点。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> <div id="son2"></div> </div> <script> var father = document.getElementById("father"); var childNodes = father.children; alert(childNodes.length); </script> </body></html>
第二.子节点的添加、删除、克隆操作
1.子节点的添加
添加子节点的思路是先创建一个节点,然后添加到指定位置即可。
创建节点的方法是固定的,利用document.createElement(xxx)方法,传入元素名即可创建一个指定元素名的元素。
如 var newdiv=document.createElement("div");
把节点插入到父节点中有两种方法appendChild()和insertBefore()。
appendChild()方法由父节点调用,参数传一个待插入到父节点的子节点,这种方法会把该子节点插入到父节点的最后面,也就是说插入操作完成后这个子节点会是最后的子节点。
insertBefore()方法也是由父节点调用,可以把一个子节点插入到我们指定的位置。方法有两个参数,第一个参数是要插入的子节点,第二个参数就是我们指定的、将要在其前面插入节点的子节点。特殊的,如果第二个参数传null,则效果等同于appendChild(),即将把新的子节点插入到最后。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> <div id="son2"></div> </div> <script> var father = document.getElementById("father"); var newdiv = document.createElement("div"); father.appendChild(newdiv); var span = document.createElement("span"); father.insertBefore(span, document.getElementById("son2")); </script> </body></html>
2.子节点的删除
对应的方法是removeChild(),由父节点调用,参数传要删除的子节点。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div id="father"> <div id="son1"></div> <div id="son2"></div> </div> <script> var father = document.getElementById("father"); father.removeChild(father.children[1]); </script> </body></html>
3.节点的复制
对应的方法是cloneNode(),由要复制的节点调用,方法可以传一个布尔型参数,如果传true的话,表示不仅仅会复制选定的节点,也会复制此节点的所有子节点;如果传false或者不传的话,则仅会复制该节点。复制节点一般不会单独使用,不会单纯为了复制而复制,复制出来后得放到某个位置啊,所以一般会结合添加节点使用。示例:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <body> <div class="class1"> <span></span> </div> <script> window.onload = function() { var divs = document.getElementsByTagName("div"); var div = divs[0].cloneNode(); document.body.insertBefore(div, document.getElementsByTagName("script")[0]); } </script> </body></html>
如上,复制了唯一的一个div元素,并插入到script元素之前。
父兄子节点的获取及子节点的添加、删除、克隆操作