js 对象数组遍历 DOM 模型概述

DOM是JavaScript操作网页的接口，全称为”文档对象模型”(Doucment Object Model)。它的作用是将网页装换为一个JavaScript对象，从而可以用脚本进行各种操作。

浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解为网页的变成接口。DOM有自己的国际标准，目前通用版本是DOM3。

严格的说，DOM不属于JavaScipt，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用与DOM操作的语言。本章介绍的就是JavaScript对DOM标准的实现和用法。

节点

DOM的最小单位叫做节点(node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。每个节点可以看作文档树的一片叶子。

节点的类型有7种。

Document:整个文档树的顶层节点

DocumentType : doctype标签(比如)

Element : 网页的各种HTML标签(比如.等)

Attribute : 网页元素的属性(比如class = “right”)

Text : 标签之间或标签包含的文本

Comment: 注释

DocumentFragment : 文档的片段

这七中节点都属于浏览器原生提供的节点对象的派生对象，具有共同的属性和方法。

节点树

一个文档的多有节点，按照所在的层级，可以抽象为一种树状结构。这种结构就是DOM。

最顶层的节点就是document节点，它代表了真个文档，文档里面最高一层的HTML标签，一般是，它构成树状结构的根节点(root node)，其他HTML标签都是它的下级。

除了根节点以的节点都存在三种关系。

父节点关系(parentNode) : 直接那个上级节点

子节点关系(childNodes) : 直接的下级节点

同级节点关系(sibling) : 拥有同一个父节点的节点

DOM提供操作接口，用来获取三种关系的节点。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后面的那个同级节点）和previousSibling(紧跟在前的那个同级节点)属性。

特征相关属性

所有节点对象都是浏览器内置对象的实例，继承了Node属性和方法。这是所有节点共同的特征。以下属性与对象本身的特征相关。

Node.nodeName,Node.nodeType

nodeName属性返回节点名称，nodeType属性返回节点类型的常数值。具体的返回值，可查阅下方的表格。

类型

nodeName

nodeType

ELEMENT_NODE

大写的HTML元素名

1

ATTRIBUTE_NODE

等同于Attr.name

2

TEXT_NODE

text

3

COMMENT_NODE

comment

8

DOCUMENT_NODE

document

9

DOCUMENT_FRAGMENT_NODE

document-fragment

11

DOCUMENT_TYPE_NODE

等同于DocumentType.name

10

以document节点为例，它的nodeName属性等于#document，nodeType属性等于9。

document.nodeName // "#document"

document.nodeType // 9

如果一个

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-58611-1.html