zoukankan      html  css  js  c++  java
  • JS中Node节点总结

    Node的三个基本属性:

      1.nodeType:表明节点类型,1是元素节点,3是文本节点。

      2.nodeName:  表明节点名称,元素节点为标签名,文本节点为#text。

      3.nodeValue:表明节点值,元素节点为null,文本节点为文本内容。

    Node的节点关系:

      1.parentNode与childNodes

        parentNode寻找当前节点的父节点,childNodes寻找当前节点的子节点,其中包括文本节点和元素节点(特别需要注意空白的文本节点也算是节点)如下程序

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>childNodes.length</title>
    </head>
    <body>
        <ul id="ul">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script>
            var oUl=document.getElementById('ul');
            alert(oUl.childNodes.length);//是7不是3
        </script>
    </body>
    </html>

      2:firstChild与lastChild

        分别对应父节点的第一个节点与最后一个节点,firstChild相当于childNodes[0]或childNodes.item(0)。

      3.nextSibling与previousSibling

        分别对应当前节点的前一个节点与当前元素的后一个节点。

    Node的操作节点:

      Node的操作节点有appendChild(),insertBefore(),replaceChild(),removeChild(),cloneNode(),normalize()

      1.appendChild(newNode)是将newNode添加到当前节点的最后一个子节点的后面,如果newNode已经是文档的一部分,则appendChild操作相当于剪切;若果newNode是新创造的节点,则appendChild操作相当于添加。

      2.insertBefore(newNode,oldNode)是将newNode添加到当前节点的oldNode子节点的前面,如果insertBefore(newNode,null),则insertBefore()的操作和appendChild()一样。

      3.replaceChild(newNode,oldNode)是将oldNode替换为newNode,不过oldNode的所有关系指针newNode也都继承下来。

      4.removeChild(oldNode)是删除oldNode节点。

      5.cloneNode(true/false)是将已知节点复制一份,如果为true,包括子节点,若果为false,不包括子节点。然后通过appendChild(),insertBefore(),replaceChild()将其添加到文档中。

      6.normalize()是将空文本节点删除或将相邻的文本节点合并为一个文本节点。

  • 相关阅读:
    关于医学的一点想法
    我的ArcGis9.3 到Arcgis10.0 升级步骤
    最近一月的娱乐生活:看电影,玩游戏
    最近一月的娱乐生活:看电影,玩游戏
    5年技术学习历程的回顾
    5年技术学习历程的回顾
    网站开发的技术选型问题
    网站开发的技术选型问题
    学技术真累
    Java实现 LeetCode 200 岛屿数量
  • 原文地址:https://www.cnblogs.com/iwebkit/p/6928978.html
Copyright © 2011-2022 走看看