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