這篇文章主要介紹了javascript DOM的詳解及實例程式碼的相關資料,需要的朋友可以參考
javascript DOM 總結
一直以為DOM（文件物件模型）是JS中最簡單的一部分。不可否認，它確實很簡單，因為DOM的思維模式有點固定，只需要簡單地記住一些固定的方法，所以DOM可以說是所有js(這裡指的是客戶端的js)入門的起手點。
最近我在做一些有用到DOM的練習時，發現自己的DOM知識非常零散(一直以為掌握的很好)，可能有很多朋友都覺得，DOM嘛，也就調用呼叫幾個方法，或者我直接使用jQuery，根本不用考慮DOM的細節。是，這也沒錯，jQuery對DOM的封裝可謂前無古人，但是正如成長一樣，跑之前是一定要會走的，所以我認為對DOM必須要有比較詳細的了解，於是我總結瞭如下的關於DOM的一些使用方法。
在W3C總結跪DOM規範中，有一些十分常用的，也有些不太有用的，這裡我們主要討論常用一些DOM操作(有關DOM的基本概念在此就不介紹了)：
節點層次
所謂節點層次，指的是html文件中存在具有各自特點，數據，方法的節點(例如標籤)，節點之間的關係構成了層次(其實可以想像成樹狀結構)。 W3C的DOM1級規範中定義了一個NODE介面。這個介面有一些方法是非常有用的:
Node.ELEMENT_NODE;(元素節點)
Node.TEXT_NODE;(文字節點)
Node.DOCUMENT_NODE(文檔節點)
而每個節點都有自己的節點類型標誌，也就是NodeType屬性，例如元素節點的nodeType == ' 1';文字節點的nodeType == '3';文檔節點的nodeType == '9';
1.文檔節點
## 文檔節點在一個文檔中以document物件表示，它的基本特徵如下:console.log(document.nodeType); // 9 console.log(document.nodeName); // #document console.log(document.nodeValue); // null console.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点)
1.透過id : document.getElementById("xxx"); 一般頁面id會不同，若有多個相同id，則取到第一個有該id的元素。
2.透過tagName : document.getElementsByTagName("xxx"); 傳回標籤名稱為"xxx"的元素集合!
3.透過name : document.get
3.透過name : document.#getElement#ByName();# 理解document物件非常簡單，相容性做的也比較靠前。
2.元素節點
元素節點提供了對元素標籤名，子節點及特性的存取。它的基本特徵如下:
var ele = document.getElementById("element"); //通过document取到一个标签对象
console.log(ele.nodeType); // 1
console.log(ele.nodeName); // 返回元素的标签名
console.log(ele.nodeValue); //永远返回null!tip one (html元素) :
<p id="myp" class="bd" title="Body text" lang="en" dir="ltr"></p>
var p = document.getElementById("p");
1. console.log(p.id); // "myp"
2. console.log(p.className); // "bd"
3. console.log(p.title); // "Body text"
4. console.log(p.lang); // "en"
5. console.log(p.dir); // "ltr" 1.p.getAttribute("id"); // "myp"
2.p.setAttribuye("id","yourp"); // id已变动
3.p.removeAttribute("id"); //id已删除事件處理
程式時，沒有任何效果，get也是同樣的。因此一般開發要避免以上三種方法，建議透過屬性來設定特性。 tip three (元素的子節點) :要重點提一下的就是這裡了，有如下代碼:
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
var mL = document.getElementById("myList");
//很明显mL对象有三个元素节点，我们也知道用childNodes属性去找到节点数，然而陷阱随之而来
console.log(mL.childNodes); // 7
//?!怎么会有7个?
//原因在于childNodes中不仅包含了元素节点，还有4个文本节点。因此需要过滤
for(var i=0,len=ml.childNodes.length;i<len;i++){
if(ml.childNodes[i].nodeType == "1"){ // 利用元素节点的特性
// ....
}
}<br>//最好的方法可以这么做<br>//如果元素对象内部标签名是一样的<br>var items = ml.getElementsByTagName("li"); //能得到三个li节点对象
3.文本節點
文字節點包含的是可以照字面解釋的純文字內容，純文字中可以包含轉義後的HTML字符，但不能包含HTML程式碼。文本節點的基本特徵如下:<p id="myp">123</p>
var myp = document.getElementById("myp") //取到元素节点
var tx = myp.childNodes[0] //前面也提过childNodes的特性，这次取到了文本节点
console.log(tx.nodeType) // 3
console.log(tx.nodeName) // 所有文本节点的nodeName都是"#text";
console.log(tx.nodeValue) // 123(节点包含的文本)，注意元素节点是不能取到它包含的文本节点的文本的
//所以其父节点显然是个元素节点.var a = document.createElement("p");
var b = document.createTextNode("123");
a.appendChild(b);
document.body.appendChild(a);123
這樣的標籤###個人認為DOM肯定是學習js的入門點，但是也需要很長時間的打磨。我看了DOM不下三遍，只是DOM1級規範，每次都有些新東西。如果你學習DOM，那麼就一定要注意一些陷阱，同時也要多花時間琢磨。
以上是javascript DOM的範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
