javascript代码实例教程-原生js操作dom的方法

发布时间:2019-01-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-原生js操作dom的方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考。

 

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

 

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

 

    //创建节点

    VAR createNode = document.createElement("p");

    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("p");

    var createTextNode = document.createTextNode("hello world");

    createNode.appendChild(createTextNode);

    var p1 = document.getElementById("p1");

    document.body.insertBefore(createNode,p1);

 

 

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

 

 

 

//替换元素

   var replaceChild = document.body.replaceChild(createNode,p1);

 

 

//删除元素

    var removeChild = document.body.removeChild(p1);

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脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-原生js操作dom的方法全部内容,希望文章能够帮你解决javascript代码实例教程-原生js操作dom的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。