HTML文档被描述为标准的W3C DOM,所以用户可以使用w3c推荐的DOM接口来处理HTML文档.
使用W3C DOM处理HTML文档的关键在于理解节点,因为DOM将HTML文档中的每个内容都描述为节点,不同的内容使用不同类型的节点.
JavaScript DOM API 的节点类型
在DOM文件中,每一个节点都属于一种类型,可以使用Node.nodeType属性获取节点类型,DOM规范共定义了12中节点类型,可以使用node接口定义的常量来表示,也可以使用数字来表示.
(IE浏览器直到IE9才支持用常量表示,所以最好使用数字表示).
| 节点类型常量 | 值+描述 |
|---|---|
| Node.ELEMENT_NODE | 1元素节点 |
| Node.ATTRIBUTE_NODE | 2属性节点 |
| Node.TEXT_NODE | 3文本节点 |
| Node.CDATA_SECTION_NODE | 4CDATA节点 |
| Node.ENTITY_REFERENCE_NODE | 5实体引用节点 |
| Node.ENTITY_NODE | 6实体节点 |
| Node.PROCESSING_INSTRUCTION_NODE | 7处理指令节点 |
| Node.COMMENT_NODE | 8注释节点 |
| Node.DOCUMENT_NODE | 9文档节点 |
| Node.DOCUMENT_TYPE_NODE | 10文档类型节点 |
| Node.DOCUMENT_FRAGMENT_NODE | 11文档片段节点 |
| Node.NOTATION_NODE | 12符号节点 |
节点的层次关系
(1)父节点(Parent Node)
每个元素都有一个父节点,除非是根元素
(2)子节点(Child Nodes)
(3)同胞节点(Sibling Nodes)
(4)祖辈节点(Ancestor Nodes)
(5)后代节点(Descendant Nodes)
节点及其对应的接口
| 接口名 | 功能描述 |
|---|---|
| Attr | 表示一个属性节点 |
| CDATASection | 表示一个CDATA节点 |
| Comment | 表示注释节点 |
| Document | 表示整个HTML文档或HTML文档 |
| DocumentFragment | 表示文档片段节点 |
| DocumentType | 表示文档类型节点 |
| Element | 表示元素节点 |
| Entity | 表示实体节点 |
| EntityRference | 表示实体引用节点 |
| Notation | 表示DTD表示法节点 |
| ProcessingInstruction | 表示处理指令节点 |
| Text | 表示文本节点 |
| 集合类型接口 | 功能描述 |
|---|---|
| NamedNodeMap | 表示可以通过名称访问节点的集合 |
| NameList | 提供对并行的名称和命名空间值对(可以为null)的有序集合的抽象,无需定义或约束如何实现该集合 |
| NodeList | 提供对节点的有序集合的抽象,没有定义或约束如何实现该对象. |
不需要记住那么多的接口,只要有大概的印象即可,但有三个对象称为基本的DOM对象必须要记住:
| 对象 | 说明 |
|---|---|
| Node | 文档的每个节点,都有自己的Node对象 |
| NodeList | 这是Node对象列表 |
| NamedNodeMap | 允许按名称(不是按索引)访问所有对象 |
基本的节点处理
一旦解析了HTML文档为DOM,那么HTML文档在内存中就表现为各种节点,使用标准的接口定义就可以进行处理.
Node是整个DOM的基接口,它表示该文档树中的单个节点.Node定义了很多方法和属性供所有子接口所实现的对象使用.
| 方法名 | 功能描述 |
|---|---|
| appendChild() | 在子节点末尾添加一个子节点 |
| cloneNode() | 克隆一个节点 |
| hasAttributes() | 检查该节点是否有属性 |
| hasChildNodes() | 检查该节点是否有子节点 |
| insertBefort() | 在引用的节点之前添加一个新节点 |
| inSupported() | 检查该节点是否被版本支持 |
| normalize() | 规格化该节点 |
| removeChild() | 在子节点列表中删除一个子节点 |
| replaceChild() | 替换一个子节点 |
| 属性 | 描述 |
|---|---|
| nodeName | 返回节点名 |
| nodeValue | 返回和设置节点值 |
| nodeType | 返回节点类型 |
| parentNode | 父节点 |
| childNodes | 返回所有子节点 |
| firstChild | 第一个子节点 |
| lastChild | 最后一个子节点 |
| perviousSibling | 紧挨着当前子节点的前一个子节点 |
| nextSibling | 紧挨着当前子节点的后一个子节点 |
| attributes | 返回当前节点的所有属性 |
| ownerDocument | 返回当前节点对应的文档对象 |
| namespaceURL | 返回该节点的命名空间URL |
| prefix | 返回当前节点的命名空间前缀 |
| localName | 返回当前节点的限定名的前缀部分 |
HTML文档解析后所得到的文档就是Document节点,可以使用window.document获取,document表示的是整个HTML文档,一般应该用该接口的documentElement属性获取该文档的根节点,也就是HTML元素的节点.
var root=document.documentElement;
根节点是一个元素节点,可以使用很多种方法获取根节点下的子节点,例如下面代码使用firstChild属性获取第一个子节点:
var node=root.firstChild;
在获取子节点之前,一般应该检查是否有子节点(例如,text类型的节点就没有子节点).
if(root.hasNodes()){
//代码片段
}
可以配合使用firstChild和nextSubling遍历所有子节点.
if(root.hasNodes()){
var node=root.firstChild();
while(node!=null){
alert(node.innerHTML;
node=node.nextSubling;
}
}
另外,也可以使用childNodes属性一次获取该节点的所有子节点,然后使用循环语句遍历.
if(root.hasNodes()){
var nodelist=root.childNodes;
var node;
for(var i=0;i<nodelist.length:i++){
node=nodelist[i];
alert(node.innerHTML);
}
}
使用getElementByTagName()方法可以返回具有给定元素名称的所有后代元素组成的NodeList,然后可以使用循环遍历这些元素,例如下面代码:
if(root.hasNodes()){
var nodelist=root.getElementByTagName("div");
var nodeLen=node.length;
for(var i=0;i<nodeLen;i++){
node=nodelist[i];
alert(node.innerHTML);
}
}
节点名,节点值和属性
使用Node定义的nodeName,nodeValue和attributes属性,可以分别获取节点的节点名,节点值,和属性.
使用Node定义的 nodeName;nodeValue,attributes属性可以分别获取节点的节点名,节点值,和属性(只有Element节点可获取NamedNodeMap).
删除HTML文档中的元素节点,属性和内容
- 从DOM中删除子元素节点.
若要删除节点,可以使用removeChild()方法,删除节点时,该方法该方法删除属于所删除节点的子数,语法格式如下:
oldChild=node.removeChild(sChildName);
- 删除DOM中元素节点的属性.
(1)使用Element.removeAttribute()方法可以按名称删除当前节点的指定属性,语法格式如下:
element.removeAttribute(sName);
(2)使用removeAttributeNode()方法可以删除元素节点中的属性节点,这必须首先获得对属性节 点的引用,然后才能删除它,如下:
var aNode=document.getElementById("oDiv");
var attr_id=aNode.getAttributeNode("id");
aNode.removerAttributeNode(attr_id);
- 删除DOM元素中的文本内容.
同样的原理,也可以删除元素的内容,这些内容其实是文本节点,首先获取对文本节点的引用,然后使用removeChild()删除文本节点即可.
替换节点
使用replaceChild()方法可以替换原有节点,以实现改变元素内容的目的.如下:
var aNode=document.getElementById("oDiv");
var oTextNode=document.createTestNode("这是新内容");
aNode.replaceChild(oTextNode,aNode.first);
主要接口的使用
除了Node,其他介个与HTML文档中节点类型对应的接口也各自定义了自己独特的方法,它们几乎都继承自Node(除DOMException,DOMImplementation,NamedNodeMap,NodeList).
Document接口
Document接口继承自Node,表示整个HTML文档,从概念上讲,Document是文档树的根,并提供对文档数据的基本访问.
使用该接口定义的方法,可以使用documentElement属性获取文档的根节点,也可以使用doctype属性获取文档的类型声明,还可以创建各种类型的节点,然后将这些节点添加到文档树,所创建的属性一般都有ownerDocument属性(该属性从Node接口继承),该属性将节点对象与创建这些对象的Document关联起来.
- 创建新节点
doucument对象具有一些用于创建不同节点类型所需的createXXX()方法,使用这些方法便可以轻松创建该节点,下面列出的方法需要填充名称和创建其他参数以创建相应的节点,其语法格式如下:
oElementNode=document.createElement(sTagName);
oTextNode=document.createTextNode(sTextName);
oAttribute=document.createAttribute(sName);
oComment=document.createCommnet(sData);
oNewDoc=document.createDocumnetGragment();
- 成员简介
Documnet定义的属性成员和方法成员分别如下表所示:
| 属性名 | 描述 |
|---|---|
| doctype | 文档类型声明 |
| documentElement | 获取文档根元素 |
| implementation | 取得DOMImplementation对象用于处理文档 |
| 方法名 | 描述 |
|---|---|
| createAttribute() | 创建属性节点 |
| createAttributeNS() | 创建一个属性节点,并且该属性节点和一个命名空间相关联 |
| createCDATASection() | 创建cdata节点 |
| createComment() | 创建注释节点 |
| createDocumentFragement() | 创建文档片段 |
| createElement() | 创建元素节点 |
| createElementNS() | 创建元素节点,并且该元素节点和一个命名空间相关联 |
| createEntityReference() | 创建实体引用节点 |
| createProcessingInstruction() | 创建PI节点 |
| createTextNode() | 创建文本节点 |
| getElementById() | 根据ID属性搜索一个元素 |
| getElementsByTagName() | 根据标签名搜索所有元素 |
| getElementsByTagNameNS() | 根据特定命名空间内的标签搜索所有元素 |
| importNode() | 导入一个节点到当前元素 |
Attr接口
Attr接口表示Element对象中的属性节点,一个Attr对象就是一个属性节点.
可以使用Element接口的getAttributeNode()/getAttributeNodeNS()方法获取一个指定的属性节点,而后使用Attr接口定义的方法读取属性.
注意:由于Attr节点实际不是Element的子节点,因此DOM不会将它们看作文档树的一部分,因此,当对Attr对象调用Node接口继承属性parentNode/perviousSibling/nextSilbing时,会返回null.
其余节点就不一一结束了,可以去w3cschool看详细介绍
W3C