JS与DOM

旧城等待， 2022-03-08 16:40 178阅读 0赞

### 文章目录 ###

*  DOM节点
 *   *  Node类型
     *  节点关系
     *  操作节点
     *  Document类型
     *   *  文档的子节点
         *  文档信息
         *  查找元素
         *  特殊集合
     *  Element类型
     *   *  HTML元素
         *  获取、设置、移除属性

# DOM节点 #

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

文档节点是每个文档的根节点，在HTML中，文档节点只有一个子节点，即`<html>`元素，称之为文档元素，文档中的其他所有元素都包含在文档元素之中并且每个文档只能有一个文档元素。

文档中的每一个标记都可以通过树中的一个节点来表示，**HTML元素通过元素节点表示**，属性(Attributes)通过属性节点来表示，文档类型通过文档类型节点来表示，注释通过注释节点来表示，等等。一共有12个节点类型，而这些类型都继承自一个基类型Node。

## Node类型 ##

在DOM1级中定义了一个Node接口，这个接口在JavaScript中是作为Node类型来实现的。JavaScript中的所有节点都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个用于表明节点类型的`nodeType`属性，该属性的值主要由12个常数来表示，一一对应12个Node类型。

*  Node.ELEMENT\_NODE:1
 *  Node.ATTRIBUTE\_NODE:2
 *  Node.TEXT\_NODE:3
 *  Node.CDATA\_SECTION\_NODE:4
 *  Node.ENTITY\_REFERENCE\_NODE:5
 *  Node.ENTITY\_NODE:6
 *  Node.PROCESSING\_INSTRUCTION\_NODE:7
 *  Node.COMMENT\_NODE:8
 *  Node.DOCUMENT\_NODE:9
 *  Node.DOCUMENT\_TYPE\_NODE:10
 *  Node.DOCUMENT\_FRAGMENT\_NODE:11
 *  Node.NATATION\_NODE:12

## 节点关系 ##

节点与节点之间的关系可以用一棵树来形容。例如`<body>`元素就是`<html>`的子元素，而`<head>`元素就是`<body>`元素的兄弟元素。

每个节点都有一个`childNodes`属性，这个属性指向一个`NodeList`对象。`NodeList`对象。是一个类数组对象，可以通过方括号加索引值访问内部元素，也具有`length`属性。

`NodeList`对象的特殊之处在于它是一个基于DOM结构动态执行查询的结果，而不是某个时间点的快照，因此DOM结构的变化能够自动反映到`NodeList`对象。

此外，每个节点还都有一个`parentNode`属性，顾名思义，是指向该节点的父节点的。在同一个`NodeList`中的节点具有相同的`parentNode`属性。

在同一个`NodeList`中的节点之间都是兄弟节点，通过访问`previouSibling`或`nextSibling`属性，可以访问到该节点在`NodeList`中后一个或前一个节点。

父元素与其第一个和最后一个子元素也有一些联系，父元素可以通过`firstChild`和`lastChild`分别访问父元素的第一个和最后一个子元素。

最后，所有元素都还拥有一个`ownerDocument`属性，该属性指向表示整个文档的文档节点。

## 操作节点 ##

DOM提供了一些操作节点的方法，其中最常用的方法是`appendChild()`，用于向`childNodes`的末尾添加一个节点。

如果被传入到`appendChild()`的节点本身已经是文档的一部分了，那该操作的结果就是将该节点从原来的位置转移到新位置。

如果需要把节点放在某个特定的位置上，而不是放在末尾，那么可以使用`insertBefore()`方法，这个方法接受两个参数，分别是要插入的节点和作为参照的节点。

如果想要替换节点则可以使用`replaceChild()`，同样接受两个参数，要插入的节点和要被替换的节点。被替换之后的节点，理论上说它还在文档之中，但是在文档中已经没有了它的位置。

如果是想直接移除而非替换的话，可以使用`removeChild()`方法。

还有一个所有类型的节点都有的方法，`cloneNode()`。可以用于创建调用这个方法的节点的副本，这个方法接受一个布尔值参数，表示是否执行深拷贝，也就是复制节点和整个子节点树。复制返回的节点副本属于文档，但是并没有父节点，需要通过上面介绍的方法添加到文档之中。

## Document类型 ##

JavaScript通过`Document`类型表示文档，在浏览器中，`document`对象是`HTMLDocument`的一个实例，表示整个HTML页面。而且`document`对象是`window`对象的一个属性，因此可以将其作为全局对象来访问。

### 文档的子节点 ###

`document`对象内置了几个访问子节点的快捷方式，首先就是`documentElement`属性，该属性始终指向`<html>`元素。

**注：document的`firstChild`并不是`<html>`元素，而是`<!doctype html>`，`<!doctype html>`也可以通过`document.doctype`来访问**。

除此之外还有`body`属性指向`<html>`元素的`<body>`子元素。

### 文档信息 ###

`document`对象还有一些代表网页信息的属性

首先就是`title`属性，这个不必多说。

然后还有三个与对网页请求有关的属性：

*  `URL`：页面完整的URL
 *  `domain`：只包含页面的域名
 *  `referer`：链接到当前页面的那个页面的URL，如果没有来源页面可能为空。

注：这三个属性里面只有`domain`是可以设置的。

### 查找元素 ###

`Document`类型为查找对象定义了两个方法，`getElementsByTagName`和`getElementById`。

顾名思义，一个是通过标签名来查找，而另一个则是通过id来查找。

而通过标签名来查找会返回一个`HTMLCollection`对象，这个对象也是一个类数组对象，与前面介绍的`NodeList`非常相似。

`HTMLCollection`还有一个`namedItem()`的方法，通过它，可以在`HTMLCollection`中找到有相应`name`属性的项。

而`HTMLDocument`类型还定义了一个`getElementsByName`的方法，这个方法会返回带有给定`name`属性的所有元素。

### 特殊集合 ###

*  `document.anchors`：包含问答那个中所有带`name`属性的`<a>`元素
 *  `document.forms`：包含文档中所有的`<form>`元素
 *  `document.images`：包含文档中所有的元素
 *  `document.links`：包含文档中所有带`href`特性的`<a>`元素。

## Element类型 ##

### HTML元素 ###

所有的HTML元素都由`HTMLElement`类型表示。`HTMLElement`类型直接继承自`Element`并添加了一些属性。

### 获取、设置、移除属性 ###

操作属性的DOM方法主要是3个

*  `getAttribute()`
 *  `setAttribute()`
 *  `removeAttribute()`