JavaScript HTML DOM 导航
-
DOM 导航
使用HTML DOM,您可以使用节点关系导航节点树。根据W3C HTML DOM标准,HTML文档中的所有内容都是一个节点:- 整个文档是文档节点
- 每个HTML元素都是一个元素节点
- HTML元素中的文本是文本节点
- 每个HTML属性都是一个属性节点(不建议使用)
- 所有注释都是注释节点
使用HTML DOM,可以通过JavaScript访问节点树中的所有节点。可以创建新节点,并且可以修改或删除所有节点。 -
节点关系
节点树中的节点彼此具有层次关系。术语父,子和兄弟用于描述关系。- 在节点树中,顶级节点称为根(或根节点)
- 除了根(没有父节点)之外,每个节点都只有一个父节点
- 节点可以有许多子节点
- 兄弟姐妹是具有相同父母的节点
从上面的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(前一个兄弟姐妹元素)
-
-
innerHTML
在本教程中,我们使用innerHTML属性来检索HTML元素的内容。但是,学习上面的其他方法对于理解树的结构和DOM的导航很有用。 -
-
nodeName属性
nodeName属性指定节点的名称。- nodeName是只读的
- element节点的nodeName与标签名称相同
- 属性节点的nodeName是属性名称
- text节点的nodeName始终是#text
- 文档节点的nodeName始终是#document
注意: nodeName始终包含HTML元素的大写标记名称。
-
nodeValue属性
nodeValue属性指定节点的值。- elementValue用于元素节点,默认null
- text节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值
-
nodeType属性
nodeType物业是只读的。它返回节点的类型。最重要的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>