DOM是HTML和XML文档提供的一系列API的集合。
DOM将HTML和XML文档描绘成一个由多层次节点构成的树结构，文档中所有的元素都是一个节点。
树结构的根节点（又称文档元素）有且只有一个。
HTML文档的根节点始终是<html>，XML文档则可以是任何元素。
一、使用nodeType检测节点类型
节点（node）一共有12种类型，每种类型用一个1~12之中的数字表示。
|
数字 |
表达式 |
说明 |
|
1 |
Node.ELEMENT_NODE |
元素类型 |
|
2 |
Node.ATTRIBUTE_NODE |
属性类型 |
|
3 |
Node.TEXT_NODE |
文本类型 |
|
4 |
Node.CDATA_SECTION_NODE |
XML文档的CDATA区域 |
|
5 |
Node.ENTITY_REFERENCE_NODE |
|
|
6 |
Node.ENTITY_NODE |
|
|
7 |
Node.PROCESSING_INSTRUCTION_NODE |
|
|
8 |
Node.COMMENT_NODE |
注释类型 |
|
9 |
Node.DOCUMENT_NODE |
文档类型 |
|
10 |
Node.DUCUMENT_TYPE_NODE |
文档属性类型 |
|
11 |
Node.DUCUMENT_FRAGMENT_NODE |
文档片段类型 |
|
12 |
Node.NOTATION_NODE |
操作节点前通常需要检测节点类型，原因是我们获取的子节点集合常常混合多类节点。
例如：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul有七个子节点，包括三个<li>和四个空白文本节点（但在IE看来只有三个<li>）。
二、节点通用的属性及方法
|
节点信息 |
标签名 |
nodeName |
或者tagName |
|
属性值或文本 |
nodeValue |
||
|
节点关系 |
父子关系 |
.childNodes |
由直接子元素构成的动态的数组对象 |
|
.firstChild |
相当于.childNodes[0]或.childNodes.item(0) |
||
|
.lastChild |
相当于.childNodes[node.childNodes.length-1] |
||
|
.parentNode |
父节点只有一个 |
||
|
同级关系 |
.nextSibling |
||
|
.previousSibling |
|||
|
根元素 |
.ownerDocument |
指向根节点（文档元素） |
|
|
检测子节点 |
.hasChildNodes() |
有，则返回true；无，则返回false |
|
|
操作节点 |
添加子节点 |
.appendChild() |
参数是待插入的子节点 如果传入已存在的子节点，则该子节点的位置会被调到子节点序列的末尾 |
|
.insertBefore() |
两个参数，一是待插入的子节点，二是参照子节点。如果参照子节点是null，则插入到末尾 |
||
|
.replaceChild() |
两个参数：待添加子节点和被替换子节点 |
||
|
删除子节点 |
.removeChild() |
参数是待删除子节点 |
|
|
复制节点 |
.cloneNode() |
参数为布尔值 true表示深复制，复制节点本身及其全部子节点；false表示浅复制，只复制节点本身 复制后的节点必须插入文档中 |
|
|
.normalize() |
合并文本类型的子节点 |
三、文档的属性和方法（省略了一些不常用的、浏览器支持差异大的属性)
文档指整个html文档。它是window对象的一个属性。
|
document |
.documentElement |
得到html元素，和.childNodes[0]一样 |
|
.body |
得到body元素 |
|
|
.title |
返回或设置title内容 |
|
|
.URL |
返回完整的url地址 |
|
|
.domain |
返回域名 |
|
|
.anchors |
返回所有带name特性的<a>元素 |
|
|
.links |
返回所有带href热性的<a>元素 |
|
|
.forms |
返回所有<form>元素 |
|
|
.images |
返回所有<img>元素 |
|
|
.getElementById() |
返回指定元素 |
|
|
.getElementByTagName() |
返回指定元素 |
|
|
.getElementByName() |
返回所有带name特性的元素 |
|
|
.write() |
通常用于在文档加载过程中 |
|
|
.createElement() |
参数为待创建的标签名 |
|
|
.createTextNode() |
参数为文本节点字符串 |
四、元素的属性和方法
|
可直接访问与修改的属性，是元素的标准属性，自定义属性不可直接访问（IE除外） |
.id |
|
|
.className |
||
|
…… |
||
|
.style |
返回一个对象 |
|
|
.onclick（事件属性） |
返回一个函数 |
|
|
属性的集合 |
attributes |
返回包含所有特性的动态的数组 |
|
操作属性的方法 |
.getAttribute() |
参数为特性的名称（字符串） |
|
.setAttribute() |
参数有两个：一、特性名；二、值 |
|
|
.removeAttribute() |
参数为特性的名称 |
五、文本的属性和方法
|
访问、设置与修改文本 |
.nodeValue .data |
注：空白也是文本 |
|
文本的字符数 |
.length |
|
|
操作文本的方法 |
.appendData(text) |
|
|
.deleteData(offset,count) |
从offset处开始删除count个字符 |
|
|
.insertData(offset,text) |
在指定offset处插入指定文本 |
|
|
.replaceData(offset,count,text) |
替换文本 |
|
|
.splitText(offset) |
分割文本 |
|
|
.substringData(offset,count) |
提取某段文本 |
六、DOM扩展
2008年以前，所有的DOM扩展都是浏览器专有的，后来W3C将其中一部分已然成为标准的扩展写入了规范中。主要有：选择符API、元素遍历和HTML5 DOM扩展。其余专有扩展此文按下不表。
|
选择符API |
.querySelector() |
参数为CSS选择符，返回匹配模式的第一个元素 |
|
.querySelectorAll() |
参数同上，返回一个元素集合 |
|
|
.matchesSelector() |
参数同上，用于检测。返回布尔值 |
|
|
元素遍历 不包括文本节点 |
.childElementCount |
返回子元素个数 |
|
.firstElementChild |
||
|
.lastElementChild |
||
|
.previousElementSbling |
||
|
.nextElementSbling |
||
|
HTML5 |
.getElementsByClassName() |
document的方法 |
|
.classList |
.add(value) |
|
|
.contains(value) |
||
|
.remove(value) |
||
|
toggle(value) |
||
|
.readyState |
document的属性。返回两个值loading、complete |
|
|
.charset |
document的属性。用于获取与修改字符集 |
|
|
.innerHTML |
返回或设置子节点，（是所有子节点及后代） |
|
|
.outerHTML |
包含本身 |
|
|
.scrollIntoView() |
滚动页面，让调用该方法的元素出现的视区 |
时间： 2025-01-31 06:49:44