Document 节点 · 学习讲义 2019

## 一、概述 `document`节点对象代表整个文档，每张网页都有自己的`document`对象。`window.document`属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 ## 二、属性 ### 2.1 快捷方式属性 * 对于 HTML 文档来说，`document`对象一般有两个子节点。第一个子节点是`document.doctype`，指向`<DOCTYPE>`节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成`<!DOCTYPE html>`。如果网页没有声明 DTD，该属性返回`null`。`document.firstChild`通常就返回这个节点。 * `document.documentElement`属性返回当前文档的根元素节点（root）。它通常是`document`节点的第二个子节点，紧跟在`document.doctype`节点后面。HTML网页的该属性，一般是`<html>`节点。 * `document.body`属性指向`<body>`节点，`document.head`属性指向`<head>`节点。这两个属性总是存在的，如果网页源码里面省略了`<head>`或`<body>`，浏览器会自动创建。另外，这两个属性是可写的，如果改写它们的值，相当于移除所有子节点。 ### 2.2 节点集合属性 * `document.links`属性返回当前文档所有设定了`href`属性的`<a>`及`<area>`节点。 * `document.images`属性返回页面所有`<img>`图片节点。 ### 2.3 文档静态信息属性 * `document.URL`属性都返回一个字符串，表示当前文档的网址。 * `document.domain`属性返回当前文档的域名，不包含协议和端口。 * `document.title`属性返回当前文档的标题。 * `document.characterSet`属性返回当前文档的编码，比如`UTF-8`、`ISO-8859-1`等等。 ## 三、方法 ### 3.1 document.querySelector()，document.querySelectorAll() `document.querySelector`方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回`null`。 ~~~ var el1 = document.querySelector('.myclass'); ~~~ `document.querySelectorAll`方法与`querySelector`用法类似，区别是返回一个`NodeList`对象，包含所有匹配给定选择器的节点。 ~~~ elementList = document.querySelectorAll('.myclass'); ~~~ 这两个方法的参数，可以是逗号分隔的多个 CSS 选择器，返回匹配其中一个选择器的元素节点，这与 CSS 选择器的规则是一致的。 ### 3.2 document.getElementsByTagName() `document.getElementsByTagName`方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象，可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。 ~~~ var paras = document.getElementsByTagName('p'); paras instanceof HTMLCollection // true ~~~ 上面代码返回当前文档的所有`p`元素节点。 ### 3.3 document.getElementsByClassName() `document.getElementsByClassName`方法返回一个类似数组的对象（`HTMLCollection`实例），包括了所有`class`名字符合指定条件的元素，元素的变化实时反映在返回结果中。 ~~~ var elements = document.getElementsByClassName(names); ~~~ 由于`class`是保留字，所以 JavaScript 一律使用`className`表示 CSS 的`class`。参数可以是多个`class`，它们之间使用空格分隔。 ~~~ var elements = document.getElementsByClassName('foo bar'); ~~~ 上面代码返回同时具有`foo`和`bar`两个`class`的元素，`foo`和`bar`的顺序不重要。 ### 3.4 document.getElementById() `document.getElementById`方法返回匹配指定`id`属性的元素节点。如果没有发现匹配的节点，则返回`null`。 ~~~ var elem = document.getElementById('para1'); ~~~ `document.getElementById`方法与`document.querySelector`方法都能获取元素节点，不同之处是`document.querySelector`方法的参数使用 CSS 选择器语法，`document.getElementById`方法的参数是元素的`id`属性。 ~~~ document.getElementById('myElement') document.querySelector('#myElement') ~~~ 上面代码中，两个方法都能选中`id`为`myElement`的元素，但是`document.getElementById()`比`document.querySelector()`效率高得多。 ### 3.5 document.createElement() `document.createElement`方法用来生成元素节点，并返回该节点。 ~~~ var newDiv = document.createElement('div'); ~~~ `createElement`方法的参数为元素的标签名，即元素节点的`tagName`属性，对于 HTML 网页大小写不敏感，即参数为`div`或`DIV`返回的是同一种节点。如果参数里面包含尖括号（即`<`和`>`）会报错。 ### 3.6 document.createTextNode() `document.createTextNode`方法用来生成文本节点（`Text`实例），并返回该节点。它的参数是文本节点的内容。 ~~~ var newDiv = document.createElement('div'); var newContent = document.createTextNode('Hello'); newDiv.appendChild(newContent); ~~~ 上面代码新建一个`div`节点和一个文本节点，然后将文本节点插入`div`节点。 ### 3.7 document.createAttribute() `document.createAttribute`方法生成一个新的属性节点（`Attr`实例），并返回它。 ~~~ var attribute = document.createAttribute(name); ~~~ `document.createAttribute`方法的参数`name`，是属性的名称。 ~~~ var node = document.getElementById('div1'); var a = document.createAttribute('my_attrib'); a.value = 'newVal'; node.setAttributeNode(a); // 或者 node.setAttribute('my_attrib', 'newVal'); ~~~ ### 3.8 document.addEventListener()，document.removeEventListener()，document.dispatchEvent() ~~~ // 添加事件监听函数 document.addEventListener('click', listener, false); // 移除事件监听函数 document.removeEventListener('click', listener, false); // 触发事件 var event = new Event('click'); document.dispatchEvent(event); ~~~