粗略的过一遍DOM API
DOM类型
| Node | 表示所有类型值的统一接口， IE不支持 |
|---|---|
| Document | 表示文档类型 |
| Element | 表示元素节点类型 |
| Text | 表示文本节点类型 |
| Comment | 表示文档中的注释类型 |
| CDATASection | 表示 CDATA区域类型 |
| DocumentType | 表示文档声明类型 |
| DocumentFragment | 表示文档片段类型 |
| Attr | 表示属性节点类型 |
Node类型
Node接口是 DOM1级就定义了， Node接口定义了 12个数值常量以表示每个节点的类型值。
| ELEMENT_NODE | 元素 | 1 |
|---|---|---|
| ATTRIBUTE_NODE | 属性 | 2 |
| TEXT_NODE | 文本 | 3 |
| CDATA_SECTION_NODE | CDATA | 4 |
| ENTITY_REFERENCE_NODE | 实体参考 | 5 |
| ENTITY_NODE | 实体 | 6 |
| PROCESSING_INSTRUCETION_NODE | 处理指令 | 7 |
| COMMENT_NODE | 注释 | 8 |
| DOCUMENT_NODE | 文档根 | 9 |
| DOCUMENT_TYPE_NODE | doctype | 10 |
| DOCUMENT_FRAGMENT_NODE | 文档片段 | 11 |
| NOTATION_NODE | 符号 | 12 |
ps:Node接口在非标准的浏览器（ie8之下）下不能正常的运行。
为了兼容性,索性把这十二个类型值都枚举出来
if (typeof Node == 'undefined') {
window.Node = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCETION_NODE: 7,
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11,
NOTATION_NODE: 12
};
}
Document类型
文档根节点
window.onload = function () {
console.log(document); //#document
console.log(document.nodeType); //9
console.log(document.nodeValue); //null
console.log(document.nodeName); //#document
console.log(document.childNodes[0]); //<!DOCTYPE html> ,IE理解为注释
};
Document属性
| document.title; | 获取和设置<title>标签的值 |
|---|---|
| document.URL; | 获取 URL路径 |
| document.domain; | 获取域名，服务器端 |
| document.referrer; | 获取上一个 URL，服务器 |
Document对象集合
| document.anchors; | 获取文档中带name属性的<a>元素集合 |
|---|---|
| document.links; | 获取文档中带 href属性的<a>元素集合 |
| document.applets; | 获取文档中<applet>元素集合，已不用 |
| document.forms; | 获取文档中<form>元素集合 |
| document.images; | 获取文档中<img>元素集合 |
Element类型
| HTML | HTMLHtmlElement |
|---|---|
| DIV | HTMLDivElement |
| BODY | HTMLBodyElement |
ps:以此类推,直接访问即可获得更多的元素对应类型
Text类型
text类型用于表现文本节点类型,不包含HTML,或包含转义后的HTML.文本节点的nodeType为3.
text操作DOM的方法
var box = document.getElementById('box');
box.firstChild.deleteData(0,2); //删除从 0位置的 2个字符
box.firstChild.insertData(0,'Hello.'); //从 0位置添加指定字符
box.firstChild.replaceData(0,2,'Miss'); //从 0位置替换掉 2个指定字符
box.firstChild.substringData(0,2); //从 0位置获取 2个字符，直接输出
alert(box.firstChild.nodeValue);
text节点合并
box.normalize(); //合并成一个节点
text节点分离
box.firstChild.splitText(3); //分离一个节
Comment类型
Comment类型表示文档中的注释,nodeType是 8 ,nodeName是#comment,nodeValue是注释的内容。
var box = document.getElementById('box');
alert(box.firstChild); //Comment
ps:在 IE中,注释节点可以使用,当作元素来访问.
var comment = document.getElementsByTagName('!');
alert(comment.length);
Attr类型
表示文档元素中的属性
| attr.isId | 如果属性是 id 类型，则返回 true，否则返回 false。 |
|---|---|
| attr.name | 返回属性的名称。 |
| attr.value | 设置或返回属性的值。 |
| attr.specified | 如果已指定属性，则返回 true，否则返回 false。 |
| nodemap.getNamedItem() | 从 NamedNodeMap 返回指定的属性节点。 |
| nodemap.item() | 返回 NamedNodeMap 中位于指定下标的节点。 |
| nodemap.length | 返回 NamedNodeMap 中的节点数。 |
| nodemap.removeNamedItem() | 移除指定的属性节点。 |
| nodemap.setNamedItem() | 设置指定的属性节点（通过名称）。 |
PS:在DOM Core 1、2和3中，Attr继承自Node。在DOM4有所改变。为了规范化Attr的实现，它将不再继承自Node。
今后实践中再详细描述DOM API的的各种特点~
欢迎勘误
-END-
网友评论