Dom
1、什麼是DOM？
什麼叫DOM，DOM是文檔對象模型(Document Object Model，是基於瀏覽器編程（在本教程中，能夠說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每一個瀏覽器都有一些細微的差異，其中以Mozilla的瀏覽器最與標準接近。單純的Javascript要結合DOM才能作DHTML編程，才能作出漂亮的效果、應用於WEB。這點幾乎與其它的語言無異，正如C/C++須要庫支持是同樣的道理。不然就是單純的在語法上作研究了。
所以，必需要對DOM有必定的認識，才能把Javascript應用於WEB，或你的RIA應用當中，由於DHTML本質上就是操做DOM樹。
之後的編程當中，但願你可以把DHTML.chm這本手冊也拿上，若是你須要兼容gecko，把gecko的DOM手冊也帶上。由於API太多，想不起來的接口還能夠查這本手冊。 若是你要測試瀏覽器是不是支持DOM的，簡單的一句就能夠判斷
<script>
var isSupportDOM = !!document.getElementById; //兩個取反，這已經在上節中說過了，意思是強制轉型
alert("你的瀏覽器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script>
2、DOM樹
要注意：DOM樹的根統一爲文檔根—document，DOM既然是樹狀結構，那麼他們天然有以下的幾種關係:
根結點(document)
父結點(parentNode)
子結點(childNodes)
兄弟結點 兄弟結點
(sibling) (sibling)
例子：
假設網頁的HTML以下
程序代碼
<html>
<head>
<title>never-online's website</title>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
</body>
</html>
咱們參照樹的概念，畫出該HTML文檔結構的DOM樹：
html
body head
div title
文本 文本
從上面的圖示能夠看出
html有兩個子結點，而html就是這兩個子節點的父結點
head有節點title，title下有一個文本節點
body下有節點div，div下有一個文本節點
3、操做DOM樹
開篇已經說過，DHTML本質就是操做DOM樹。如何操做它呢？
假設我要改變上面HTML文檔中div結點的文本，如何作?
程序代碼
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var nodeRoot = document; //這個是根結點
var nodeHTML = nodeRoot.childNodes[0]; //這個是html結點
var nodeBody = nodeHTML.childNodes[1]; //body結點
var nodeDiv = nodeBody.childNodes[0]; //DIV結點
var nodeText = nodeDiv.childNodes[0];//文本結點'
nodeText.data = strText; //文本節點有data屬性，咱們能夠改變這個屬性，也就成功的操做了DOM樹中的一個結點了
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
從上面的示例能夠看出，咱們能夠用上面的這種方法操做DOM樹上的任一節點。（注：1. 跨域除外，跨域一般是在操做frame上，簡單的說，就是兩個frame不屬於同一域名。2.上面的操做爲了演示，採用的方法是從根結點一直到文本結點的遍歷，在DOM方法上，有更簡潔的方法，這些之後會有更多示例加以說明，下文中也會有介紹）
4、DOM節點。
細心些的朋友也許發現了，在上面寫的HTML代碼時用<>與</>包函起來的就是一個結點，事實上是這樣的嗎？答案是否認的。下面就是說說節點類型，不然在有的時候是會犯錯誤的。好比，你把上面的代碼放到Mozilla firefox的瀏覽器裏運行一下，就會知道了。
DOM中的結點類型比較多，這裏寫一些在HTML文檔中（注：XML也是DOM樹結構）常見的幾種結點類型。
一、DOCUMENT_NODE
（document）文檔根結點類型，該枚舉型的值是9.
二、ELEMENT_NODE
（element）元素結點類型，該枚舉型的值是1。上文中的html, body, div這些結點都是屬於該類型。
三、TEXT_NODE
（text）文本結點類型，該枚舉型的值是3。上文中的文本，如：tutorial of DHTML and javascript programming就是屬於該類型。
（注：一個空格也就多是一個文本結點）
一般更須要注意的是文本結點，有可能一個回車，一個空格都是文本結點。這一點之後會碰到，固然，咱們也有辦法處理，這裏先不要急，之後也會說到的。
5、DOM經常使用的API
這些經常使用的API是要記下來的，固然在非IE的瀏覽器裏也會有效，是符合w3c的。這些API在之後的編程中會經常用到。正如每一個編程平臺所提供的API同樣，經常使用必須記下來，節省時間從而提升編程效率。只寫幾個最經常使用的，其它的API會在之後的示例中寫出。由淺而深，從易到難嘛。
一、獲取ELEMENT_NODE，元素節點
1)、方法：document.getElementById(元素的Id)，返回值爲元素的節點引用。能夠假想一下這個API的原理：象咱們上面所作的是遍歷每一個節點（從根到咱們所需結點），這個API，也能夠想成是從根遍歷，查詢每一個結點（空白結點和空結點除外），並獲取該結點的id是否爲指定的ID，若是是的話，就返回這個結點（注：在JS中，數組和對象是引用類型），若是沒有就返回空。咱們能夠寫寫這個代碼，幫助咱們理解document.getElementById。下面是一個簡單遍歷BODY中元素的示例。
<html>
<head>
<title>never-online's website</title>
<script>
function myGetElementById (id) {
var nodeRoot = document; //這個是根結點
var nodeHTML = nodeRoot.childNodes[0]; //這個是html結點
var nodeBody = nodeHTML.childNodes[1]; //body結點
var bodyChild = nodeBody.childNodes; //body的孩子
for (var i=0; i< bodyChild.length; i++) { //簡單的遍歷（指body的孩子下的深度爲1)
if (bodyChild[i].id==id) return bodyChild[i];
};
return null;
}
function TestGetElementById (id) {
var node = myGetElementById(id);
if (node!=null) {
alert("找到結點 "+id+"!");
alert(node.childNodes[0].data);
} else {
alert("沒有找到結點 "+id+".");
}
}
</script>
</head>
<body>
<div id="aTestNode"></div>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="TestGetElementById('textNode')" type="button" value="change"/>
</body>
</html>
2)、屬性：object.innerHTML，返回值：一個節點內的HTML值。該屬性爲可寫屬性。它雖然不是獲取結點，但常常與獲取結點相結合，因此我把它放在獲取結點這一類，它的屬性就相似因而純文本節點屬性中的data。以document.getElementById和object.innerHTML這兩個API爲例，
咱們就能夠把上面所寫的代碼簡化一下了，示例以下：
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("textNode");
node.innerHTML = strText;
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
3)、方法：object.getElementsByTagName(標籤的名字)，返回一個集合，該集合的把有元素都是有指定標籤的元素。訪問集合裏的元素，能夠用下標來訪問。語法裏的object，是指document（根）或者是一個ELEMENT_NODE。這個的原理示例我就不寫了，能夠做爲一個做業，你們能夠寫寫。這裏寫一些具體應用。如上例，咱們還能夠這樣寫。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementsByTagName("DIV");
node[0].innerHTML = strText;
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
再取一個例子，注意，BODY下的結點深度爲2。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("nodeTest");
var myNode = node.getElementsByTagName("DIV");
myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
<div id="nodeTest">
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</div>
</body>
</html>
二、動態建立與插入結點
1)、建立結點對象。document.createElement(tagname)，tagname指的是一個標籤，好比一個DIV，就是document.createElement("DIV")，
它返回的是這個結點的引用。
2)、在body的尾部插入結點用document.body.appendChild(object)，爲了容易理解，下面這個示例，我用了IE專有的屬性
object.outerHTML，獲得一個該元素的HTML標籤內容（包括自身），這樣會更容易看到效果。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
node.innerHTML = strText;
document.body.appendChild(node);
alert("插入元素後的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
3)、在元素處插入結點。object.insertBefore(oNewNode [, oChildNode])，oNewNode爲一個咱們建立的結點，oChildNode是可選的，爲 object下的一個子節點。一樣的，爲了看到效果，我也用了outerHTML。示例
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素後的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
三、移除結點。
1) object.parentNode.removeChild(oChildNode)，這個就是語法，下面看示例。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素後的body HTML： " +document.body.outerHTML);
}
function removeCreateNode() {
alert("移除元素前的body HTML： " +document.body.outerHTML);
var node = document.getElementById("textNode");
node.parentNode.removeChild(node);
alert("移除元素前的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>
parentNode和parentElement功能同樣，childNodes和children功能同樣。可是parentNode和childNodes是符合W3C標準的，能夠說比較通用。而另外兩個只是IE支持，不是標準，Firefox就不支持 javascript
- 1. DOM、HTML DOM、XML DOM
- 2. DOM（2）DOM樹
- 3. DOM簡介【DOM】
- 4. DOM簡介－DOM樹
- 5. DOM Extensions(DOM擴展)
- 6. DOM與虛擬DOM
- 7. [DOM]javascript DOM操作
- 8. DOM系列：DOM樹和遍歷DOM
- 9. DOM
- 10. dom
- 更多相關文章...
- • XML DOM - XML 教程
- • PHP XML DOM - PHP教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
- 1. DOM、HTML DOM、XML DOM
- 2. DOM（2）DOM樹
- 3. DOM簡介【DOM】
- 4. DOM簡介－DOM樹
- 5. DOM Extensions(DOM擴展)
- 6. DOM與虛擬DOM
- 7. [DOM]javascript DOM操作
- 8. DOM系列：DOM樹和遍歷DOM
- 9. DOM
- 10. dom