zoukankan      html  css  js  c++  java
  • JavaScript中操作有些DOM时关于文本节点和元素节点的问题。

      初学JavaScript时候,经常遇到需要操作的内容因为文本节点而使操作更麻烦或者不能达到效果。

    例:

    <ul id="ull">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        //insertBofore
        var oul = document.getElementById("ull");  
        var newli= document.createElement("li");
        oul.insertBefore(newli,oul.lastChild);//lastelementChild
        alert(oul.childNodes.length);
        alert(oul.children.length);

      在前面一段简单的代码示例中,假如需要在ul最后添加一个li可以用到inserBefore,但是,我们在获取ul下面最后一个节点的时候,这时候如果用oul.lastChild,则会出现将li添加到最末尾的情况,这是因为lastChild在使用的时候将最后一个文本节点也计算在里面,所以页面效果也是把li添加到li的末尾,当然也可以用相关条件进行控制。而我们用lastElmentChild的时候,是将li添加到ul下面最后一个li前面,就可以避免在计算的时候将文本节点计算在内,从而避免很多不必要的操作。

      同理还有一些属性/方法也和lastChild具有相同的特点。

    例如:

      childNodes--指向所有子节点列表(包括文本节点)

      previousSibling--指向前一个兄弟节点,如果该节点为第一个兄弟节点,则返回null(包括文本节点)

      hasChildNodes()--当childNodes有一个或者多个子节点时,返回真。(包括文本节点)

      等...

  • 相关阅读:
    maven学习(四)maven的生命周期
    maven学习(六)依赖、聚合、继承
    Koa2学习(三)GET请求
    Koa2学习(二)async/await
    Koa2学习(一)环境搭建
    实现一个简易的express中间件
    js生成页面水印
    使用 dva + antd 快速开发react应用
    使用ab 进行并发压力测试
    python3 使用http.server模块 搭建一个简易的http服务器
  • 原文地址:https://www.cnblogs.com/pcyy/p/5268629.html
Copyright © 2011-2022 走看看