DOM概览
上图的每个方框是文档的一个节点,它表示一个Node对象。
注意,通用的Document和Element类型与HTMLDocument和HTMLElement类型之间是有严格的区别的。Document类型代表一个 HTML或XML文档,Element类型代表该文档中的一个元素。HTMLDocument和HTMLElement子类 只是针对于HTML文档和元素。
选择文档元素
获取文档的一个或多个元素有如下方法:
- 用指定的id属性
- 用指定的name属性
- 用指定的标签名字
- 用指定的CSS类(class属性)
- 用指定的CSS选择器
通过ID选取元素
可以用Document对象的getElementById()方法选取一个基于唯一ID的元素,返回包含单个Element的Node对象。
// 选择id为"section1"的唯一元素
var section1 = document.getElementById("section1");
通过name选择元素
区别于id,name属性的值不是必须唯一,多个元素可以有同样的名字。
getElementsByName()定义在HTMLDocument类中,而不是在Document类中,所以它只针对HTML文档可用,返回包含多个Elements的NodeList对象。
注意:对于元素,返回值不是元素自身的Element对象,而是表示
元素创建的嵌套浏览器窗体的Window对象。
// 选择name为"favorite"的所有元素
var radiobuttons = document.getElementsByName("favorite");
通过标签名选择元素
Document对象的getElementsByTagName()方法可用来选取指定标签的所有HTML或XML元素,返回包含多个Elements的NodeList对象。
// 选择第1个元素
var firstpara = document.getElementByTagName("p")[0];
由于历史原因,HTMLDocument类定义了一些快捷属性来访问各种各样的节点:
// 引用id为"shipping_address"的form元素
document.forms.shipping_address;
- head、body属性与上面不同,指向单个元素而不是元素的集合。
// 引用body元素
document.body;
通过CSS类(class)选择元素
类似getElementsByTagName(),在HTML文档和HTML元素上都可以调用getElementsByClassName(),它的返回值是一个实时的的NodeList对象,包含文档或元素所有匹配的后代节点。
getElementsByClassName()只需要一个字符串参数,但是该字符串可以由多个空格隔开的标识符组成,只有当元素的class属性值包含所有的标识符时才匹配,但是标识符的顺序是无关紧要的。
// 查看id为"log"的元素的所有后代中,类名中包含"fatal"和"error"的元素集合
var log = document.getElementById("log");
var fatal = log.getElementsByClassName("fatal error");
通过CSS选择器选择元素
- 用ID、标签名或类名选择
#nav // id="nav"的元素
div // 所有元素
.warning // 所有在class属性中包含"warning"的元素
- 基于属性值来选取
p[lang="fr"] // 所有使用法语的段落,如:
*[name="x"] // 所有包含name="x"属性的元素
- 组合使用
span.fatal.error // class中包含"fatal"和"error"的所有元素
span[lang="fr"].warning // 所有使用法语且class中包含"warning"的元素
- 基于文档结构选取
#log span // id="log"元素的 *后代元素* 中的所有元素
#log>span // id="log"元素的 *子元素* 中的所有元素
body>h1:first-child // 的子元素中的第一个元素
Document对象的querySelectorAll()方法,接收一个包含CSS选择器的字符串参数,返回匹配选择器的所有元素的NodeList对象,但是NodeList对象并不是实时的。
同时,还有个方法querySelector(),但它只返回第1个匹配的元素(以文档顺序)或者没有匹配就返回null。
注意:CSS定义了":first-line"和":first-letter"等伪元素,在CSS中,它们匹配文本节点的一部分而不是实际元素。如果和querySelectorAll()和querySelector()一起使用它们是不匹配的。
文档结构和遍历
文档的节点(Node)树
Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。
Node有以下一些属性:
属性
意义
parentNode
该节点的父节点,Document对象的父节点是null。
childNodes
该节点的子节点的实时表示(NodeList对象)。
firstChild、lastChild
该节点的第1个和最后1个子节点,如果没有子节点则为null。
nextSibling、previoursSibling
该节点的兄弟节点的下一个和前一个。
nodeType
该节点的类型。1代表Element节点,3代表Text节点,8代表Comment节点,9代表Document节点,11代表DocumentFragment节点。
nodeValue
Text节点或Comment节点的文本内容。
nodeName
元素的标签名,以大写形式表示。
文档的元素(Element)树
如果将文档Element对象树,将忽略Text和Comment节点。
Element对象的有以下属性:
属性
意义
parentNode
该节点的父节点,任何Element的parentNode总是另一个Element,或者追溯到树根的Document或DocumentFragment节点。
children
类似ChildNodes,它也是一个NodeList对象,但不同的是children列表只包含Element对象。
firstElementChild, lastElementChild
类似firstChild和lastChild,但只代表子Element。
nextElementSibling, previousElementSibling
类似nextSibling和previousSibling,但只代表兄弟Element。
childElementCount
子元素的数量。返回的值和children.length值相等。
示例代码:
Document
123
可参考链接
元素属性
HTML元素由一个标签和一组称为属性(attribute)的名/值对组成。
HTML标准属性
HTMLElement定义了通用的HTTP属性,如id、lang、dir,以及事件处理程序,如onclick。
标准属性有以下特点:
- HTML属性名不区分大小写,但JavaScript属性名则对大小写敏感。从HTML属性名转换到JavaScript属性名时应该采用小写,如果包含多个单词,则除第一个以外的单词的首字母大写,如:defatultCheked.
- 有些HTML属性在JavaScript中是保留字。对于这些属性,一般的规则是为属性名加前缀"html"。如for属性在JavaScript中变为htmlFor;但class属性是一个例外,在JavaScript中它为className。
- 表示HTML属性的值通常是字符串,但也有布尔值或数值的属性,如defaultChecked和maxLength。事件处理程序的属性则是Function对象(或null)。HTML元素的style属性值是CSSStyleDeclaration对象。
HTML非标准属性
Element类型定义了getAttribute()和setAttribute()方法来查询和设置非标准的HTML属性,也可用于查询和设置XML文档的属性。
非标准属性有以下特点:
- 属性值都被看做是字符串。
- 方法使用标准属性名,甚至当这些名称是JavaScript保留字时也不例外。
var image = document.images[0];
var width = parseInt(image.getAttribute("WIDTH")); // 需要调用parseInt()将字符串转换成int
image.setAttribute("class", "thumbnail"); // "class"属性
数据集属性(dataset)
有时候我们需要在HTML元素上绑定一些额外的信息,可以使用getAttribute()和setAttribute()来读和写非标准属性的值,但为此付出的代价是文档将不再是合法有效的HTML。
HTML5提供了一个解决方案。在HTML5文档中,任意以"data-"为前缀的小写的属性名字都是合法的。
HTML5还在Element对象上定义了dataset属性。该属性指代一个对象,它的各个属性对应于去掉前缀的data-属性。带连字符的属性对应于驼峰命名法属性名:data-jquery-test属性就变成dataset.jqueryTest属性。
attributes属性
Node类型定义了attributes属性。针对非Element对象的节点,该属性为null。对于Element对象,attributes属性是实时只读的类数组对象,它代表元素的所有属性。Attr对象是一类特殊的Node.
document.body.attributes[0]; // 元素的第1个属性
document.body.attributes.bgcolor; // 元素的bgcolor属性
document.body.attributes["ONLOAD"]; // 元素的onload属性
元素内容
innerHTML&outerHTML属性
- innerHTML属性返回元素的内容(可能包含其他element元素)。
- outerHTML属性返回元素的标签与内容。
如,对于
元素:This is a simple document
innerHTML属性的值为:This is a simple document
outerHTML属性的值为:This is a simple document
textContent属性
有时需要查询纯文本形式的内容,或在文档中插入纯文本,则可以使用Node的textContent属性来实现。
textContent属性就是将指定元素的所有后代Text节点简单地串联在一起。
如,对于
元素:This is a simple document
textContent属性的值为:This is a simple document
注意:在IE中要使用innerText属性来代替。
// 实现textContent
function textContent(e) {
var child, type, s = "";
for(child = e.firstChild; child != null; child = child.nextSibling) {
type = child.nodeType;
if(type === 3 || type === 4) // Text和CDATASection节点
s += child.nodeValue;
else if(type === 1) // 递归Element节点
s += textContent(child);
}
return s;
}
创建、插入和删除节点
创建节点
- 创建新的Element节点可以使用document对象的createElement()方法。
// 从指定的URL,异步加载和执行脚本
function loadasync(url) {
var head = document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.src = url;
head.appendChild(s);
}
- 还可通过cloneNode()方法来创建一个节点,新创建的节点以现有的节点为模板:
- Coffee
- Tea
- Water
- Milk
注意:拷贝出来的元素id与原始的相同,但通过getElementById()获取到的将还是原始的元素,而不是拷贝出来的元素。
插入节点
Node的方法appendChild()或insertBefore()方法可以实现将一个节点插入到已知文档中。
appendChild()将新节点插入到最后,作为该节点的最后一个子节点。
insertBefore()则将新节点插入到指定的子节点之前。
注意:如果使用上述方法将已存在的一个节点再次插入,那么节点将自动从它原有的位置删除并在新的位置重新插入(类似于先删除后新增)。
删除和替换节点
- removeChild()方法可以从文档树中删除一个节点。
node.parentNode.removeChild(node); // 删除自身节点
- replaceChild()方法可以用一个新节点替换已存在的节点。
node.parentNode.replaceChild(document.createTextNode("[ REPLACED ]"), node); // 替换自身节点
// 使用innerHTML实现outerHTML属性
( function() {
// 如果outerHTML存在,则直接返回
if(document.createElement("div").outerHTML) return;
// get方法
function outerHTMLGetter() {
var container = document.createElement("div"); // 创建一个虚拟节点
container.appendChild(this.cloneNode(true));
return container.innerHTML;
}
// set方法
function outerHTMLSetter(value) {
var container = document.createElement("div"); // 创建一个虚拟节点
container.innerHTML = value;
// 将value的所有节点插入到this节点之前
// NOTE: 由于同一个documnet中,firstChild插入后,原始位置上的节点将被删除
while(container.firstChild)
this.parentNode.insertBefore(container.firstChild, this);
// 删除当前节点
this.parentNode.removeChild(this);
}
// 设置outerHTML属性的getter和setter
if(Object.defineProperty) {
Object.defineProperty(Element.prototype, "outerHTML", {
get: outerHTMLGetter,
set: outerHTMLGetter,
enumerable: false,
configurable: true
});
} else {
Element.prototype._defineGetter_("outerHTML", outerHTMLGetter);
Element.prototype._defineSetter_("outerHTML", outerHTMLSetter);
}
}());
DocumentFragment节点
- DocumentFragment是一个特殊的Node,它作为其他节点的一个临时的容器。
- 像Document节点一样,DocumentFragment节点是独立的,而不是任何其他文档的一部分,它的parentNode总是null。
- 类似Element节点,它可以有任意多的子节点,可以使用appendChild()、insertBefore()等方法来操作它们。
- 将DocumnetFragment节点插入到文档中,其实是将DocumentFragment的所有子节点插入到文档,而不是DocumentFragment本身。
// 倒序排列节点node的子节点
function reverse(node) {
var f = document.createDocumentFragment();
// NOTE: 给f添加一个节点,该节点会自动从node中删除
while(node.lastChild) f.appendChild(node.lastChild);
// 将临时节点f的所有子节点全部移回到node中
node.appendChild(f);
}