javascript 中 parentNode,childNodes、children 應用

來源:互聯網
上載者:User

()javascript parentNodechildNodeschildren

"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是一樣的,並且是標準的、通用的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.