屬性:
1Attributes 存儲節點的屬性列表(只讀)
2childNodes 存儲節點的子節點列表(只讀)
3dataType 返回此節點的數據類型
4Definition 以DTD或XML模式給出的節點的定義(只讀)
5Doctype 指定文檔類型節點(只讀)
6documentElement 返回文檔的根元素(可讀寫)
7firstChild 返回當前節點的第一個子節點(只讀)
8Implementation 返回XMLDOMImplementation對象
9lastChild 返回當前節點最后一個子節點(只讀)
10nextSibling 返回當前節點的下一個兄弟節點(只讀)
11nodeName 返回節點的名字(只讀)
12nodeType 返回節點的類型(只讀)
13nodeTypedValue 存儲節點值(可讀寫)
14nodeValue 返回節點的文本(可讀寫)
15ownerDocument 返回包含此節點的根文檔(只讀)
16parentNode 返回父節點(只讀)
17Parsed 返回此節點及其子節點是否已經被解析(只讀)
18Prefix 返回名稱空間前綴(只讀)
19preserveWhiteSpace 指定是否保留空白(可讀寫)
20previousSibling 返回此節點的前一個兄弟節點(只讀)
21Text 返回此節點及其后代的文本內容(可讀寫)
22url 返回最近載入的XML文檔的URL(只讀)
23Xml 返回節點及其后代的XML表示(只讀)
方法:
1appendChild 為當前節點添加一個新的子節點,放在最后的子節點后
2cloneNode 返回當前節點的拷貝
3createAttribute 創建新的屬性
4createCDATASection 創建包括給定數據的CDATA段
5createComment 創建一個注釋節點
6createDocumentFragment 創建DocumentFragment對象
7createElement 創建一個元素節點
8createEntityReference 創建EntityReference對象
9createNode 創建給定類型,名字和命名空間的節點
10createPorcessingInstruction 創建操作指令節點
11createTextNode 創建包括給定數據的文本節點
12getElementsByTagName 返回指定名字的元素集合
13hasChildNodes 返回當前節點是否有子節點
14insertBefore 在指定節點前插入子節點
15Load 導入指定位置的XML文檔
16loadXML 導入指定字符串的XML文檔
17removeChild 從子結點列表中刪除指定的子節點
18replaceChild 從子節點列表中替換指定的子節點
19Save 把XML文件存到指定節點
20selectNodes 對節點進行指定的匹配,並返回匹配節點列表
21selectSingleNode 對節點進行指定的匹配,並返回第一個匹配節點
22transformNode 使用指定的樣式表對節點及其后代進行轉換
23transformNodeToObject 使用指定的樣式表將節點及其后代轉換為對象
方法名：
getElementsByName() – 獲取name
getElementsByTagName() – 獲取元素
getAttribute – 獲取元素屬性
setAttribute – 設置元素屬性
childNodes – 訪問子節點
parentNode – 訪問父節點
creatElement – 創建元素節點
creatTextNode – 創建文本節點
insertBefore – 插入節點
removeChild – 刪除節點
offsetHeight – 網頁尺寸 (ffsetHeight：內容高度+padding高度+邊框寬度)
scrollHeight – 網頁尺寸（不包含導航條，實際內容+padding,scrollHeight = topPadding + bottomPadding + 內容margix box的高度。）
clientHeight – 網頁尺寸（不包含導航條，包含padding,計算方式為clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
offsetHeight）
*************************************************************************************************************************
DOM(文檔對象模型)
DOM(文檔對象模型)概念的推出,這個API使HTML如虎添翼,但是有些學DHTML的朋友還是有些困撓,只是因為目前的手冊的書寫不太科學,是按字母
來分的,不便查閱.其實DOM中最關鍵是要掌握節點與節點之間的關系(between node andnode),想學習DHTML中的DOM千萬不要從頭到尾地看遍所
有的屬性和方法,你有三國時張松的"過目不忘"的本領嗎?沒有吧,那就聽我分析一下：
其實DOM教給我們的就是一個層次結構，你可以理解為一個樹形結構，就像我們的目錄一樣，一個根目錄，根目錄下有子目錄，子目錄下還有子
目錄……
根節點：
DOM把層次中的每一個對象都稱之為節點（NODE），以HTML超文本標記語言為例：整個文檔的一個根就是<html>,在DOM中可以使用
document.documentElement來訪問它，它就是整個節點樹的根節點（ROOT）
子節點：
一般意義上的節點，根節點以下最大子節點就是主文檔區<body>了，要訪問到body標簽，在腳本中應該寫：
document.body
body區以內所有的文本及HTML標簽都是文檔的節點，分別稱為文本節點、元素節點（或者叫標簽節點），大家知道HTML說到底只是文本而矣，
不論怎么樣的網頁必然由這兩個節點組成，也只能由這兩個節點組成
節點之間的關系：
節點之間的關系也是DOM中最重要的一個關節，如何正確地引用到節點對象，一定要清楚節點樹各個節點的相互描述方式，在DHTML里，
Javascript腳本就用了各個節點對象的一整套方法和屬性去描述另外的節點對象。
節點的絕對引用：
返回文檔的根節點
document.documentElement
返回當前文檔中被擊活的標簽節點
document.activeElement
返回鼠標移出的源節點
event.fromElement
返回鼠標移入的源節點
event.toElement
返回激活事件的源節點
event.srcElement
節點的相對引用：(設當前對節點為node)
返回父節點
node.parentNode
node.parentElement
返回子節點集合（包含文本節點及標簽節點）
node.childNodes
返回子標簽節點集合
node.children
返回子文本節點集合
node.textNodes
返回第一個子節點
node.firstChild
返回最后一個子節點
node.lastChild
返回同屬下一個節點
node.nextSibling
返回同屬上一個節點
node.previousSibling
節點的各種操作：(設當前的節點為node)
新增標簽節點句柄：
document.createElement(sNode) //參數為要新添的節點標簽名，例：newnode=document.createElement("div");
1、添加節點：
追加子節點：
node.appendChild(oNode) //oNode為生新增的節點句柄,例：node.appendChild(newnode)
應用標簽節點
node.applyElment(oNode,sWhere)//oNode為生新增的節點句柄,sWhere有兩個值：outside / inside，加在當前節點外面還是里面
插入節點
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改節點：
刪除節點
node.remove()
node.removeChild()
node.removeNode()
替換節點
node.replaceChild()
node.replaceNode()
node.swapNode()
2、復制節點：
返回復制復制節點引用
node.cloneNode(bAll)//bAll為布爾值，true / false 是否克隆該節點所有子節點
3、節點信息
是否包含某節點
node.contains()
是否有子節點
node.hasChildNodes()
************************************************************************************************************************
下面為javascript操作xml
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加載文檔
//doc.load("b.xml");
//創建文件頭
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");
//添加文件頭
doc.appendChild(p);
//用於直接加載時獲得根接點
//var root = doc.documentElement;
//兩種方式創建根接點
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//創建子接點
var n = doc.createNode(1,"ttyp","");
//指定子接點文本
//n.text = " this is a test";
//創建孫接點
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//創建屬性
var r = doc.createAttribute("id");
r.value="test";
//添加屬性
n.setAttributeNode(r);
//創建第二個屬性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加屬性
n.setAttributeNode(r1);
//刪除第二個屬性
n.removeAttribute("class");
//添加孫接點
n.appendChild(o);
//添加文本接點
n.appendChild(doc.createTextNode("this is a text node."));
//添加注釋
n.appendChild(doc.createComment("this is a comment\n"));
//添加子接點
root.appendChild(n);
//復制接點
var m = n.cloneNode(true);
root.appendChild(m);
//刪除接點
root.removeChild(root.childNodes(0));
//創建數據段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加數據段
root.appendChild(c);
//添加根接點
doc.appendChild(root);
//查找接點
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//顯示改接點的屬性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改節點,利用XPATH定位節點
var b = doc.selectSingleNode("//ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存（需要在服務端，客戶端用FSO）
//doc.save();
//查看根接點XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
HTML文檔可以說由節點構成的集合，DOM節點有:
-
元素節點：上圖中
<html>、<body>、<p>等都是元素節點，即標簽。 -
文本節點:向用戶展示的內容，如
<li>...</li>中的JavaScript、DOM、CSS等文本。 -
屬性節點:元素屬性，如標簽的鏈接屬性href="http://www.baidu.com"。
節點屬性:
遍歷節點樹:
以上圖ul為例，它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。
DOM操作:
注意:前兩個是document方法。
getElementsByName()方法
返回帶有指定名稱的節點對象的集合。
語法：
document.getElementsByName(name)與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
注意:
-
因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數組，而不是一個元素。
-
和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。
看看下面的代碼:
運行結果:
getElementsByTagName()方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
getElementsByTagName(Tagname)說明:
-
Tagname是標簽的名稱，如p、a、img等標簽名。
-
和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()獲取節點。
區別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明，人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。
-
ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。
-
Name 是他的名字，可以重復。所以通過getElementsByName獲取名字相同的人集合。
-
TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
把上面的例子轉換到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂input標簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
方法總結如下:
注意：方法區分大小寫
通過下面的例子(6個name="hobby"的復選項，兩個按鈕)來區分三種方法的不同:
<input type="checkbox" name="hobby" id="hobby1"> 音樂 <input type="checkbox" name="hobby" id="hobby2"> 登山 <input type="checkbox" name="hobby" id="hobby3"> 游泳 <input type="checkbox" name="hobby" id="hobby4"> 閱讀 <input type="checkbox" name="hobby" id="hobby5"> 打球 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <input type="button" value = "全選" id="button1"> <input type="button" value = "全不選" id="button1">-
document.getElementsByTagName("input")，結果為獲取所有標簽為input的元素，共8個。
-
document.getElementsByName("hobby")，結果為獲取屬性name="hobby"的元素，共6個。
-
document.getElementById("hobby6")，結果為獲取屬性id="hobby6"的元素，只有一個，"跑步"這個復選項。
getAttribute()方法
通過元素節點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)說明:
-
elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
-
name：要想查詢的元素節點的屬性名字
看看下面的代碼，獲取h1標簽的屬性值：
運行結果:
h1標簽的ID ：alink
h1標簽的title ：getAttribute()獲取標簽的屬值
setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。
語法：
elementNode.setAttribute(name,value)說明：
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。
注意：
1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
2.類似於getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。
節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：
-
nodeName : 節點的名稱
-
nodeValue ：節點的值
-
nodeType ：節點的類型
一、nodeName 屬性: 節點的名稱，是只讀的。
- 元素節點的 nodeName 與標簽名相同
- 屬性節點的 nodeName 是屬性的名稱
- 文本節點的 nodeName 永遠是 #text
- 文檔節點的 nodeName 永遠是 #document
二、nodeValue 屬性：節點的值
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本自身
- 屬性節點的 nodeValue 是屬性的值
三、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:
元素類型 節點類型 元素 1 屬性 2 文本 3 注釋 8 文檔 9訪問子結點childNodes
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。
語法：
elementNode.childNodes注意：
如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
我們來看看下面的代碼:
運行結果:
IE:
UL子節點個數:3 節點類型:1其它瀏覽器:
UL子節點個數:7 節點類型:3注意:
-
IE全系列、firefox、chrome、opera、safari兼容問題
-
節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7，如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>運行結果:（IE和其它瀏覽器結果是一樣的）
UL子節點個數:3 節點類型:1訪問子結點的第一和最后項
一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.firstChild說明：與elementNode.childNodes[0]是同樣的效果。
二、lastChild屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.lastChild說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上一節中，我們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。
訪問父節點parentNode
獲取指定節點的父節點
語法：
elementNode.parentNode注意:父節點只能有一個。
看看下面的例子,獲取 P 節點的父節點，代碼如下:
<div id="text"> <p id="con"> parentNode 獲取指點節點的父節點</p> </div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.nodeName); </script>運行結果:
parentNode 獲取指點節點的父節點 DIV訪問祖節點:
elementNode.parentNode.parentNode看看下面的代碼:
<div id="text"> <p> parentNode <span id="con"> 獲取指點節點的父節點</span> </p> </div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.parentNode.nodeName); </script>運行結果:
parentNode獲取指點節點的父節點 DIV注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。
訪問兄弟節點
- nextSibling 屬性可返回某個節點之后緊跟的節點（處於同一樹層級中）。
語法：
nodeObject.nextSibling說明：如果無此節點，則該屬性返回 null。
- previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。
語法：
nodeObject.previousSibling說明：如果無此節點，則該屬性返回 null。
注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:
判斷節點nodeType是否為1, 如是為元素節點，跳過。
運行結果:
LI = javascript nextsibling: LI = jquery插入節點appendChild()
在指定節點的最后一個子節點列表之后添加一個新的子節點。
語法:
appendChild(newnode)參數:
newnode：指定追加的節點。
我們來看看，div標簽內創建一個新的 P 標簽，代碼如下:
運行結果:
HTML JavaScript This is a new p插入節點insertBefore()
nsertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法:
insertBefore(newnode,node);參數:
newnode: 要插入的新節點。
node: 指定此節點前插入節點。
我們在來看看下面代碼，在指定節點前插入節點。
運行結果:
This is a new p JavaScript HTML注意: otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]);
刪除節點removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)參數:
node ：必需，指定需要刪除的節點。
我們來看看下面代碼，刪除子點。
運行結果:
HTML 刪除節點的內容: javascript注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在內存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
替換元素節點replaceChild()
replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )參數：
newnode : 必需，用於替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
-
當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。
-
newnode 必須先被建立。
創建元素節點createElement
createElement()方法可創建元素節點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName)參數:
tagName：字符串值，這個字符串用來指明創建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。
我們來創建一個按鈕，代碼如下：
<script type="text/javascript"> var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "創建一個按鈕"; body.appendChild(input); </script>效果：在HTML文檔中，創建一個按鈕。
我們也可以使用setAttribute來設置屬性，代碼如下：
<script type="text/javascript"> var body= document.body; var btn = document.createElement("input"); btn.setAttribute("type", "text"); btn.setAttribute("name", "q"); btn.setAttribute("value", "使用setAttribute"); btn.setAttribute("onclick", "javascript:alert('This is a text!');"); body.appendChild(btn); </script>效果：在HTML文檔中，創建一個文本框，使用setAttribute設置屬性值。 當點擊這個文本框時，會彈出對話框“This is a text!”。
創建文本節點createTextNode
createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。
語法：
document.createTextNode(data)參數：
data : 字符串值，可規定此節點的文本。
我們來創建一個<div>元素並向其中添加一條消息，代碼如下：
運行結果:
瀏覽器窗口可視區域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
一、對於IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 瀏覽器窗口的內部高度
• window.innerWidth - 瀏覽器窗口的內部寬度
二、對於 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。
• document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。
或者
Document對象的body屬性對應HTML文檔的<body>標簽
• document.body.clientHeight
• document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHeight;網頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網頁內容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網頁內容實際高度，可以小於 clientHeight。
二、針對NS、FF:
scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小於 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;注意:區分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內容實際占用的高度和寬度。
網頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight;網頁卷去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。
scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。
offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 。
offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父坐標的計算頂端位置 。
注意:
1. 區分大小寫
2. offsetParent：布局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。
原文鏈接：http://www.jianshu.com/p/0771c08817d9
著作權歸作者所有，轉載請聯系作者獲得授權，並標注“簡書作者”。