Chapter 6 DOM 基础
书的这章主要是围绕document这个对象的使用来讲的。Document对象既是BOM的一部分， 也是Html DOM的HTMLDocument对象的一种表现形式，它也是XML DOM Document对象。JavaScript中的大部分处理DOM的过程都是用到了document对象。
Document对象实现Node接口的主要的特性和方法：
|
特性/方法
|
类型/返回类型
|
说明
|
|
nodeName
|
String
|
节点的名字
|
|
nodeType
|
Number
|
节点的类型常量
|
|
nodeValue
|
String
|
节点的值
|
|
ownerDocument
|
Document
|
指向这个节点所属的文档
|
|
firstChild
|
Node
|
指向childNodes列表中的第一个节点
|
|
lastChild
|
Node
|
指向childNodes列表中的最后一个节点
|
|
childNodes
|
NodeList
|
所有子节点的列表
|
|
previousSibling
|
Node
|
指向前一个兄弟节点
|
|
nextSibling
|
Node
|
指向后一个兄弟节点
|
|
attributes
|
NamedNodeMap
|
包含了代表一个元素Attr对象， 仅用于Element
|
|
appendChild (node)
|
Node
|
将node添加到childNodes尾
|
|
remmoveChild (node)
|
Node
|
从childNodes中除去
|
|
replaceChild（newNode，oldNode）
|
Node
|
将childNodes中的oldNode替换成newNode
|
|
insertBefore（newNode，refNode）
|
Node
|
在childNodes中的refNode前插入newNode
|
1：检测节点类型
Node接口定义了对应12种不同节点类型的常量
Node.ELEMENT_NODE 1
Node.ATTRIBUTE_NODE 2
Node.TEXT_NODE 3
Node.CDATA_SECTION_NODE 4
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
注意：在IE中不支持这些常量， 但是可以自己定义：
if(typeof Node == "undefined"){
var Node = {
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12
}
}
alert(document.nodeType == Node.DOCUMENT_NODE);//output
true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE);
2：处理特性
getNamedItem（name）:
removeNamedItem (name):
setNamedItem (node):
item(pos):
这些方法返回的都是Attr节点
DOM又定义了3个元素访问方法来帮助访问特性
getAttribute（name）：
setAttribute（name，newValue）：
removeAttribute（name）：
getAttribute(name) 等同
attributes.getNamedItem(name).nodeValue;
setAttribute(name,
newValue) 等同 attributes.getNamedItem(name).nodevalue = newValue;
removeAttribute(name) 等同
attributes.removeNamedItem(name);
3：访问指定节点
getElementsByTagName
获取某个页面第一个段落的所有图象：
var oPs = document.getElementsByTagName("p");
var oImgsInP =
oPs[0].getelmentsByTagName("img");
可以使用一个星号的方法来获取document中的所有元素
var oAllElements = document.getElementsByTagName("*");
但是据说在IE6.0并不是返回所有的元素， 所以无论怎么样还是用document.all最好了。
getElementsByName
示例：
html片段：
……
<input type="radio" name="radColor" value="red"/>
Red
<input
type="radio" name="radColor" value="green"/>
Green
<input
type="radio" name="radColor" value="blue"/>
Blue
……
var oRadios = document.getElementsByName("radColor");
alert(oRadios[0].getAttribute("value")); //output “red”
这个方法在IE中只能适用于</input>,<img/>
另外会返回ID等于给定名称的元素
getElmentById
id特性是唯一的， 因此这种方法是提取单个指定元素的最好的方法
4：创建和操作节点
createComment(text)
createAttribute(name)
createElement(tagName)
createTextNode(text)
appendChild(node)
removeChild(node)
replaceChild(newNode, oldNode)
insertBefore（newNode，refNode）
createDocumentFragment 向document添加大量的数据
var oFragment = document.createAttribute();
var oP = document.createElement("p");
var oText = document.createTextNode("Hello");
oP.appendChild(oText);
oFragment.append(oP);
document.body.appendChild(oFragment);
5：Html DOM
Html DOM 是对核心 DOM的扩展，是专门针对html，让一些DOM的操作更加的方便。
http://www.w3schools.com/htmldom/dom_reference.asp
6：遍历
NodeIterator
TreeWalker
可惜IE不支持， 先不写了…
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
我写的遍历html页面， 构造出一棵XML树 的示例代码
File： xmlTree.js
//遍历整个html文档， 构造出xml树
//generate an XML tree for the whole html document.
var sTree = new Array;
var index = 0;
var nodeTypes = ["ELEMENT_NODE",
"ATTRIBUTE_NODE",
"TEXT_NODE",
"CDATA_SECTION_NODE",
"ENTITY_REFERENCE_NODE",
"ENTITY_NODE",
"PROCESSING_INSTRUCTION_NODE",
"COMMENT_NODE",
"DOCUMENT_NODE",
"DOCUMENT_TYPE_NODE",
"DOCUMENT_FRAGMENT_NODE",
"NOTATION_NODE"];
var sTag = "\t";
if(typeof Node == "undefined"){
var Node = {
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12
}
}
//打印出缩进符号， 为了显示出层次关系
function showTag(offset){
var i =0;
for(; i < offset; i++)
sTree[index++] = sTag;
}
//根据节点的不同类型，打印出节点内容， offset为缩进值
function displayNode(node,offset){
if(node == null || node == "undefined")
return;
switch(node.nodeType){//根据节点类型， 做不同处理
case Node.ELEMENT_NODE:
showTag(offset);
sTree[index++] = nodeTypes[node.nodeType-1]+":"+node.nodeName+node.childNodes.length+"\n";
//如果该节点有属性，则显示出所有的属性值
if(node.attributes.length>0){
var ii = 0;
for(;ii<node.attributes.length;ii++){
showTag(offset+1);
sTree[index++] = nodeTypes[node.nodeType-1]+": "+
node.attributes.item(ii).nodeName+": "+
node.attributes.item(ii).nodeValue+"\n";
}
}
break;
case Node.TEXT_NODE:
if(node.data !=null && node.data.length>=1){//除去空文本的值
showTag(offset);
sTree[index++] = nodeTypes[node.nodeType-1]+":"+node.data+"\n";
}
break;
default://这边省去了很多其它节点类型的处理，就直接显示了下nodeName
showTag(offset);
sTree[index++] = nodeTypes[node.nodeType-1]+":"+node.nodeName+"\n";
}
}
//递归构造出XML树
function createTree(current,offset){
displayNode(current,offset);
var childs = current.childNodes;
if(childs != null && childs.length > 0){
var ii = 0; //定义ii很重要，如果for(ii=0;ii<childs.length;ii++)的话，ii会被当成全局变量！！！
for(; ii < childs.length; ii++){
createTree(childs[ii],offset+1);
}
}
}
function testCreateTree(){
/**新打开一个窗口，执行
var oNewWindow = window.open("about:blank","newwindow");
oNewWindow.document.open();
oNewWindow.document.write("<html><head><title></title></head>" +
"<body>Hello" +
"<p
style=\"color:red\" id=\"p1\">Hello,p</p>" +
"</body></html>");
oNewWindow.document.close();
var oHtml = oNewWindow.document.documentElement;
*/
//在原窗口执行
var oHtml = document.documentElement;
if(oHtml == null)
alert("No Html docuemtn!!!");
createTree(oHtml,0);
alert(sTree.join('').toString());
}
testCreateTree();