zoukankan      html  css  js  c++  java
  • Javascript 节点 全面解析

    源文:http://w3c.web600.net/html/JavaScript/JavaScriptb/20090404/700.html

    Node往往被翻译为节点,在一个对象(可以简单的理解为是HTML页面中),一个属性name="aaa"可以是一个节点,一个< div >……< /div>也可以是一个节点,在< body>……< /body>中的,也是一个大大的节点。下面是一些有关Node的属性和方法,并没有包含部分不兼容IE和FF内容的讲解。

    Node的属性介绍:

    nodeType:显示节点的类型
    nodeName:显示节点的名称
    nodeValue:显示节点的值
    attributes:获取一个属性节点
    firstChild:表示某一节点的第一个节点
    lastChild:表示某一节点的最后一个子节点
    childNodes:表示所在节点的所有子节点
    parentNode:表示所在节点的父节点
    nextSibling:紧挨着当前节点的下一个节点
    previousSibling:紧挨着当前节点的上一个节点
    ownerDocument:(不知)

    Node有各种各样的节点,我们先花一些时间认识他们,同时一并了解nodeType,nodeName和nodeValue属性:
    名称:元素节点
    nodeType:ELEMENT_NODE
    nodeType值:1
    nodeName:元素标记名
    nodeValue:null

    <body>
    <div id = "t" ><span></span></div>

    </body>
    <script>
    var d = document.getElementById("t");
    document.write(d.nodeType);
    document.write(d.nodeName);
    document.write(d.nodeValue);
    //显示 1 DIV null
    </script>
    名称:属性节点
    nodeType:ATTRIBUTE_NODE
    nodeType值:2
    nodeName:属性名
    nodeValue:属性值

    <body>
    <div id = "t" name="aaa"><span></span></div>
    </body>
    <script>
    var d = document.getElementById("t").getAttributeNode("name");
    document.write(d.nodeType);
    document.write(d.nodeName);
    document.write(d.nodeValue);
    //显示 2 name aaa
    </script>
    名称:文本节点
    nodeType:TEXT_NODE
    nodeType值:3
    nodeName:#text
    nodeValue:文本内容

    <body>
    <div id = "t">bbb</div>
    </body>
    <script>
    var d = document.getElementById("t").firstChild;
    document.write(d.nodeType);
    document.write(d.nodeName);
    document.write(d.nodeValue);
    //显示 3 #text bbb
    </script>
    名称:CDATA文本节点(XML中传递文本的格式)
    nodeType:CDATA_SECTION_NODE
    nodeType值:4
    nodeName:#cdata-section
    nodeValue:CDATA文本内容

    (作者省略8个属性,需技术补充)

    attributes属性,直接获取一个属性节点,注意这里要使用[],保持IE和FF的兼容性。

    <body name="ddd">
    <div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    </body>
    <script>
    var d = document.getElementById("t").attributes["name"];
    document.write(d.name);
    document.write(d.value);
    //显示 name aaa
    </script>
    firstChild和lastChild属性,表示某一节点的第一个和最后一个子节点:

    <body>
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    </body>
    <script>
    var d = document.getElementById("t");
    document.write(d.firstChild.innerHTML);
    document.write(d.lastChild.innerHTML);
    //显示 aaa ccc
    </script>
    childNodes和parentNode属性,表示所在节点的所有子节点和所在节点的父节点,这里的childNodes注意是一个数组:

    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    </body>
    <script>
    var d = document.getElementById("t");
    document.write(d.childNodes[
    1].innerHTML);
    document.write(d.parentNode.getAttribute(
    "name"));
    //显示 bbb ddd
    </script>
    nextSibling和previousSibling属性,分别表示在parentNode的childNodes[]数组中,紧挨着当前节点的上一个和下一个节点:

    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    </body>
    <script>
    var d = document.getElementById("t").childNodes[1];
    document.write(d.nextSibling.innerHTML);
    document.write(d.previousSibling.innerHTML);
    //显示 ccc aaa
    </script>
    ownerDocument属性(不知如何使用)

    Node的方法介绍:

    hasChildNodes():判定一个节点是否有子节点
    removeChild():去除一个节点
    appendChild():添加一个节点
    replaceChild():替换一个节点
    insertBefore():指定节点位置插入一个节点
    cloneNode():复制一个节点
    normalize():(不知)

    hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false

    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    <div id = "m"></div>
    </body>
    <script>
    alert(document.getElementById(
    "t").hasChildNodes());
    alert(document.getElementById(
    "m").hasChildNodes());
    // 第一个true,第二个false
    </script>
    removeChild()方法:去除一个节点

    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    </body>
    <script>
    var d = document.getElementById("t").firstChild;
    document.getElementById(
    "t").removeChild(d);
    // <span>aaa</span>被去除
    </script>
    appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入。



    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    </body>
    <script>
    var d = document.getElementById("t").firstChild;
    document.getElementById(
    "t").appendChild(d);
    // <span>aaa</span>成了最后一个节点
    </script>
    replaceChild()方法:从文档树中删除(并返回)指定的子节点,用另一个节点来替换它。

    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
    </body>
    <script>
    var newd = document.createElement("span");
    newd.innerHTML
    = "eee";
    var oldd = document.getElementById("t").lastChild;
    document.getElementById(
    "t").replaceChild(newd,oldd);
    // 最后一项成了 eee
    </script>
    insertBefore()方法:在指定节点的前面插入一个节点,如果已经存在,则删除原来的,然后在新位置插入

    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>


    </body>
    <script>
    var newd = document.createElement("span");
    newd.innerHTML
    = "eee";
    var where = document.getElementById("t").lastChild;
    document.getElementById(
    "t").insertBefore(newd,where);
    // 在最后一项的前面多了一项 eee
    </script>
    cloneNode()方法:复制一个节点,该方法有一个参数,true表示同时复制所有的子节点,false表示近复制当前节点

    <body name="ddd">
    <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div>
    </body>
    <script>
    var what = document.getElementById("t").cloneNode(false).innerHTML;
    document.getElementById(
    "m").innerHTML = what;
    // 增加了一个aaabbbccc
    </script>
  • 相关阅读:
    opencv-python与c++ opencv中的一些区别和基础的知识
    使用TensorFlow Object Detection API+Google ML Engine训练自己的手掌识别器
    使用Google Cloud Platform构建机器学习项目-宠物识别
    dlib下训练自己的物体检测器--手的检测
    python学习--Linux下dlib安装(主要是cmake和boost的安装)
    Python学习--使用dlib、opencv进行人脸检测标注
    《Python网络编程》学习笔记--UDP协议
    《Python网络编程》学习笔记--从例子中收获的计算机网络相关知识
    《Python网络编程》学习笔记--使用谷歌地理编码API获取一个JSON文档
    Spring Cloud Gateway:使用ReadBodyPredicateFactory读取request的body,可能无法匹配404
  • 原文地址:https://www.cnblogs.com/jikey/p/1659067.html
Copyright © 2011-2022 走看看