(轉)javascript 中 parentNode,childNodes、children 應用
"parentNode"
常用來擷取某個元素的父節點. 把 parentNodes 理解為容器, 在容器中有個子節點
例:
<div id="parent">
<b id="child">My text</b>
</div>
在上面的代碼中, 你看到把"爹"作為一個 div 容器, 該容器中有個"孩子", 就是粗體的文字部分.如果你打算用getElementById() 方法擷取粗體元素並且想知道它"爹"是誰, 返回的資訊將是一個 div. 示範下面的指令碼, 你就知道是怎麼回事啦 ...
引用:
<div id="parent">
<b id="child">My text</b>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>
用 parentNode 不一定只找到一個"爹", "兒子"也可以成為"爹", 如下面的例子 ...
引用:
<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>
上面這段代碼中有兩個"爹"和兩個"孩子". 頭一個 div ( id "parent") 是第二個 div (childparent)的"爹".
在 "childparent" 中有個粗體元素(id "child"), 是 "childparent" div 的"孩子". 那麼, 如何訪問到"爺爺" (id "parent")? 很簡單 ....
引用:
<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>
注意到兩個 parentNode 連用了嗎? "parentNode.parentNode". 第一個 parentNode 是 div ( id "childparent"), 因為我們要得到最外層的父元素, 所以另外加了一個 parentNode 就到了 div ( id "parent").
使用 parentNode 不只找到某個元素的 nodeName, 還會更多. 例如, 你可以擷取包含大量元素的父節點, 並在末尾添加一個新的節點.
IE 有它自己的名稱叫做 "parentElement", 對於交叉瀏覽器指令碼建議使用 parentNode.
再囉嗦兩句:
如果將 javascript 放在 html檔案頭部, 會發生錯誤. Firefox 會有如下報錯:
document.getElementById("child") has no properties
而 IE 則是:
Object Required
原因是所有的支援 javascript 的瀏覽器在完全解析 DOM 之前運行 javascript . 在實際在 Web編程中,可能會將大多數 javascript 放在 head 標籤中. 為了能夠正常運行, 需要在函數中包裹alert , 在文檔載入後調用函數. 例如在 Body 標籤中加入 .
(本文來源:小春論壇 http://www.xiaochunbbs.com )
parentNode、parentElement,childNodes、children 它們有什麼區別呢?
parentElement 擷取對象層次中的父物件。
parentNode 擷取文檔層次中的父物件。
childNodes 擷取作為指定對象直接後代的 HTML 元素和 TextNode 對象的集合。
children 擷取作為對象直接後代的 DHTML 對象的集合。
--------------------------------------------------------
parentNode和parentElement功能一樣,childNodes和children功能一樣。但是parentNode和childNodes是符合W3C標準的,可以說比較通用。而另外兩個只是IE支援,不是標準,Firefox就不支援
--------------------------------------------------------
也就是說parentElement、children是IE自家的東西,別的地方是不認的。
那麼,他們的標準版就是parentNode,childNodes。
這兩個的作用和parentElement、children是一樣的,並且是標準的、通用的。