2010年1月14日 星期四

DOM屬性(childNodes, nodeType, nodeValue, nodeName, firstChild, lastChild)

childNodes 屬性
element.childNodes 返回一個數組,這個數組包含給定元素節點的全體子元素

var element = document.getElementsByTagName("ul");
var oElement = element[0].childNodes;
for(var i = 0; i < oElement.length; i++){ alert(typeof oElement[i]); }

##RM##
nodeType 屬性

node.nodeType 返回一個數值

nodeType 屬性總共有12種可取值,但其中僅有3種具有使用價值:元素節點、屬性節點、文本節點的 nodeType 的屬性值分別是 1、2、3。

元素節點的 nodeType 屬性值是 1。

屬性節點的 nodeType 屬性值是 2。

文本節點的 nodeType 屬性值是 3。

var element = document.getElementsByTagName("ul");
var oElement = element[0].childNodes;
for(var i = 0; i < oElement.length; i++){ alert(oElement[i].nodeType); }


nodeValue 屬性

node.nodeValue 檢索或設置節點的值

var text = document.getElementsByTagName("p");
alert(text[0].childNodes[0].nodeValue);
text[0].childNodes[0].nodeValue = "OK-value";
alert(text[0].childNodes[0].nodeValue);


nodeName 屬性
node.nodeName 返回一個大寫字符串(節點名)

var name = document.getElementsByTagName("p");
alert(name[0].nodeName);


firstChild 屬性

node.firstChild 直接訪問childNodes[]數組的第一個元素

var parent = document.getElementsByTagName("p");
var child = parent[0].firstChild;
alert(child.nodeValue);


lastChild 屬性
node.lastChild 直接訪問childNodes[]數組的最後一個元素


var parent = document.getElementsByTagName("p");
var child = parent[0].lastChild;
alert(child.nodeValue);

Examples:

<p>Hello World!<span>OK!!!</span></p>
<script type="text/javascript">
<!--
var element = document.getElementsByTagName("p");
var childs = element[0].childNodes;
for(var i = 0; i < childs.length; i++){
alert(childs[i].nodeType);
i != 1 ? alert(childs[i].nodeValue) : alert(childs[i].childNodes[0].nodeValue);
}

var first = element[0].firstChild;
alert(first.nodeType);
alert(first.nodeValue);
alert(first.nodeName);

var last = element[0].lastChild;
alert(last.nodeType);
alert(last.nodeValue);
alert(last.nodeName);
-->
</script>

【下列文章您可能也有興趣】

1 則留言:

匿名 提到...

雖然不是大錯誤、不過在 lastChild 的說明部分剛開始的地方打錯了! 應該是 node.lastChild 才對! 還有這篇說的滿清楚的、感謝分享 ^_^