【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类型定义了在节点树中插入，删除和替换的方法。

创建节点

插入节点

删除和替换节点