JS操作dom节点及兼容性

来源：互联网发布：复旦大学经济学院知乎编辑：程序博客网时间：2024/06/10 18:24

父节点 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中的testvar 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>

0 0