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,是一個只讀屬性，返回所有子元素節(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：返回第一個和最后一個子節(jié)點(diǎn)
2.1:
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>
效果：
2.2：
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>
效果：
三：兄弟節(jié)點(diǎn)
1：返回兄弟節(jié)點(diǎn)
element.nextElementSibling，返回當(dāng)前元素下一個兄弟元素節(jié)點(diǎn)，找不到則返回null
element.previousElementSiblig，返回當(dāng)前元素上一個兄弟元素節(jié)點(diǎn)，找不到則返回null
IE9+
四：創(chuàng)建和添加元素節(jié)點(diǎn)
1：創(chuàng)建元素節(jié)點(diǎn)
1.1：
document.createElement()，動態(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)致頁面重繪
2：添加節(jié)點(diǎn)
2.1:
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>
效果：
2.2:
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>
效果：
五：刪除節(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(),括號參數(shù)為空或者為false則為淺拷貝，只復(fù)制標(biāo)簽。括號參數(shù)為ture則復(fù)制標(biāo)簽和里面的內(nèi)容。克隆節(jié)點(diǎn)需要和添加節(jié)點(diǎn)一起使用
感興趣的朋友可以使用本站在線工具： http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運(yùn)行效果~
- JS獲取節(jié)點(diǎn)的兄弟,父級,子級元素的方法
- 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é)點(diǎn)的方法示例
- JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作示例
- JavaScript給每一個li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法
- JS獲取子、父、兄節(jié)點(diǎn)方法小結(jié)
相關(guān)文章
使用JavaScript實(shí)現(xiàn)一個簡易的熱更新
熱更新是指在應(yīng)用程序運(yùn)行時,對程序的部分內(nèi)容進(jìn)行更新,而無需重啟整個應(yīng)用程序,熱更新是在不停止整個應(yīng)用程序的情況下,將新的代碼、資源或配置應(yīng)用于正在運(yùn)行的應(yīng)用程序,本文講給大家介紹一下使用JavaScript實(shí)現(xiàn)一個簡易的熱更新,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了js canvas實(shí)現(xiàn)紅包照片效果2018-08-08
js實(shí)現(xiàn)的光標(biāo)位置工具函數(shù)示例
這篇文章主要介紹了js實(shí)現(xiàn)的光標(biāo)位置工具函數(shù),結(jié)合實(shí)例形式分析了JavaScript操作textarea文本框光標(biāo)位置及文本操作相關(guān)技巧,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了百度移動版的url編碼解碼的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
關(guān)于JavaScript遞歸經(jīng)典案例題詳析
遞歸是算法中一個重要的解法,因此,有必要單拎出來講講,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript遞歸經(jīng)典案例題的相關(guān)資料,需要的朋友可以參考下2021-07-07
這是一個由JS實(shí)現(xiàn)的網(wǎng)頁密碼保護(hù)代碼，在進(jìn)入網(wǎng)頁前需要在彈出框中輸入密碼才可以，不過現(xiàn)在不怎么用了，一般情況下，目前都在后臺處理這種功能，用戶輸入用戶名和密碼后交給服務(wù)器處理，然后再返回信息，若登錄無誤就可看到某些內(nèi)容2013-04-04
JavaScript中async和await的使用及隊(duì)列詳情
這篇文章主要介紹了JavaScript中async和await的使用及隊(duì)列詳情，主要圍繞js中async和await簡單解析展開面試中可能會問到的關(guān)于隊(duì)列的一些場景和知識點(diǎn),需要的朋友可以參考一下2022-07-07
做輸入校驗(yàn)的時候如果你前端框架用的是bootstrap的話，首推bootstrapValidator校驗(yàn)方式，下面通過本文給大家分享下校驗(yàn)流程，一起看看吧2016-12-12
JS版獲取字符串真實(shí)長度和取固定長度的字符串函數(shù)
JS版獲取字符串真實(shí)長度和取固定長度的字符串函數(shù)...2007-04-04
這篇文章主要介紹了TypeScript常見類型及應(yīng)用示例講解，本章我們會講解?JavaScript?中最常見的一些類型，以及對應(yīng)的描述方式，有需要的朋友可以借鑒參考下2022-02-02