淺談js的html元素的父節(jié)點,子節(jié)點

更新時間：2016年08月06日 10:39:26 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談js的html元素的父節(jié)點,子節(jié)點。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

parentNode和parentElement功能一樣，childNodes和children功能一樣。但是parentNode和childNodes是符合W3C標準的，可以說比較通用。而另外兩個只是IE支持，不是標準，F(xiàn)irefox就不支持

示例：

"parentNode" 常用來獲取某個元素的父節(jié)點. 把 parentNodes 理解為容器, 在容器中有個子節(jié)點，如下：

<div id="parent">
<b id="child">My text</b>
</div>

在上面的代碼中, 你看到把"爹"作為一個 div 容器, 該容器中有個"孩子", 就是粗體的文字部分. 如果你打算用getElementById() 方法獲取粗體元素并且想知道它"爹"是誰, 返回的信息將是一個 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")?如下：

<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, 還會更多. 例如, 你可以獲取包含大量元素的父節(jié)點, 并在末尾添加一個新的節(jié)點. IE 有它自己的名稱叫做 "parentElement", 對于交叉瀏覽器腳本建議使用 parentNode

以上這篇淺談js的html元素的父節(jié)點,子節(jié)點就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

uni-app集成使用SQLite數(shù)據(jù)庫的方法步驟
這篇文章主要介紹了uni-app集成使用SQLite數(shù)據(jù)庫的相關資料,包括勾選SQLite選項、封裝sqlite.js文件以及在使用時注意的事項,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2025-01-01
廣告代碼靜態(tài)化js通用函數(shù)
廣告代碼靜態(tài)化js通用函數(shù)...
2007-05-05
js實現(xiàn)創(chuàng)建刪除html元素小結
本文給大家簡單介紹了下使用javascript和jquery實現(xiàn)創(chuàng)建刪除html元素的方法，非常的實用，有需要的小伙伴可以參考下。
2015-09-09
淺談關于JS下大批量異步任務按順序執(zhí)行解決方案一點思考
這篇文章主要介紹了淺談關于JS下大批量異步任務按順序執(zhí)行解決方案一點思考，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
如何判斷出一個js對象是否一個dom對象
如何判斷出一個js對象是否一個dom對象呢？下面小編就為大家?guī)硪黄袛喑鲆粋€js對象是否一個dom對象的方法。希望對大家有所幫助。一起跟隨小編過來看看吧
2016-11-11
JS簡單實現(xiàn)tab切換效果的多窗口顯示功能
這篇文章主要介紹了JS簡單實現(xiàn)tab切換效果的多窗口顯示功能,可實現(xiàn)響應鼠標事件的文字切換顯示效果,涉及javascript頁面元素遍歷與樣式變換相關操作技巧,需要的朋友可以參考下
2016-09-09
js子頁面獲取父頁面數(shù)據(jù)示例
這篇文章主要介紹了js子頁面如何獲取父頁面數(shù)據(jù),需要的朋友可以參考下
2014-05-05
elemetUi 組件--el-upload實現(xiàn)上傳Excel文件的實例
這篇文章主要介紹了elemetUi 組件--el-upload實現(xiàn)上傳Excel文件的實例的相關資料,希望通過本文大家能夠實現(xiàn)這樣的功能，需要的朋友可以參考下
2017-10-10
基于javascript、ajax、memcache和PHP實現(xiàn)的簡易在線聊天室
這篇文章主要介紹了基于javascript、ajax、memcache和PHP實現(xiàn)的簡易在線聊天室,需要的朋友可以參考下
2015-02-02
JS回調函數(shù)基本定義與用法實例分析
這篇文章主要介紹了JS回調函數(shù)基本定義與用法,結合實例形式較為詳細的分析了javascript回調函數(shù)基本概念、功能、使用方法與相關注意事項,需要的朋友可以參考下
2017-05-05