【JS】【客户端】脚本化Web文档 —— DOM

DOM

文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API。

选取文档中的元素

客户端JavaScript程序可以使用全局变量 document 来引用 Document 对象。

为了操作文档中的元素，必须通过某种方式获得或选取这些引用文档元素的 Element 对象。

DOM定义许多方式来选取元素：

用指定的 ID 属性
用指定的 name 属性
用指定的标签名字
用指定的CSS类
匹配指定的 CSS 选择器

通过ID选取元素

可以用 Document 对象的 getElementById() 方法获取一个基于唯一ID的元素，例如：

var section1 = document.getElementById("section1");

通过名字选取元素

name属性的值不必是唯一，多个元素可能有同样的名字。可以使用Document对象的 getElementByName()方法，例如：

var radiobuttons = document.getElementsByName("favorite_color");

getElementsByName()定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用，它返回一个NodeList对象。

通过标签名选取元素

Document对象的getElementsByTagName()方法可用来选取指定类型/标签名的所有HTML或XML元素，例如：

var spans = document.getElementsByTagName("span");

返回一个NodeList对象，在NodeList中返回的元素按照在文档中的顺序排序的。

getElementsByTagName()进行不区分大小写的标签名比较。

给getElementsByTagName()传递通配符 * 将获取一个代表文档中的所有元素的NodeList对象。

Element类也定义getElementsByTagName()方法，但是它只选取该方法的元素的后代元素。例如：

var firstpara = document.getElementsByTagName("p")[0];
var firstParaSpans = firstpara.getElementsByTagName("span");

通过CSS类选取元素

getElementsByClassName()的返回值是一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。

getElementsByClassName()只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性包含所有指定的标识符时才匹配，但是标识符的顺序是无关紧要的。

通过CSS选择器选取元素

该API的关键是Document方法querySelectorAll()，它接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。

除了querySelectorAll(),文档对象还定义了querySelector()方法，但它只返回第一个匹配的元素，如果没有匹配的元素就返回null.

这两个方法在Element节点中也有定义。

文档结构遍历

作为节点树的文档

Document对象，它的Element对象和文档中表示文本的Text对象都是Node对象。

Node定义了一下重要的属性：

parentNode
childNodes
firstChild,lastChild
nextSibling,previousSibling
nodeType
nodeValue
nodeName

作为元素树的文档

将文档看作是Element对象树，忽略部分文档：Text和Commnet节点。

firstElementChild, lastElementChild
nextElementSibing, previouseElementSibling
childElementCount

文档/元素属性操作

元素内容操作

创建，插入和删除节点

Document类型定义了创建Element和Text对象的方法，Node类型定义了在节点树中插入，删除和替换的方法。

创建节点

插入节点

删除和替换节点