JavaScript如何獲取父級元素和子級元素代碼示例

更新時間：2024年04月27日 10:53:14 作者：浮生_Lee

最近工作中總遇到取各種父啊子啊,每次都得查,所以下面這篇文章主要給大家介紹了關于JavaScript如何獲取父級元素和子級元素的相關資料,文中通過代碼介紹的非常詳細，需要的朋友可以參考下

一、獲取父級元素（parentNode）

一個元素只有一個父級元素

語法格式：
元素.parentNode

//獲取元素父級
語法格式：A.parentNode	//一個元素只有一個父級
樣例代碼：
var div1 = document.getElementByID('div1');
div1.parentNode.style.width = '100px';
div1.parentNode.parentNode.style.width='200px';

二、獲取子級元素（Children）

一個元素可以有多個子級元素，因為一個父級元素可能有多個子級元素，當有多個子級元素的時候需要使用數(shù)組來進行表示。

語法格式：
父級元素.children[0]

語法格式：A.children[0]	//一個父級元素可以有多個子級元素
var parentDiv = docunment.getElementByID('parentDiv');
parentDiv.children[0].style.width = '200px';
parentDiv.children[1].style.height = '300px';

三、獲取子級元素的內容（ChildNodes）

當我們通過children數(shù)組來獲取子級元素的時候，我們也可以通過childNodes來獲取children元素中的文本內容。以帶雙引號的字符串進行顯示。parentDiv.childNodes

A.childNodes[0]	//一個父級元素可以有多個子級元素
var parentDiv = docunment.getElementByID('parentDiv');
parentDiv.childNodes[0]
console.log(parentDiv.childNodes[0]);
ex:
<body>
    <div id="outerDiv">
    	99999
        <div id="innerDiv">78kkkk5</div>
    </div>
</body>
<script>
    var outerDiv=document.getElementById('outerDiv');
    console.log(outerDiv.childNodes[0]);
</script>

顯示結果為：

當我們需要操作子級元素的文本內容的時候，需要使用到data，data本身就有數(shù)據(jù)的意思。

當我們使用子級.data的時候，會以不帶雙引號的字符串進行顯示。

<body>
    <div id="outerDiv">99999
        <div id="innerDiv">78kkkk5</div>
    </div>
</body>
<script>
    var outerDiv=document.getElementById('outerDiv');
    console.log(outerDiv.childNodes[0].data);
</script>

顯示結果為：

當我們需要通過子級來修改元素的時候，只需要使用子級.data=的形式即可。

<body>
    <div id="outerDiv">99999
        <div id="innerDiv">78kkkk5</div>
    </div>
</body>
<script>
    var outerDiv=document.getElementById('outerDiv');
    console.log(outerDiv.childNodes[0].data);
    outerDiv.childNodes[0].data=123;
</script>

顯示結果為：

附：js獲取父元素里的所有子元素

<body>
    <ul class="uls">
        <li><img src="../img/closed.png" />你好</li>
        <li><img src="../img/closed.png" />你好</li>
        <li><img src="../img/closed.png" />你好</li>
    </ul>
</body>
 
<script>
    //先獲取
    var imgs = document.querySelector('.uls').querySelectorAll('img');
    //for循環(huán)遍歷出每個imgs里的li
    for (i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function() {
            console.log(1);
        }
    }
</script>