原生js操作dom的方法

页面导航:首页 > 网络编程 > JavaScript > 原生js操作dom的方法

原生js操作dom的方法

来源: 作者: 时间:2016-02-20 09:48 【

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考。1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点 document body指向的是body元素;do
今天学习了原生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存在跨的问题 
 
可以看到有关列表的片段没有用 
 
 
 
<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,mouver等事件监听,则b也会拥有这些事件监听。
 
在ff,chrome,safari中,通过cloneNode方法复制的元素,只会复制特性,其他一切都不会复制
 
因此,若要解决跨浏览器问题,在复制前,最好先移除事件处理程序。 
 
 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<