js常用節(jié)點操作實例總結(jié)
一：父節(jié)點
1：返回父節(jié)點
element.parentNode，得到的是離元素最近的父節(jié)點。如果找不到則返回為null
代碼：
<body>
<div>
<div>
<div></div>
</div>
</div>
<script>
var divs=document.querySelector(".s")
console.log(divs.parentNode);
</script>
</body>
效果：
二：子節(jié)點
1:返回子節(jié)點
element.children,是一個只讀屬性，返回所有子元素節(jié)點，其余節(jié)點不返回
代碼：
<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>
效果:
2：返回第一個和最后一個子節(jié)點
2.1:
element.firstElementChild,element.lastElementChild分別返回第一個和最后一個子元素節(jié)點，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>
效果：
2.2：
element.children[0] , element.children[element.children.length-1]分別返回第一個和最后一個子元素節(jié)點
代碼：
<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>
效果：
三：兄弟節(jié)點
1：返回兄弟節(jié)點
element.nextElementSibling，返回當(dāng)前元素下一個兄弟元素節(jié)點，找不到則返回null
element.previousElementSiblig，返回當(dāng)前元素上一個兄弟元素節(jié)點，找不到則返回null
IE9+
四：創(chuàng)建和添加元素節(jié)點
1：創(chuàng)建元素節(jié)點
1.1：
document.createElement()，動態(tài)創(chuàng)建元素節(jié)點
1.2：
innerHtml，創(chuàng)建節(jié)點
1.3：
document.write,創(chuàng)建節(jié)點，但導(dǎo)致頁面重繪
2：添加節(jié)點
2.1:
fartherelement.appendChild(childelement)，將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾
注意事項：創(chuàng)建和添加元素節(jié)點需要聯(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()中無引號。因為：規(guī)定變量或?qū)ο笫遣挥眉右柕?/strong>
效果：
2.2:
element.insertBefore(child,指定元素)，將一個節(jié)點添加到父節(jié)點指定節(jié)點前面
代碼：
<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>
效果：
五：刪除節(jié)點
1：刪除元素節(jié)點
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>
六：克隆節(jié)點
1：克隆節(jié)點（元素或文本）
element.cloneNode(),括號參數(shù)為空或者為false則為淺拷貝，只復(fù)制標(biāo)簽。括號參數(shù)為ture則復(fù)制標(biāo)簽和里面的內(nèi)容?？寺」?jié)點需要和添加節(jié)點一起使用
感興趣的朋友可以使用本站在線工具： http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果~
相關(guān)文章
性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議
這篇文章主要介紹了性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
在項目中有時會遇到大文件上傳，經(jīng)常會出現(xiàn)鏈接超時的問題，所以就需要使用文件分片上傳的方式來上傳大文件。下面通過本文給大家介紹js異步文件分片斷點上傳的實例代碼，需要的的朋友參考下吧2016-12-12
原生javascript兼容性：currentStyle、scrollTop、event以及綁定事件IE的綁定事件為attachEvent/detachEvent等等兼容性測試實例,感興趣的朋友可以參考下哈2013-07-07
在開發(fā)小程序的時候我們總是能遇到各種奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序返回上一頁的各種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
本文將介紹瀏覽器解壓和服務(wù)器解壓兩種在線解壓ZIP文件的方案。幫助大家用JavaScript實現(xiàn)在線解壓，感興趣的朋友可以參考下2021-05-05
這篇文章主要介紹了JavaScript極簡入門教程（二）：數(shù)組,本文主要講解了數(shù)組的創(chuàng)建和length屬性的介紹,其它方法屬性都沒有介紹,需要的朋友可以參考下2014-10-10
本篇文章主要是對JS獲取地址欄參數(shù)的幾種方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
用javascript對一個json數(shù)組深度賦值示例
本節(jié)主要介紹了用javascript對一個json數(shù)組深度賦值的具體實現(xiàn)，需要的朋友可以參考下2014-07-07
把網(wǎng)站設(shè)置為瀏覽器的首頁是我們做網(wǎng)站時經(jīng)常加到網(wǎng)站頂部的功能！下面這段代碼是強制設(shè)置為首頁的代碼！最好別用??！呵呵！2009-01-01
這篇文章主要為大家詳細介紹了JS實現(xiàn)點擊文本框改變背景顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08