JavaScript節(jié)點的增刪改查深入學(xué)習(xí)
節(jié)點的增刪改查
節(jié)點的創(chuàng)建
document.createElement方法用來生成元素節(jié)點，并返回該節(jié)點。
var newDiv = document.createElement('div');
createElement方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性，對于 HTML 網(wǎng)頁大小寫不敏感，即參數(shù)為div或DIV返回的是同一種節(jié)點。如果參數(shù)里面包含尖括號（即<和>）會報錯。
document.createElement('<div>');
// DOMException: The tag name provided ('<div>') is not a valid name
注意，document.createElement的參數(shù)可以是自定義的標簽名。
document.createElement('foo');
"孤兒節(jié)點"
新創(chuàng)建出的節(jié)點是 “孤兒節(jié)點”，這意味著它并沒有被掛載到 DOM 樹上，我們無法看見它。
必須繼續(xù)使用 appendChild() 或 insertBefore() 方法將孤兒節(jié)點插入到 DOM 樹上。
appendChild()
任何已經(jīng)在 DOM 樹上的節(jié)點，都可以調(diào)用 appendChild() 方法，它可以將孤兒節(jié)點掛載到它的內(nèi)部，成為它的最后一個子節(jié)點。
父節(jié)點.appendChild(孤兒節(jié)點);
【小案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>我是原本的段落0</p>
<p>我是原本的段落1</p>
<p>我是原本的段落2</p>
</div>
<script>
var oBox = document.getElementById('box');
// 創(chuàng)建孤兒節(jié)點
var oP = document.createElement('p');
// 設(shè)置內(nèi)部文字
oP.innerText = '我是新來的';
// 上樹
oBox.appendChild(oP);
</script>
</body>
</html>
insertBefore()
任何已經(jīng)在 DOM 樹上的節(jié)點，都可以調(diào)用 insertBefore() 方法，它可以將孤兒節(jié)點掛載到它的內(nèi)部，成為它的 “標桿子節(jié)點” 之前的節(jié)點。
父節(jié)點.insertBefore(孤兒節(jié)點, 標桿節(jié)點);
【小案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>我是原本的段落0</p>
<p>我是原本的段落1</p>
<p>我是原本的段落2</p>
</div>
<script>
var oBox = document.getElementById('box');
var oPs = oBox.getElementsByTagName('p');
// 創(chuàng)建孤兒節(jié)點
var oP = document.createElement('p');
// 設(shè)置內(nèi)部文字
oP.innerText = '我是新來的';
// 上樹
oBox.insertBefore(oP, oPs[1]);
</script>
</body>
</html>
節(jié)點創(chuàng)建小案例
【動態(tài)創(chuàng)建一個20行12列的表格】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {
width: 20px;
height: 20px;
border: 1px solid #000;
}
</style>
</head>
<body>
<table id="mytable"></table>
<script>
// 請動態(tài)創(chuàng)建出一個 20 行 12 列的表格
var mytable = document.getElementById('mytable');
for (var i = 0; i < 20; i++) {
// 創(chuàng)建了新的 tr 標簽
var tr = document.createElement('tr');
for (var j = 0; j < 12; j++) {
// 創(chuàng)建了新的 td 標簽
var td = document.createElement('td');
// 讓 tr 追加 td 標簽
tr.appendChild(td);
}
// 讓 mytable 追加 tr 標簽
mytable.appendChild(tr);
}
</script>
</body>
</html>
【九九乘法表】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {
width: 80px;
height: 30px;
padding-left: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<table id="mytable"></table>
<script>
// 請創(chuàng)建九九乘法表
var mytable = document.getElementById('mytable');
for (var i = 1; i <= 9; i++) {
// 創(chuàng)建了新的 tr 標簽
var tr = document.createElement('tr');
for (var j = 1; j <= i; j++) {
// 創(chuàng)建了新的 td 標簽
var td = document.createElement('td');
// 設(shè)置 td 內(nèi)部的文字
td.innerText = i + '×' + j + '=' + (i * j);
// 讓tr追加 td 標簽
tr.appendChild(td);
}
// 讓 mytable 追加 tr 標簽
mytable.appendChild(tr);
}
</script>
</body>
</html>
移動節(jié)點
如果將已經(jīng)掛載到 DOM 樹上的節(jié)點成為 appendChild() 或者 insertBefore() 的參數(shù)，這個節(jié)點將會被移動。
新父節(jié)點.appendChild(已經(jīng)有父親的節(jié)點);
新父節(jié)點.insertBefore(已經(jīng)有父親的節(jié)點, 標桿子節(jié)點);
這意味著一個節(jié)點不能同時位于 DOM 樹的兩個位置。
【小案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
<p id="para">我是段落</p>
</div>
<div id="box2">
<p>我是box2的原有p標簽</p>
<p>我是box2的原有p標簽</p>
<p>我是box2的原有p標簽</p>
<p>我是box2的原有p標簽</p>
</div>
<script>
var box2 = document.getElementById('box2');
var para = document.getElementById('para');
var ps_inbox2 = box2.getElementsByTagName('p');
box2.insertBefore(para, ps_inbox2[2]);
</script>
</body>
</html>
刪除節(jié)點
刪除現(xiàn)有的 DOM 節(jié)點，也需要關(guān)注兩個因素：首先由父節(jié)點刪除子節(jié)點，其次是要刪除哪個子節(jié)點。
父節(jié)點.removeChild(子節(jié)點) 刪除指定的子節(jié)點 推薦方式：子節(jié)點.parentNode.removeChild(子節(jié)點)
在 JavaScript 原生DOM操作中，要刪除元素必須通過父元素刪除 如不存在父子關(guān)系則刪除不成功 刪除節(jié)點和隱藏節(jié)點（display:none） 有區(qū)別的： 隱藏節(jié)點還是存在的，但是刪除，則從html中刪除節(jié)點
父節(jié)點.removeChild(要刪除子節(jié)點);
【小案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>我是p節(jié)點0</p>
<p>我是p節(jié)點1</p>
<p>我是p節(jié)點2</p>
</div>
<script>
var box = document.getElementById('box');
var the_first_p = box.getElementsByTagName('p')[0];
box.removeChild(the_first_p);
</script>
</body>
</html>
結(jié)論：removeChild 刪除節(jié)點時一定是由父子關(guān)系。
替換節(jié)點
replaceChild 實現(xiàn)子節(jié)點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。 oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
- 當(dāng) oldnode 被替換時，所有與之相關(guān)的屬性內(nèi)容都將被移除。
- newnode 必須先被建立。
**replaceWith()**方法使用參數(shù)節(jié)點，替換當(dāng)前節(jié)點。參數(shù)可以是元素節(jié)點，也可以是文本節(jié)點。
var span = document.createElement('span');
el.replaceWith(span);
上面代碼中，el節(jié)點將被span節(jié)點替換。
克隆節(jié)點
cloneNode() 方法可以克隆節(jié)點，克隆出的節(jié)點是 “孤兒節(jié)點”。
必須繼續(xù)使用 appendChild() 或 insertBefore() 方法將孤兒節(jié)點插入到 DOM 樹上。
var 孤兒節(jié)點 = 老節(jié)點.cloneNode(); var 孤兒節(jié)點 = 老節(jié)點.cloneNode(true);
參數(shù)是一個布爾值，表示是否采用深度克?。喝绻麨?true，則該節(jié)點的所有后代節(jié)點也會被克隆，如果為 false，則只克隆該節(jié)點本身。
【小案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
<ul>
<li>牛奶</li>
<li>咖啡</li>
<li>可樂</li>
</ul>
</div>
<div id="box2"></div>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var theul = box1.getElementsByTagName('ul')[0];
// 克隆節(jié)點
var new_ul = theul.cloneNode(true);
box2.appendChild(new_ul);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
<ul>
<li>牛奶</li>
<li>咖啡</li>
<li>可樂</li>
</ul>
</div>
<div id="box2"></div>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var theul = box1.getElementsByTagName('ul')[0];
// 克隆節(jié)點
var new_ul = theul.cloneNode(false);
box2.appendChild(new_ul);
</script>
</body>
</html>
總結(jié)
結(jié)論：
createElement 動態(tài)創(chuàng)建任意 DOM 節(jié)點
cloneNode 復(fù)制現(xiàn)有的 DOM 節(jié)點，傳入?yún)?shù) true 會復(fù)制所有子節(jié)點
appendChild 在末尾（結(jié)束標簽前）插入節(jié)點
cloneNode 復(fù)制現(xiàn)有的 DOM 節(jié)點，傳入?yún)?shù) true 會復(fù)制所有子節(jié)點
insertBefore 在父節(jié)點中任意子節(jié)點之前插入新節(jié)點
removeChild 刪除父節(jié)點的子節(jié)點
replaceChild 用一個孤兒節(jié)點替換父元素的子結(jié)點
replaceWith 用一個孤兒節(jié)點替換當(dāng)前節(jié)點
以上就是JavaScript節(jié)點的增刪改查深入學(xué)習(xí)的詳細內(nèi)容，更多關(guān)于JavaScript節(jié)點增刪改查的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了在js中修改html body的樣式，下面文章圍繞js修改html 和body樣式的相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
JavaScript生成器函數(shù)Generator?Functions優(yōu)缺點特性詳解
這篇文章主要為大家介紹了JavaScript生成器函數(shù)Generator?Functions的特性及優(yōu)點詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序 數(shù)組（增，刪，改，查）等操作實例詳解的相關(guān)資料,這里對小程序的數(shù)組進行操作，簡單實例，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 小程序制作及動畫詳解的相關(guān)資料,這里對小程序制作進行了詳解，介紹動畫部分的知識，需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了JavaScript基礎(chǔ)之函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-12-12
這篇文章主要為大家介紹了git?hooks的作用及創(chuàng)建使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Three.js添加陰影和簡單后期處理實現(xiàn)示例詳解
這篇文章主要為大家介紹了Three.js添加陰影和簡單后期處理實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
JavaScript知識:構(gòu)造函數(shù)也是函數(shù)
構(gòu)造函數(shù)就是初始化一個實例對象，對象的prototype屬性是繼承一個實例對象。本文給大家分享javascript構(gòu)造函數(shù)詳解，對js構(gòu)造函數(shù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2021-08-08
這篇文章主要介紹了 quickjs 封裝 JavaScript 沙箱，在前文 JavaScript 沙箱探索 中聲明了沙箱的接口，并且給出了一些簡單的執(zhí)行任意第三方 js 腳本的代碼，但并未實現(xiàn)完整的 IJavaScriptShadowbox，下面便講一下如何基于 quickjs 實現(xiàn),需要的朋友可以參考一下2021-10-10
這篇文章主要為大家介紹了canvas中如何實現(xiàn)物體的框選的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08