父兄子节点的获取及子节点的添加删除克隆操作

Posted 2020-08-15 koushr

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了父兄子节点的获取及子节点的添加删除克隆操作相关的知识，希望对你有一定的参考价值。

第一.父兄子节点的获取

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元素之前。

以上是关于父兄子节点的获取及子节点的添加删除克隆操作的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript课程——Day21（jQuery下class操作css操作元素宽高元素的位置滚动条创建.添加.替换.删除.克隆节点事件滑上事件的区别）

web前端练习26----Dom2,节点的创建添加，删除，替换，克隆，innerHTML，innerText，显示隐藏及练习