上一节:
下一节:

  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>
上一节:
下一节: