JavaScript的DOM基礎知識

來源:互聯網
上載者:User

/*
javascript實現DOM(基礎)
author:shine
*/
DOM是一種文件物件模型,它定義了操作xml文檔的方法和屬性,但是它只是一系列介面,是由別的語言來實現,如:java中xerces,javascript,.net等

等,雖然實現方式各異,但有一樣是不會變的,那就是DOM API,在正式進入我們的主題前,先來看看常用的DOM API(大致有個印象就行,後面會詳

解):

1.常用DOM API(void表示沒有傳回值,或沒有參數)
1)DOMDocument對象 表示整個xml檔案的文檔結構,javascript中已經內建了這個對象document。所有其他的節點都是有它產生。
屬性:
名字    類型 說明
documentElement    Element 表示xml檔案的根節點
方法:
名字    傳回值 參數 說明
createElement(tagName); Element String 建立一個Element節點
createTextNode(text); Text String 建立一個Text節點
createAttribute(name); Attr String 建立一個屬性節點
createDocumentFragment();    DocumentFragment void 建立一個文檔片段
getElementById(id); Element String 按照元素id屬性獲得元素
getElementsByTagName(tagName); NodeList String 按照元素標籤名稱獲得元素列表
getElementsByName(name); NodeList String 按照元素name屬性獲得元素列表

2) DOMNode對象 DOM中主要的對象,DOMAttribute,DOMElement,DOMText都繼承於此對象。
屬性:
名字    類型 說明    
nodeName   String 節點的名字  
nodeValue   String 節點的值
nodeType   Number 節點的類型
parentNode   Node 父節點
nextSibling     Node 下一個兄弟節點
previousSibling    Node 上一個兄弟節點
owerDocument   Document 所屬文檔
childNodes   NodeList 子節點列表
firstChild   Node 第一個子節點
lastChild    Node 最後一個子節點
attributes   NamedNodeMap 屬性列表

方法:
名字    傳回值 參數 說明
removeChild(node)   void Node 刪除子節點
appendChild(node)    void Node 添加子節點

3)DOMElement對象 表示DOM中的“標籤元素”,繼承於Node,所以Node中的屬性和方法可以用。除此之外還有幾個有用的方法。
(除Node對象的方法和屬性外,還有:)
方法:
名字    傳回值 參數 說明
setAttribute(attrName,value)    String,String 設定屬性
getAttribute(attrName) String String 得到屬性
removeAttribute(attrName) void String 刪除屬性

4)DOMAttribute對象 表示元素屬性。
(除Node對象的方法和屬性外,還有:)
屬性:
名字    類型 說明
name    String 屬性的名稱
owerElement   Element 屬性所屬的元素
value    String 屬性的值

5)DOMText對象 表示元素的文本節點。
(除Node對象的方法和屬性外,還有:)
屬性
名字    類型 說明
length    Number 文本的長度

6)DOM NodeList 節點列表(輔助對象之一,List結構)
屬性:
名字    類型 說明
length    Number 列表的長度
方法:
名字    傳回值 參數 說明
item(i)    Node Number 獲得指定下標的節點

7)DOM NamedNodeMap 節點Map(輔助對象之二,Map結構)
屬性:
名字    類型 說明
length    Number Map的長度
方法:
名字    傳回值 參數 說明
item(i)    Attr Number 獲得指定下標的節點
getNamedItem(name) Attr String 獲得指點名稱的節點
removeNamedItem(name) void String 刪除指定名稱的節點

大致看了一下DOMAPI後,開始進入正題:  
2.使用DOM:
1)訪問相關節點:
exp:
function test() {
var oHtml = document.documentElement;
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
//第二種方式得到body:var oBody = oHtml.childNodes[0];
//第三種方式得到body:var oBody = document.body

alert(oHead.parentNode == oHtml);
alert(oBody.parentNode == oHtml);
alert(oHead.nextSibling == oBody);
alert(oBody.previousSibling == oHead);
alert(oHtml.ownerDocument == document);
}

注意:
寫完js,然後在body標籤中加入事件:<body onload="text();">(後面的例子都是這樣,千萬不要在<script>標籤中直接寫代碼測試,因為

javascript,html是解釋執行的,即:一行一行的執行,如果直接寫入,很可能body等標籤還沒有產生,就在javascript中調用了,所以最好放在函數

function中,用onload觸發)

2)檢測節點類型:
function test() {
//常用的節點類型,由於IE只支援數字,不支援字元常量如:ELEMENT_NODE,可以使用枚舉進行轉換
var Node = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
DOCUMENT_NODE: 9
}

var oHtml = document.documentElement;
alert(oHtml.nodeType == Node.ELEMENT_NODE);
alert(document.nodeType== Node.DOCUMENT_NODE );
}

3)處理特性
ELement中有一個attributes屬性,它是NamedNodeMap類型,所以它可以使用NamedNodeMap的方法(DOM API已經提到)
在test1.html中加入一行:<p id="a1" align="center">I love you</p>

// JavaScript Document
function test() {
var op = document.getElementById("a1"); //通過指定id屬性獲得元素
//設定op元素屬性id和align的方法一
//op.attributes.getNamedItem("id").nodeValue = "a5";
//op.attributes.getNamedItem("align").nodeValue = "right";
//方法二
op.setAttribute("id","a6");
op.setAttribute("align","left");

//獲得op元素屬性id和align的方法一
//var id = op.attributes.getNamedItem("id").nodeValue;
//var align = op.attributes.getNamedItem("align").nodeValue;
//方法二
var id = op.getAttribute("id");
var align = op.getAttribute("align");

alert(id);
alert(align);
}

4)訪問指定節點:
a. getElementsByTagName() 返回指定標籤名的元素集。
在test1.html中加入:
<p id="a1" align="center">I love you</p>
<p id="a2" align="center">But you don't know</p>

// JavaScript Document
function test() {
var op1 = document.getElementsByTagName("p");
alert(op1.length);
alert(op1[0].childNodes[0].nodeValue); //獲得第一個<p>中的文本
alert(op1[1].childNodes[0].nodeValue); //獲得第二個<p>中的文本
}

b. getElementByName() 返回指定標籤name屬性的元素集
(這個例子完成了“全選”的功能)
test1.html中加入:
<form method="post">
<input type="checkbox" name="color" value="red" /> red<br/>
<input type="checkbox" name="color" value="green" /> green<br/>
<input type="checkbox" name="color" value="blue"/> blue<br/>
<input type="checkbox" name="color" value="all" onClick="test();"/>全選
</form>

// JavaScript Document
function test() {
var allBoxes = document.getElementsByName("color"); //得到所有name屬性為color的節點
var allSelected = allBoxes.item(allBoxes.length - 1); //得到最後一個全選節點
//全選
for(var i=0;i<allBoxes.length;i++) {
if(allSelected.checked)
   allBoxes.item(i).checked = true;
else
   allBoxes.item(i).checked = false;
}
}

c. getElementById() 返回指定標籤id屬性的元素。(前面的例子中多次用到,就不再舉例)
注;IE中的Bug:有時getElementById()會按照name取,而不是id,其實是有原因的:因為HTML是解釋執行,即一行一行的執行,那麼在IE中會按照

name和id同時一行一行的尋找匹配的元素,如:
var o = getElementById("color1")
alert(o.value);
第一種情況:
<input type="checkbox" id="color1" name="color" value="green" /> green<br/>
<input type="checkbox" id="aaa" name="color1" value="red" /> red<br/>
輸出是:green

第二種情況:
<input type="checkbox" id="color" name="color1" value="green" /> green<br/>
<input type="checkbox" id="color1" name="aaa" value="red" /> red<br/>
輸出是:green

第三種情況:
<input type="checkbox" id="aaa" name="color1" value="red" /> red<br/>
<input type="checkbox" id="color" name="color1" value="green" /> green<br/>
輸出是:red

第四種情況:
<input type="checkbox" id="color1" name="aaa" value="red" /> red<br/>
<input type="checkbox" id="color1" name="color" value="green" /> green<br/>
輸出是:red

從上面的四種情況可以看出,不論是name屬性還是id屬性,只要“解釋”到的那一個元素中有任意一個匹配,該元素就會被返回,又由於getElementById

只選一個元素,所以它只會選擇最先匹配的元素(不論name還是id)。

5)建立和動作節點
這個例子是把arrText數組中的元素加入到body中。
方法一:
// JavaScript Document
function test() {
var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
for(var i=0; i<arrText.length; i++) {
var element = document.createElement("p");
var text = document.createTextNode(arrText[i]);
element.appendChild(text);
document.body.appendChild(element);
}
}
如果使用方法一,就要調用10次document.body.appendChild(element),也就會使頁面重新整理10次。可以使用DocumentFragment()解決。

方法二:
// JavaScript Document
function test() {
var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
var fragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++) {
var element = document.createElement("p");
var text = document.createTextNode(arrText[i]);
element.appendChild(text);
fragment.appendChild(element);
}
document.body.appendChild(fragment);
}

3.HTML DOM特性
看過我另一篇文章“DOM解析輕鬆入門(三)--DOM Level2 Modules”的朋友,對HTML DOM並不陌生,“DOM Level 2 HTML (HTML):擴充DOM提供

了把HTML文檔結構作為XML處理的介面。”沒錯,HTML DOM 就是 DOM Level2中的一個Moduel。
1)讓特性像屬性一樣
如:
<img src="2.jpg" border="1" id="img1" />

按照我們前面的方法得到或設定img的src和border屬性:
// JavaScript Document
function test() {
var img = document.getElementById("img1");
alert(img.getAttribute("src"));
img.setAttribute("border","0");
alert(img.getAttribute("border"));
}

而使用HTML DOM:
// JavaScript Document
function test() {
var img = document.getElementById("img1");
alert(img.src);
img.border = 0;
alert(img.border);
}

現在該明白什麼叫做“讓特性像屬性一樣”吧。
注意:
大多數特性名和屬性名稱一樣,只有一個特殊即:class,它在css中是類別選取器,它對應的是className,如:
<div id ="div1" class="header"></div>

var div= document.getElementById("div1");
alert(div.className);

2)table方法。
在DOM HTML中對table也做了改善,下面這個例子是遍曆table。
準備一個table
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

遍曆table:
// JavaScript Document
function test() {
var table = document.getElementById("myTable");
for(var i=0; i<table.rows.length; i++)
for(var j=0; j<table.rows[i].cells.length; j++)
   alert(table.rows[i].cells[j].innerText);
}
說明:
這裡只用注意兩個常用的屬性:
a. rows 是指table中所有行
b. cells 是指table中的所有儲存格(列)
c. 如果想要訪問i行j列值:rows[i].cells[j]

4.DOM遍曆,由於IE不支援相關的DOM Level Module,所以就不在這裡多說了,但是雖然javascript受到瀏覽器限制,但java是可以完成這部分的功能

,見我的另一篇文章“DOM解析輕鬆入門(三)--DOM Level2 Modules”

5.測試和DOM標準的一致性
使用
var testDOM = document.implementation.hasFeature("XML","1.0")
該方法有兩個參數:要檢查的特徵和特徵的版本。(有關特徵列表見“DOM解析輕鬆入門(三)--DOM Level2 Modules”)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.