JS操作dom节点及兼容性

最新推荐文章于 2024-05-11 00:24:25 发布

kumayato

最新推荐文章于 2024-05-11 00:24:25 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/kumayato/article/details/71617536

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

父节点 parentNode

获取到的是自己的亲父亲（直属关系）

// 点击孩子隐藏父亲
<script>
    window.onload = function(){
        var child = document.getElementById("child");
        child.onclick = function(){
            this.parentNode.style.display = "none";
        }
    }
</script>

兄弟节点 nextSibling previousSibling

nextSibling，下一个兄弟，ie 678兼容。
nextElementSibling，下一个兄弟，兼容除了ie678的其他浏览器。
previousSibling，上一个兄弟，ie 678兼容。
previousElementSibling，上一个兄弟，兼容除了ie678的其他浏览器。
想要兼容,我们可以合写 || ，注意：必须先写正常浏览器,后写 ie678。

<script>
    window.onload = function () {
        var box = document.getElementById("box");
        var select = box.nextElementSibling || box.nextSibling;
        select.style.backgroundColor = "pink";
        var select2 = box.previousElementSibling || box.previousSibling ;
        select2.style.backgroundColor = "yellow";
    }
</script>

<body>
    <div></div>
    <div id="box"></div>
    <div></div>
</body>

子节点

firstChild 第一个孩子，ie678
firstElementChild 第一个孩子，其他浏览器
兼容写法 var boy = someone.firstElementChild || someone.firstChild;
lastChild 最后一个孩子，ie678
lastElementChild 最后一个孩子，其他浏览器
兼容写法 var boy = someone.lastElementChild || someone.lastChild;
childNodes 选出全部的孩子。注意：谷歌火狐等会把换行也当成一个孩子。所有要遍历所有的孩子节点，利用nodeType == 1 时才是元素节点,来获取元素节点。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function()
        {
            var ul = document.getElementById("ul")
            var childrens = ul.childNodes; //选择全部的孩子
            alert(childrens.length);  //结果是7 因为谷歌火狐会把换行也当成一个孩子
            //利用nodeType == 1 时才是元素节点,来获取元素节点
            for(var i=0; i<childrens.length; i++)
            {
                if( childrens[i].nodeType == 1)    
                {
                   childrens[i].style.backgroundColor = "pink";
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul">
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
</body>
</html>

children 选取所有的孩子（只有元素节点）。推荐用这个来代替childNodes。注意：ie 678会包含注释节点，这个要避免开。

创建节点 creatElement();

创建一个div元素节点：var div = document.creatElement(“div”);

插入节点 appendChild() insertBefore()

appendChild() 添加节点到父盒子的最后面。
insertBefore(插入的节点，参照节点) 添加节点到参照节点的前面。注意：如果第二个参数为 null 则默认将插入的节点放到最后面。

移除节点 removeChild()

// 移除demo中的test
var test = document.getElementById("test");
demo.removeChild(test);

克隆节点 cloneNode()

括号里面可以跟参数，如果里面是 true，则深层复制，除了复制本节点，还复制其子节点。
如果为 false 浅层复制，只复制本节点，不复制其子节点。

代码示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function() {
            var demo = document.getElementById("demo");
            var childrens = demo.children; //选中demo所有的孩子

            //创建节点
            var firstdiv = document.createElement("div");
            //添加节点
            demo.appendChild(firstdiv); //从后面添加

            //创建节点
            var test = document.createElement("div");
            //插入节点
            demo.insertBefore(test, childrens[0]); 
            //insertBefore(插入的节点，参照节点) ,添加到参照节点的前面。
            //demo.insertBefore(test,null)  参照节点为null，默认放在盒子的最后面。

            var test_1  = document.getElementById("test_1");
            demo.removeChild(test_1); //移除节点

            var last = childrens[0].cloneNode(); //克隆节点，克隆demo中的第一个孩子。
            demo.appendChild(last); //插入节点到demo的最后

            //克隆一个demo
            demo.parentNode.appendChild(demo.cloneNode(true)); //给我的爸爸添加一个孩子，就是我的兄弟。
        }
    </script>
</head>
<body>
<div id="demo">
    <div id="test_1"></div>
    <div id="test_2"></div>
</div>
</body>
</html>

kumayato

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS操作dom节点及兼容性

父节点 parentNode获取到的是自己的亲父亲（直属关系）// 点击孩子隐藏父亲<script> window.onload = function(){ var child = document.getElementById("child"); x.onclick = function(){ this.parentNode.s
复制链接

扫一扫