节点的名称和值
使用节点的nodeName和nodeValue属性可以读取节点的名称和值。这两个属性完全取决于节点的类型,具体如下表:
节点的nodeName和nodeValue属性说明:
节点类型 | nodeaName返回值 | nodeValue返回值 |
---|---|---|
Document | #document | null |
DocumentFragment | #document-fragment | null |
DocumentType | doctype名称 | null |
EntityReference | 实体引用名称 | null |
Element | 元素的名称(或标签名称) | null |
Attr | 属性的名称 | 属性的值 |
ProcessingInstruction | target | 节点的内容 |
Comment | #comment | 注释的文本 |
Text | #text | 节点的内容 |
CDATASection | #cdata-section | 节点的内容 |
Entity | 实体名称 | null |
Notation | 符号名称 | null |
示例:检测节点类型,读取属性
var node = document.getElementsByTagName("body")[0];
if(node.nodeType == 1)
var value = node.nodeName;
alert(value);
节点之间的关系
DOM把文档视为一种树结构,这种树结构被称为节点树JavaScript脚本可以通过这棵树访问所有节点,可以修改或删除它们的内容,也可以创建新的节点。
节点之间的关系包括:上下级的父子关系、相邻级别的兄弟关系
- 在节点树中,最顶端节点为根节点
- 除了根节点之外,每个节点都有一个父节点
- 节点可以包含任何数量的子节点
- 叶子是没有子节点的节点
- 同级节点是拥有相同父节点的节点
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>标准BOM</h1>
<p>这是一份简单的<strong>文档对象模型</strong></p>
<ul>
<li>D表示文档,HTML文档结构</li>
<li>O表示对象,文档结构的JavaScript脚本化映射</li>
<li>M表示模型,脚本与结构交互的方法和行为</li>
</ul>
</body>
</html>
分析:
在上面的HTMl结构中,DOCTYPE文档类型声明,然后是html元素,网页所有元素都包含在这个元素里。从文档结构看,html元素既没有父辈,也没有兄弟。如果用树来表示的化,这个html元素就是树根,代表整个文档。由html元素派生出head和body两个子元素,它们属于同一级别,且互不包含,可以称之为兄弟关系。head和body元素拥有共同的父元素html,同时他们又是其他元素的父元素,但包含的子元素不同。head元素包含title元素,title元素又博阿寒文本节点“标准DOM示例”。body元素包含3个子元素:h1、p和ul,它们是兄弟关系。如果继续访问,ul元素也是一个父元素,它包含3个li子元素。