原生js操作dom的方法

今天学习了原生js的dom节点的操作，就记录下来，仅供自己以后参考。

1)创建节点：除了可以使用createElement创建元素，也可以使用createTextNode创建文本节点.

document.body指向的是<body>元素;document.documentElement则指向<html>元素

    // 创建节点
     var createNode = document.createElement("div");
     var createTextNode = document.createTextNode("hello world");
    createNode.appendChild(createTextNode);
    document.body.appendChild(createNode);
    document.documentElement.appendChild(createNode);

2)插入节点：可以使用appendChild，insertBefore，insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面

// 插入节点
      var createNode = document.createElement("div");
     var createTextNode = document.createTextNode("hello world");
    createNode.appendChild(createTextNode);
     var div1 = document.getElementById("div1");
    document.body.insertBefore(createNode,div1);

3)替换和删除元素，从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点div1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。

// 替换元素
var replaceChild = document.body.replaceChild(createNode,div1);

// 删除元素
var removeChild = document.body.removeChild(div1);

4)节点的属性：

firstChild:第一个子节点

lastChild:最后一个子节点

childNodes:子节点集合，获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)

nextSibling:下一个兄弟节点

previousSibling：上一个兄弟节点

parentNode：父节点

< ul id ="ul" >< li >sdsssssss </ li >< li >qqqq </ li >< li >wwww </ li >< li >eeee </ li ></ ul >

    // 节点属性
     var ul = document.getElementById("ul");
     var firstChild = ul.firstChild;
    console.log(firstChild.innerHTML);
     var lastChild = ul.lastChild;
    console.log(lastChild.innerHTML);
     var length = ul.childNodes.length;
    console.log(length);

     var secondChild = ul.childNodes.item(1);
    console.log(secondChild.innerHTML);

     var forthChild = ul.childNodes.item(2).nextSibling;
    console.log(forthChild.innerHTML);

     var thridChild = forthChild.previousSibling;
    console.log(thridChild.innerHTML);

     var parentNode = forthChild.parentNode;
    console.log(parentNode.innerHTML);

5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。

// 文本片段
     var fragment = document.createDocumentFragment();
     var ul = document.getElementById("ul");
     var li = null;
     for ( var i = 4; i >= 0; i--) {
        li = document.createElement("li");
        li.appendChild(document.createTextNode("item "+i));
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);

6）克隆元素

someNode.cloneNode(true):深度克隆，会复制节点及整个子节点

someNode.cloneNode(false):浅克隆，会复制节点，但不复制子节点

// 克隆
var clone = ul.cloneNode( true);
document.body.appendChild(clone);

注意：

1、childNodes.length存在跨浏览器的问题

可以看到有关列表的html片段没有用

< ul id ="ul" >
< li >sdsssssss </ li >
< li >qqqq </ li >
< li >wwww </ li >
< li >eeee </ li >
</ ul >

这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取ul.childNodes.length的结果有差异：

在ie中，ul.childNodes.length不会计算li之间的换行空格，从而得到数值为4

在ff、chrome,safari中，会有包含li之间的空白符的5个文本节点，因此ul.childNodes.length为9

若要解决跨浏览器问题，可以将li之间的换行去掉，改成一行书写格式。

2、cloneNode存在跨浏览器的问题

在IE中，通过cloneNode方法复制的元素，会复制事件处理程序，比如，var b = a.cloneNode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。

在ff,chrome,safari中，通过cloneNode方法复制的元素，只会复制特性，其他一切都不会复制

因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。

秒客网

原生js操作dom的方法

相关文章