溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“js常用節點操作方法有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“js常用節點操作方法有哪些”文章吧。
element.parentNode，得到的是離元素最近的父節點。如果找不到則返回為null
代碼：
<body>
<div>
<div>
<div></div>
</div>
</div>
<script>
var divs=document.querySelector(".s")
console.log(divs.parentNode);
</script>
</body>效果：
element.children,是一個只讀屬性，返回所有子元素節點，其余節點不返回
代碼：
<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分別返回第一個和最后一個子元素節點，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]分別返回第一個和最后一個子元素節點
代碼：
<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，返回當前元素下一個兄弟元素節點，找不到則返回null
element.previousElementSiblig，返回當前元素上一個兄弟元素節點，找不到則返回null
IE9+
document.createElement()，動態創建元素節點
innerHtml，創建節點
document.write,創建節點，但導致頁面重繪
fartherelement.appendChild(childelement)，將一個節點添加到指定父節點的子節點列表末尾
注意事項：創建和添加元素節點需要聯合使用
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()中無引號。因為：規定變量或對象是不用加引號的
效果：
element.insertBefore(child,指定元素)，將一個節點添加到父節點指定節點前面
代碼：
<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(),括號參數為空或者為false則為淺拷貝，只復制標簽。括號參數為ture則復制標簽和里面的內容。克隆節點需要和添加節點一起使用
以上就是關于“js常用節點操作方法有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
