DOM

来源：互联网发布：计算机编程课程编辑：程序博客网时间：2024/06/05 17:13

根据W3C的定义，DOM可以分为level 1~3这几层。

DOM Level 1

DOM Level 1 是由Core与HTML两个模块组成的。

Core模块是对包括HTML在内的基本DOM操作提供支持

HTML模块是对一些用于HTML文档的方法提供支持

DOM Level 1 Core 中定义的一些基本方法

方法名

说明

getElementsByTagName

根据指定的标签名来获取元素

createElement

创建新元素

appendChild

插入元素

DOM Level 2

与DOM Level 1 相比，DOM Level 2包含了很多模块。可惜的是IE8以及更早的版本并没有遵循DOM Level 2标准，而Firefox或GoogleChrome等现代浏览器则几乎完全支持DOM Level 2.

DOM Level 2所包含的模块如下：

模块

说明

Core

Level 1 Core 的扩展

HTML

Level 1 HTML 的扩展

Views

对与文档显示状态相关的功能提供支持

Events

对捕获，冒泡，取消等事件系统提供支持

Styles

对与样式表相关的功能提供支持Traversal and Range

对DOM树的遍历以及范围的指定提供支持

DOM Level 3

DOM Level 2所包含的模块如下：

模块

说明

Core

Level 2 Core 的扩展

Load and Save

对文档内容的读取与写入提供支持

Validation

对文档内容合法性的验证提供支持

XPath

对XPath相关的功能提供支持

Events

Level 2 Events 的扩展。对键盘事件提供了支持

在DOM标准制定之前，各种浏览器所采用的对象模型被称为DOM Level 0.浏览器开发商自主实现的功能为了不与DOM标准中定义的属性名或名称冲突，常常会根据开发商的不同分别在名称前加上前缀。例如：Firefox中使用了moz,GoogleChrome与Safari中使用了webkit

DOM的基础

一.标签，元素，节点

在HTML文档中使用的节点

节点

节点类型常量

节点类型值

接口

元素节点

ELEMENT_NODE

Element

属性节点

ATTRIBUTE_NODE

Attr

文本节点

TEXT_NODE

Text

注释节点

COMMENT_NODE

Comment

文档节点

DOCUMENT_NODE

Document

二.Document对象

Document对象是DOM树结构中的根节点。<html>和<body>分别对应Document对象中的documentElement属性与body属性。Document对象是一种用于表示整个HTML文档的对象。

准确的说，document是window对象中的一个属性，由于window对象是一个全局对象，因此在对其属性进行访问时可以将window.省略不写。

三.节点的选择

1.通过ID检索

Document.getElementById()

2.通过标签名检索

Element.getElementsByTagName()

注意：getElementsByTagName()所取得的对象是一个NodeList对象，而不是单纯的Node对象的数组。而NodeList对象的一大特征就是它是一个Live对象。Live对象始终具有DOM树实体的引用，因此对DOM树做出的变更也会在Live对象中得到体现。所以在使用Live对象时，for循环应多加注意，避免无限循环。

由于Live对象的性能确实是较差的，所以通常都会将Live对象先转换为Array，之后再作为结果返回。

3.通过名称检索

HTMLDocument.getELementsByName()

不过只能在form标签或input标签中使用name属性。所以使用频率较低。

4.通过类名检索

HTMLElement.getElementsByClassName()

5.父节点，子节点，兄弟节点

属性名

能够获取的节点

parentNode

父节点

childNodes

子节点列表

firstChild

第一个子节点

lastChild

最后一个子节点

nextSibling

下一个兄弟节点

previousSibling上一个兄弟节点

由于上面属性会取得空白节点等不需要的其他节点，所有另外制定了一些用于获取不包含空白节点与注释节点的元素的API.

属性名

能够获取的节点

children

子元素节点列表

firstElementChild

第一个子元素

lastElementChild

最后一个子元素

nextElementSibling

下一个元素

previousElementSibling上一个元素

childElementCount

子元素的数量

6.SelectAPI

通过SelectAPI对元素指定的方式与其在CSS中指定元素的方式相同

document.querySelector()

document.querySelectorAll()取得的是一个StaticNodeList对象

四.节点的操作：创建，新增，更改，删除

Document.createElement()方法或者Document.createTextNode()方法来创建节点，通过Document.createComment()方法来创建一个注释。

如果要将节点新增为某一个节点的最后一个子元素，则可以使用Node.appendChild()方法，而如果要将节点插入至某一元素所在的位置，则需要使用Node.insertBefore()方法。

var elem = document.createElement('div');var text = document.createTextNode('This is a new div element');elem.appendChild(text);document.body.appendChild(elem);var comment = document.createComment('This is comment');document.body.insertBefore(comment,elem);//在elem之前插入该注释节点

Node.replaceChild()方法替换节点

var newNode = document.createElement('div')；var oldNode = document.getElementById('foo');var parentNode = oldNode.parentNode;parentNode.replaceChild(newNode,oldNode);

Node.removeChild()方法删除节点

var elem = document.getElementById('foo');elem.parentNode.removeChild(elem);

innerHTML属性和textContent属性

innerHTML属性并不是一种在DOM标准中被定义的功能，而是一种在HTML5中被定义的属性。但因为IE在很早之前就实现了这一功能，所有大部分的浏览器都能使用innerHTML。

var elem = document.getElementById('foo');elem.innerHTML = '<div>This is a new div element.</div>';

innerHTML属性可以以HTML字符串的形式被引用，而textConent属性则可以取得包含子元素在内的纯文本部分。因此，如果设定textContent属性，就能够将子元素全部删除，并将其替换为一个文本节点。

IE有一个属性innerText可以实现相同功能。textContent属性是一种在DOM Level 3 Core中被定义的属性。

var elem = document.getElementById('foo');elem.textConent = '<div>This is a new div element.</div>';//不会创建div元素，在浏览器中将会直接显示该字符串

DOM操作的性能

使用DocumentFragment,先修改DocumentFragment，最后再对实际的document对象进行操作，避免不必要的画面重绘。

var fragment = document.createDocumentFragment();

0 0