溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript節點的增刪改查方法怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript節點的增刪改查方法怎么使用”吧!
document.createElement方法用來生成元素節點，并返回該節點。
var newDiv = document.createElement('div');createElement方法的參數為元素的標簽名，即元素節點的tagName屬性，對于 HTML 網頁大小寫不敏感，即參數為div或DIV返回的是同一種節點。如果參數里面包含尖括號（即<和>）會報錯。
document.createElement('<div>');
// DOMException: The tag name provided ('<div>') is not a valid name注意，document.createElement的參數可以是自定義的標簽名。
document.createElement('foo');新創建出的節點是 “孤兒節點”，這意味著它并沒有被掛載到 DOM 樹上，我們無法看見它。
必須繼續使用 appendChild() 或 insertBefore() 方法將孤兒節點插入到 DOM 樹上。
任何已經在 DOM 樹上的節點，都可以調用 appendChild() 方法，它可以將孤兒節點掛載到它的內部，成為它的最后一個子節點。
父節點.appendChild(孤兒節點);
【小案例】
<!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 oP = document.createElement('p');
// 設置內部文字
oP.innerText = '我是新來的';
// 上樹
oBox.appendChild(oP);
</script>
</body>
</html>
任何已經在 DOM 樹上的節點，都可以調用 insertBefore() 方法，它可以將孤兒節點掛載到它的內部，成為它的 “標桿子節點” 之前的節點。
父節點.insertBefore(孤兒節點, 標桿節點);
【小案例】
<!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');
// 創建孤兒節點
var oP = document.createElement('p');
// 設置內部文字
oP.innerText = '我是新來的';
// 上樹
oBox.insertBefore(oP, oPs[1]);
</script>
</body>
</html>
【動態創建一個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>
// 請動態創建出一個 20 行 12 列的表格
var mytable = document.getElementById('mytable');
for (var i = 0; i < 20; i++) {
// 創建了新的 tr 標簽
var tr = document.createElement('tr');
for (var j = 0; j < 12; j++) {
// 創建了新的 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>
// 請創建九九乘法表
var mytable = document.getElementById('mytable');
for (var i = 1; i <= 9; i++) {
// 創建了新的 tr 標簽
var tr = document.createElement('tr');
for (var j = 1; j <= i; j++) {
// 創建了新的 td 標簽
var td = document.createElement('td');
// 設置 td 內部的文字
td.innerText = i + '×' + j + '=' + (i * j);
// 讓tr追加 td 標簽
tr.appendChild(td);
}
// 讓 mytable 追加 tr 標簽
mytable.appendChild(tr);
}
</script>
</body>
</html>
如果將已經掛載到 DOM 樹上的節點成為 appendChild() 或者 insertBefore() 的參數，這個節點將會被移動。
新父節點.appendChild(已經有父親的節點);
新父節點.insertBefore(已經有父親的節點, 標桿子節點);
這意味著一個節點不能同時位于 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>
刪除現有的 DOM 節點，也需要關注兩個因素：首先由父節點刪除子節點，其次是要刪除哪個子節點。
父節點.removeChild(子節點) 刪除指定的子節點 推薦方式：子節點.parentNode.removeChild(子節點)
在 JavaScript 原生DOM操作中，要刪除元素必須通過父元素刪除 如不存在父子關系則刪除不成功 刪除節點和隱藏節點（display:none） 有區別的： 隱藏節點還是存在的，但是刪除，則從html中刪除節點
父節點.removeChild(要刪除子節點);
【小案例】
<!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節點0</p>
<p>我是p節點1</p>
<p>我是p節點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 刪除節點時一定是由父子關系。
replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數：
newnode : 必需，用于替換 oldnew 的對象。 oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。
newnode 必須先被建立。
**replaceWith()**方法使用參數節點，替換當前節點。參數可以是元素節點，也可以是文本節點。
var span = document.createElement('span');
el.replaceWith(span);上面代碼中，el節點將被span節點替換。
cloneNode() 方法可以克隆節點，克隆出的節點是 “孤兒節點”。
必須繼續使用 appendChild() 或 insertBefore() 方法將孤兒節點插入到 DOM 樹上。
var 孤兒節點 = 老節點.cloneNode(); var 孤兒節點 = 老節點.cloneNode(true);
參數是一個布爾值，表示是否采用深度克隆：如果為 true，則該節點的所有后代節點也會被克隆，如果為 false，則只克隆該節點本身。
【小案例】
<!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];
// 克隆節點
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];
// 克隆節點
var new_ul = theul.cloneNode(false);
box2.appendChild(new_ul);
</script>
</body>
</html>
到此，相信大家對“JavaScript節點的增刪改查方法怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
