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();