HTML document is described as a standard W3C DOM, so users can use the recommended w3c DOM interfaces to handle HTML document.
The key to using W3C DOM processing HTML document is to understand nodes, because each content HTML DOM document are described as nodes , different nodes use different types of content.
JavaScript DOM API node types
In the DOM file, each node belonging to one type may be used Node.nodeType acquired node type property, DOM specification defines a total of 12 types of nodes, constant node interface definition may be used to represent, may be used to represent numbers .
(IE browser until IE9 only support expressed in constant, so it is best to use a digital representation).
| Node Type Constants | Description Value + |
|---|---|
| Node.ELEMENT_NODE | 1 element node |
| Node.ATTRIBUTE_NODE | 2 attribute node |
| Node.TEXT_NODE | 3 text node |
| Node.CDATA_SECTION_NODE | 4CDATA node |
| Node.ENTITY_REFERENCE_NODE | 5 entity reference node |
| Node.ENTITY_NODE | 6 entity node |
| Node.PROCESSING_INSTRUCTION_NODE | Processing instruction node 7 |
| Node.COMMENT_NODE | 8 comment node |
| Node.DOCUMENT_NODE | 9 document node |
| Node.DOCUMENT_TYPE_NODE | 10 document type node |
| Node.DOCUMENT_FRAGMENT_NODE | 11 document fragment node |
| Node.NOTATION_NODE | 12 symbol node |
Hierarchy node
(1) the parent node (Parent Node)
Each element has a parent node, except the root element
(2) the child nodes (Nodes Child)
(3) sibling (Sibling Nodes)
(4) ancestor node ( nodes Ancestor)
(5) descendant nodes (descendant nodes)
Node and its corresponding interface
| Interface name | Functional Description |
|---|---|
| Attr | It represents an attribute node |
| CDATASection | It represents a CDATA node |
| Comment | It indicates a comment node |
| Document | It represents the entire HTML document or HTML document |
| DocumentFragment | Node represents a document fragment |
| DocumentType | Indicates that the document type node |
| Element | It represents an element node |
| Entity | Represent an entity node |
| EntityRference | Represent an entity reference node |
| Notation | It represents a DTD notation node |
| ProcessingInstruction | It represents a processing instruction node |
| Text | It represents a text node |
| A collection of types of interfaces | Functional Description |
|---|---|
| NamedNodeMap | Access node can be expressed by the name of a collection |
| NameList | Provides the abstraction of (can be null) of the ordered set of parallel name and namespace values, without defining or constraining how the set |
| NodeList | It provides the abstraction of an ordered collection of nodes, without defining or constraining how this object. |
Not need to remember so many interfaces, as long as the general impression you can, but there are three basic objects called DOM objects have to keep in mind:
| Objects | Explanation |
|---|---|
| Node | Each node of the document has its own Node object |
| NodeList | This is the list of Node objects |
| NamedNodeMap | Allow access by name (not by index) of all objects |
Basic processing node
Once the DOM is parsed HTML document, then the HTML document in memory on the performance of the various nodes, using a standard interface definition can be dealt with.
The Node DOM entire base interface that represents a single node of the document tree .Node It defines a number of methods and properties for objects in all sub-interfaces are implemented using.
| Method name | Functional Description |
|---|---|
| appendChild() | Adds a child node at the end of the child nodes |
| 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