DOM總結;
DOM: DOM= Document Object Model,文檔對象模型,DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說,這是表示和處理一個HTML或XML文檔的常用方法。有一點很重要,DOM的設計是以對象管理組織(OMG)的規約爲基礎的,因此可以用於任何編程語言.
• D:文檔 – html 文檔 或 xml 文檔
• O:對象 – document 對象的屬性和方法
• M:模型
• DOM 是針對xml(html)的基於樹的API。
• DOM樹:節點(node)的層次。
• DOM 把一個文檔表示爲一棵家譜樹(父,子,兄弟)
• DOM定義了Node的接口以及許多種節點類型來表示XML節點的多個方面
DOM的結構:
節點:
根據 DOM,HTML 文檔中的每個成分都是一個節點。DOM 是這樣規定的:
• 整個文檔是一個文檔節點
• 每個 HTML 標籤是一個元素節點
• 包含在 HTML 元素中的文本是文本節點
• 每一個 HTML 屬性是一個屬性節點
• 註釋屬於註釋節點
Node 層次:
節點彼此都有等級關係。
HTML 文檔中的所有節點組成了一個文檔樹(或節點樹)。HTML 文檔中的每個元素、屬性、文本等都代表着樹中的一個節點。樹起始於文檔節點,並由此繼續伸出枝條,直到處於這棵樹最低級別的所有文本節點爲止。
節點及其類型:
節點:
* 由結構圖中我們可以看到,整個文檔就是一個文檔節點。
* 而每一個HMTL標籤都是一個元素節點。
* 標籤中的文字則是文本節點。
* 標籤的屬性是屬性節點。
* 一切都是節點……
節點樹:
節點樹的概念從圖中一目瞭然,最上面的就是“樹根”了。節點之間有父子關係,祖先與子孫關係,兄妹關係。這些關係從圖中也很好看出來,直接連線的就是父子關係了。而有一個父親的就是兄妹關係……
NODE接口的特性和方法:
特性/方法 |
類型/返回類型 |
說 明 |
nodeName |
String |
節點的名字;根據節點的類型而定義 |
nodeValue |
String |
節點的值;根據節點的類型而定義 |
nodeType |
Number |
節點的類型常量值之一 |
ownerDocument |
Document |
指向這個節點所屬的文檔 |
firstChild |
Node |
指向在childNodes列表中的第一個節點 |
lastChild |
Node |
指向在childNodes列表中的最後一個節點 |
childNodes |
NodeList |
所有子節點的列表 |
previousSibling |
Node |
指向前一個兄弟節點;如果這個節點就是第一個兄弟節 點,那麼該值爲null |
nextSibling |
Node |
指向後一個兄弟節點;如果這個節點就是最後一個兄弟節 點,那麼該值爲null |
hasChildNodes() |
Boolean |
當childNodes包含一個或多個節點時,返回真 |
attributes |
NamedNodeMap |
包含了代表一個元素的特性的Attr對象;僅用於Element 節點 |
appendChild(node) |
Node |
將node添加到childNodes的末尾 |
removeChild(node) |
Node |
從childNodes中刪除node |
replaceChild |
Node |
將childNodes中的oldnode替換成newnode |
insertBefore |
Node |
在childNodes中的refnode之前插入newnode |
查找並訪問節點:
你可通過若干種方法來查找您希望操作的元素:
• 通過使用 getElementById() 和 getElementsByTagName() 方法
• 通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
查找元素節點:
getElementById()尋找一個有着給定 id 屬性值的元素,返回值是一個有着給定 id 屬性值的元素節點。如果不存在這樣的元素,它返回 null.
var oElement = document.getElementById ( sID )
該方法只能用於 document 對象
<input type="text" value="國慶60週年" id="tid">
function test(){
var usernameElement=document.getElementById(“tid");
//獲取元素的值
alert("usernameElement.value: "+usernameElement.value)
//獲取元素的類型
alert("usernameElement.type: "+usernameElement.type)
}
getElementsByName()尋找有着給定name屬性的所有元素,這個方法將返回一個節點集合,這個集合可以當作一個數組來處理。這個集合的 length 屬性等於當前文檔裏有着給定name屬性的所有元素的總個數。
<form name="form1">
<input type="text" name="tname" value="國慶60年_1" /><br>
<input type="text" name="tname" value="國慶60年_2" /><br>
<input type="text" name="tname" value="國慶60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok" οnclick="test();">
</form>
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
getElementsByTagName()尋找有着給定標籤名的所有元素,這個方法將返回一個節點集合,這個集合可以當作一個數組來處理。這個集合的 length 屬性等於當前文檔裏有着給定標籤名的所有元素的總個數。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節點當中尋找有着給定標籤名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);
查看是否存在子節點:
hasChildNodes()該方法用來檢查一個元素是否有子節點,返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本節點和屬性節點不可能再包含任何子節點,所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.
如果 hasChildNodes 方法的返回值是 false,則 childNodes,firstChild,lastChild 將是空數組和空字符串。
hasChildNodes()例:
var selectElements=document.getElementsByTagName("select");
alert(selectElements[0].hasChildNodes())
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
alert(inputElements[i].hasChildNodes());
}
根節點:
有兩種特殊的文檔屬性可用來訪問根節點:
document.documentElement
document.body
第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴展,提供了對 <body> 標籤的直接訪問。
DOM節點信息:
每個節點都擁有包含着關於節點某些信息的屬性。這些屬性是:
nodeName(節點名稱)
nodeValue(節點值)
nodeType(節點類型)
DOM屬性---nodeName:
nodeName 屬性含有某個節點的名稱。
var name = node.nodeName;
元素節點的 nodeName 是標籤名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
註釋:nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的
注:nodeName 是一個只讀屬性
DOM 屬性 – nodeValue:
nodeValue:返回給定節點的當前值(字符串)
如果給定節點是一個屬性節點,返回值是這個屬性的值。
如果給定節點是一個文本節點,返回值是這個文本節點的內容。
如果給定節點是一個元素節點,返回值是 null
nodeValue 是一個 讀/寫 屬性,但不能對元素節點的 nodeValue 屬性設置值,但可以爲文本節點的 nodeValue 屬性設置一個值。
var li = document.getElementById(“li