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