JavaScript節(jié)點的增刪改查深入學習
節(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');
// 設置內(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');
// 設置內(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');
// 設置 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é)點，也需要關注兩個因素：首先由父節(jié)點刪除子節(jié)點，其次是要刪除哪個子節(jié)點。
父節(jié)點.removeChild(子節(jié)點) 刪除指定的子節(jié)點 推薦方式：子節(jié)點.parentNode.removeChild(子節(jié)點)
在 JavaScript 原生DOM操作中，要刪除元素必須通過父元素刪除 如不存在父子關系則刪除不成功 刪除節(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>
結論：removeChild 刪除節(jié)點時一定是由父子關系。
替換節(jié)點
replaceChild 實現(xiàn)子節(jié)點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。 oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
- 當 oldnode 被替換時，所有與之相關的屬性內(nèi)容都將被移除。
- newnode 必須先被建立。
**replaceWith()**方法使用參數(shù)節(jié)點，替換當前節(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>
總結
結論：
createElement 動態(tài)創(chuàng)建任意 DOM 節(jié)點
cloneNode 復制現(xiàn)有的 DOM 節(jié)點，傳入?yún)?shù) true 會復制所有子節(jié)點
appendChild 在末尾（結束標簽前）插入節(jié)點
cloneNode 復制現(xiàn)有的 DOM 節(jié)點，傳入?yún)?shù) true 會復制所有子節(jié)點
insertBefore 在父節(jié)點中任意子節(jié)點之前插入新節(jié)點
removeChild 刪除父節(jié)點的子節(jié)點
replaceChild 用一個孤兒節(jié)點替換父元素的子結點
replaceWith 用一個孤兒節(jié)點替換當前節(jié)點
以上就是JavaScript節(jié)點的增刪改查深入學習的詳細內(nèi)容，更多關于JavaScript節(jié)點增刪改查的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了JavaScript原型鏈中函數(shù)和對象的理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
前端Website?sitemap.xml文件搜索引擎優(yōu)化
這篇文章主要為大家介紹了前端Website的sitemap.xml文件和搜索引擎優(yōu)化實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了JS原始類型為什么能調(diào)用方法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了JS實現(xiàn)密碼箱小程序再也不用記各種密碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了JavaScript異步操作中串行和并行，主要內(nèi)容是寫一下js中es5和es6針對異步函數(shù)，串行執(zhí)行和并行執(zhí)行的方案。已經(jīng)串行和并行結合使用的例子。,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家介紹了不可變數(shù)據(jù)方案之immer.js原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了使用?render?函數(shù)封裝高擴展的組件，vue?官網(wǎng)給出的?render?函數(shù)的例子只能體現(xiàn)?render?函數(shù)的優(yōu)雅的一方面，卻不能看出其擴展性，今天就來封裝一個體現(xiàn)其擴展性的組件,需要的朋友可以參考一下2021-12-12
微信小程序 網(wǎng)絡請求（post請求，get請求）
這篇文章主要介紹了微信小程序 網(wǎng)絡請求（post請求，get請求）的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JavaScript實現(xiàn)棧結構詳細過程，棧即stack它是一種受限的線性表，后進先出LIFO，更多具體的內(nèi)容，需要的小伙伴參考下面文章的詳細內(nèi)容2021-12-12
這篇文章主要為大家介紹了response body加密如何破解的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01