溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“js常用節(jié)點(diǎn)操作方法有哪些”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“js常用節(jié)點(diǎn)操作方法有哪些”文章吧。
element.parentNode，得到的是離元素最近的父節(jié)點(diǎn)。如果找不到則返回為null
代碼：
<body>
<div>
<div>
<div></div>
</div>
</div>
<script>
var divs=document.querySelector(".s")
console.log(divs.parentNode);
</script>
</body>效果：
element.children,是一個只讀屬性，返回所有子元素節(jié)點(diǎn)，其余節(jié)點(diǎn)不返回
代碼：
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul=document.querySelector("ul")
console.log(ul.children);
</script>
</body>效果:
element.firstElementChild,element.lastElementChild分別返回第一個和最后一個子元素節(jié)點(diǎn)，IE9+
代碼：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
</script>
</body>效果：
element.children[0] , element.children[element.children.length-1]分別返回第一個和最后一個子元素節(jié)點(diǎn)
代碼：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
console.log(ul.children[0]);
console.log(ul.children[ul.children.length-1]);
</script>
</body>效果：
element.nextElementSibling，返回當(dāng)前元素下一個兄弟元素節(jié)點(diǎn)，找不到則返回null
element.previousElementSiblig，返回當(dāng)前元素上一個兄弟元素節(jié)點(diǎn)，找不到則返回null
IE9+
document.createElement()，動態(tài)創(chuàng)建元素節(jié)點(diǎn)
innerHtml，創(chuàng)建節(jié)點(diǎn)
document.write,創(chuàng)建節(jié)點(diǎn)，但導(dǎo)致頁面重繪
fartherelement.appendChild(childelement)，將一個節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾
注意事項(xiàng)：創(chuàng)建和添加元素節(jié)點(diǎn)需要聯(lián)合使用
1&2：
添加前代碼：
<body> <ul> <li>我第一</li> <li></li> <li></li> <li></li> <li>我最后</li> </ul> <script> </script> </body>
效果：
添加后代碼：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
var li=document.createElement("li");
ul.appendChild(li)
</script>
</body>注意：appendChild()中無引號。因?yàn)椋阂?guī)定變量或?qū)ο笫遣挥眉右柕?/strong>
效果：
element.insertBefore(child,指定元素)，將一個節(jié)點(diǎn)添加到父節(jié)點(diǎn)指定節(jié)點(diǎn)前面
代碼：
<body>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var ul=document.querySelector("ul")
var li=document.createElement("li");
ul.insertBefore(li,ul.children[0])
</script>
</body>效果：
element.removeChild()
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
button{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button></button>
<ul>
<li>我第一</li>
<li></li>
<li></li>
<li></li>
<li>我最后</li>
</ul>
<script>
var button=document.querySelector("button")
var ul=document.querySelector("ul")
button.onclick=function(){
ul.removeChild(ul.children[0])
}
</script>
</body>
</html>element.cloneNode(),括號參數(shù)為空或者為false則為淺拷貝，只復(fù)制標(biāo)簽。括號參數(shù)為ture則復(fù)制標(biāo)簽和里面的內(nèi)容。克隆節(jié)點(diǎn)需要和添加節(jié)點(diǎn)一起使用
以上就是關(guān)于“js常用節(jié)點(diǎn)操作方法有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼