HTML node相關的一些資料整理

2024-05-06 14:12:02

字體：大中小

來源：轉載

供稿：網友

一、HTML DOM是一個樹型的對象

二、每個node都包含該節點的某些信息，分別是：

　　 1. nodeName
　　　　 nodeName 屬性含有某個節點的名稱。

* 元素節點的 nodeName 是標簽名稱
* 屬性節點的 nodeName 是屬性名稱
* 文本節點的 nodeName 永遠是 #text
* 文檔節點的 nodeName 永遠是 #document

　　　　注釋：nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的

　　 2. nodeValue

對于文本節點，nodeValue 屬性包含文本。

對于屬性節點，nodeValue 屬性包含屬性值。

nodeValue 屬性對于文檔節點和元素節點是不可用的。

　　 3. nodeType

nodeType 屬性可返回節點的類型。

最重要的節點類型是：

元素類型	節點類型
元素	1
屬性	2
文本	3
注釋	8
文檔	9

三、修改節點

　　1. [newfathernode].appendChild([childnode])

　　　　此操作會更改newfathernode和childnode之間的關系為父子節點，并且會自動導致childnode的oldfathernode不在擁有此childnode節點.

　　2. [newfathernode].removeChild([childnode])

四、程序示例
代碼如下:
<html>
<body>
<div id="div1">
<div id="div3">
</div>
</div>
<div id="div2">
</div>
<script>
function $id(id){
return document.getElementById(id);
}

function CountNodes(arr){
var len = arr.length;
var i = 0;
while(len--){
(arr[len].nodeType==1) && i++;
}
return i;
}

window.onload = function(){
alert(CountNodes($id("div2").childNodes));
$id("div2").appendChild($id("div3"));
alert(CountNodes($id("div1").childNodes));
alert(CountNodes($id("div2").childNodes));
}
</script>
</body>
</html>

上一篇：javascript 面向對象技術基礎教程第1/2頁

下一篇：javascript 可控式透明特效實現代碼