快捷導(dǎo)航

JavaScript如何獲取父級(jí)元素和子級(jí)元素代碼示例

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

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

一、獲取父級(jí)元素（parentNode）

一個(gè)元素只有一個(gè)父級(jí)元素

語(yǔ)法格式：
元素.parentNode

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

二、獲取子級(jí)元素（Children）

一個(gè)元素可以有多個(gè)子級(jí)元素，因?yàn)橐粋€(gè)父級(jí)元素可能有多個(gè)子級(jí)元素，當(dāng)有多個(gè)子級(jí)元素的時(shí)候需要使用數(shù)組來(lái)進(jìn)行表示。

語(yǔ)法格式：
父級(jí)元素.children[0]

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

三、獲取子級(jí)元素的內(nèi)容（ChildNodes）

當(dāng)我們通過(guò)children數(shù)組來(lái)獲取子級(jí)元素的時(shí)候，我們也可以通過(guò)childNodes來(lái)獲取children元素中的文本內(nèi)容。以帶雙引號(hào)的字符串進(jìn)行顯示。parentDiv.childNodes

A.childNodes[0]	//一個(gè)父級(jí)元素可以有多個(gè)子級(jí)元素
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>

顯示結(jié)果為：

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

當(dāng)我們使用子級(jí).data的時(shí)候，會(huì)以不帶雙引號(hào)的字符串進(jìn)行顯示。

<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>

顯示結(jié)果為：

當(dāng)我們需要通過(guò)子級(jí)來(lái)修改元素的時(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);
    outerDiv.childNodes[0].data=123;
</script>

顯示結(jié)果為：

附：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)遍歷出每個(gè)imgs里的li
    for (i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function() {
            console.log(1);
        }
    }
</script>