JavaScript HTML DOM 导航

  • DOM 导航

    使用HTML DOM,您可以使用节点关系导航节点树。
    根据W3C HTML DOM标准,HTML文档中的所有内容都是一个节点:
    • 整个文档是文档节点
    • 每个HTML元素都是一个元素节点
    • HTML元素中的文本是文本节点
    • 每个HTML属性都是一个属性节点(不建议使用)
    • 所有注释都是注释节点
    DOM
    使用HTML DOM,可以通过JavaScript访问节点树中的所有节点。可以创建新节点,并且可以修改或删除所有节点。
  • 节点关系

    节点树中的节点彼此具有层次关系。术语兄弟用于描述关系。
    • 在节点树中,顶级节点称为根(或根节点)
    • 除了根(没有父节点)之外,每个节点都只有一个父节点
    • 节点可以有许多子节点
    • 兄弟姐妹是具有相同父母的节点
    <html>
    
      <head>
        <title>DOM Tutorial</title>
      </head>
    
      <body>
        <h1>DOM Lesson one</h1>
        <p>Hello world!</p>
      </body>
    
    </html>
    从上面的HTML中你可以看到:
    • <html> 是根节点
    • <html> 没有父母
    • <head>和<body>的父母元素是<html>
    • <html>第一个孩子是<head>
    • <html>最后一个孩子是<body>
    • <head> 有一个孩子: <title>
    • <title> 有一个孩子(文本节点):“DOM教程”
    • <body>有两个孩子:<h1>和<p>
    • <h1> 有一个孩子:“DOM第一课”
    • <p> 有一个孩子:“Hello world!”
    • <h1>跟<p>是兄弟姐妹
  • 在节点之间导航

    您可以使用以下节点属性在使用JavaScript的节点之间导航:
    • parentNode(父节点)
    • childNodes[nodenumber](子节点[索引])
    • firstChild(第一个子节点)
    • lastChild(最后一个子节点)
    • nextSibling(下一个兄弟姐妹元素)
    • previousSibling(前一个兄弟姐妹元素)
  • 子节点和节点值

    DOM处理中的常见错误是期望元素节点包含文本。
    例如:
    <title id="demo">DOM 教程</title>
    元素节点<title>(在上面的例子中)不包含其他元素节点。它包含一个值为“DOM 教程” 的文本节点。节点的innerHTML属性可以访问文本节点的值 :
    var myTitle = document.getElementById("demo").innerHTML;
    访问innerHTML属性与访问firstChild.nodeValue相同:
    var myTitle = document.getElementById("demo").firstChild.nodeValue;
    访问第一个孩子也可以这样做:
    var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
    以下3个示例都检索<h1>元素的文本并将其复制到<p>元素中:
    <html>
    <body>
    
    <h1 id="id01">My First Page</h1>
    <p id="id02"></p>
    
    <script>
    document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
    </script>
    
    </body>
    </html>
    尝试一下
    <html>
    <body>
    
    <h1 id="id01">My First Page</h1>
    <p id="id02"></p>
    
    <script>
    document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
    </script>
    
    </body>
    </html>
    尝试一下
    <html>
    <body>
    
    <h1 id="id01">My First Page</h1>
    <p id="id02">Hello!</p>
    
    <script>
    document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
    </script>
    
    </body>
    </html>
    
    尝试一下
  • innerHTML

    在本教程中,我们使用innerHTML属性来检索HTML元素的内容。但是,学习上面的其他方法对于理解树的结构和DOM的导航很有用。
  • DOM根节点

    有两个特殊属性允许访问完整文档:
    • document.body - 文件正文
    • document.documentElement - 完整的文件
    <html>
    <body>
    
    <p>Hello World!</p>
    <div>
    <p>The DOM is very useful!</p>
    <p>This example demonstrates the <b>document.body</b> property.</p>
    </div>
    
    <script>
    alert(document.body.innerHTML);
    </script>
    
    </body>
    </html>
    
    尝试一下
    <html>
    <body>
    
    <p>Hello World!</p>
    <div>
    <p>The DOM is very useful!</p>
    <p>This example demonstrates the <b>document.documentElement</b> property.</p>
    </div>
    
    <script>
    alert(document.documentElement.innerHTML);
    </script>
    
    </body>
    </html>
    
    尝试一下
  • nodeName属性

    nodeName属性指定节点的名称。
    • nodeName是只读的
    • element节点的nodeName与标签名称相同
    • 属性节点的nodeName是属性名称
    • text节点的nodeName始终是#text
    • 文档节点的nodeName始终是#document
    <h1 id="id01">My First Page</h1>
    <p id="id02"></p>
    
    <script>
    document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
    </script>
    尝试一下
    注意: nodeName始终包含HTML元素的大写标记名称。
  • nodeValue属性

    nodeValue属性指定节点的值。
    • elementValue用于元素节点,默认null
    • text节点的nodeValue是文本本身
    • 属性节点的nodeValue是属性值
  • nodeType属性

    nodeType物业是只读的。它返回节点的类型。
    <h1 id="id01">My First Page</h1>
    <p id="id02"></p>
    
    <script>
    document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
    </script>
    尝试一下
    最重要的nodeType属性是:
    Node Type 例如
    ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
    ATTRIBUTE_NODE 2 class = "heading" (deprecated)
    TEXT_NODE 3 W3Schools
    COMMENT_NODE 8 <!-- This is a comment -->
    DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
    DOCUMENT_TYPE_NODE 10 <!Doctype html>