JavaScript針對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查用法實(shí)例
本文實(shí)例講述了JavaScript針對(duì)網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查用法。分享給大家供大家參考。具體分析如下：
一、基本概念
這部分也就是所謂的“HTML DOM”，所謂HTML DOM也就是Web頁(yè)面加載規(guī)則，是一個(gè)規(guī)則，也就是網(wǎng)頁(yè)組成的基本公式。
也就是所有網(wǎng)頁(yè)都必須按照：<html><body></body></html>……的規(guī)則編寫，也按照這樣的規(guī)則加載。
所謂的“網(wǎng)頁(yè)節(jié)點(diǎn)”，也叫“DOM節(jié)點(diǎn)”的通俗解釋，例如html節(jié)點(diǎn)下的內(nèi)容就是<html></html>之間所有內(nèi)容，body節(jié)點(diǎn)下的內(nèi)容就是<body></body>之間的所有內(nèi)容。
HTML DOM是這樣規(guī)定的：1、整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)；2、每個(gè) HTML 標(biāo)簽（意指<body><table>等html標(biāo)簽，而不是單純的<html>標(biāo)簽）是一個(gè)元素節(jié)點(diǎn)；3、包含在 HTML 元素中的文本是文本節(jié)點(diǎn)；4、每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
譬如，可以把某個(gè)頁(yè)面畫成如下的DOM節(jié)點(diǎn)樹(shù)：
HTML DOM的官方定義如下：HTML DOM是HTML Document Object Model(文檔對(duì)象模型)的縮寫，HTML DOM則是專門適用與HTML/XHTML的文檔對(duì)象模型。熟悉軟件開(kāi)發(fā)的人員可以將HTML DOM理解為網(wǎng)頁(yè)的API。它將網(wǎng)頁(yè)中的各個(gè)元素都看作一個(gè)個(gè)對(duì)象，從而使網(wǎng)頁(yè)中的元素也可以被計(jì)算機(jī)語(yǔ)言獲取或者編輯。 例如Javascript就可以利用HTML DOM動(dòng)態(tài)的修改網(wǎng)頁(yè)。
而使用JavaScript能輕松對(duì)于這些DOM節(jié)點(diǎn)進(jìn)行網(wǎng)頁(yè)節(jié)點(diǎn)的增刪改查的控制。
二、基本目標(biāo)
使用JavaScript對(duì)網(wǎng)頁(yè)的節(jié)點(diǎn)進(jìn)行增刪改查的操作。在一個(gè)網(wǎng)頁(yè)中有：
1、”增加節(jié)點(diǎn)“按鈕，此按鈕在增加節(jié)點(diǎn)的同時(shí)，增加與”替換按鈕“相關(guān)聯(lián)的下拉菜單中的節(jié)點(diǎn)選項(xiàng)。如果網(wǎng)頁(yè)中存在著9個(gè)節(jié)點(diǎn)，則不讓添加并彈窗警告。
2、”刪除最后一個(gè)節(jié)點(diǎn)“按鈕，此按鈕在減少節(jié)點(diǎn)的同時(shí)，減少與”替換按鈕“相關(guān)聯(lián)的下拉菜單中的節(jié)點(diǎn)選項(xiàng)。
3、”替換節(jié)點(diǎn)內(nèi)容“按鈕，首先選擇需要操作的節(jié)點(diǎn)，然后輸入要替換的內(nèi)容，就會(huì)替換相應(yīng)的節(jié)點(diǎn)。
4、如果網(wǎng)頁(yè)中沒(méi)有任何節(jié)點(diǎn)，則不讓刪除與替換，并彈窗警告。
三、制作過(guò)程
不用配置任何環(huán)境，直接在網(wǎng)頁(yè)中寫入如下代碼，具體代碼如下，下面再一部分一部分進(jìn)行說(shuō)明：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsdivnode</title>
<script type="text/javascript">
var i = 0;
function createnode() {
if (i < 9) {
i++;
var option = document.createElement("option");
option.value = i;
option.innerHTML = "Node" + i.toString();
document.getElementById("number").appendChild(option);
var p = document.createElement("p");
p.innerHTML = "Node" + i.toString();
document.getElementById("d").appendChild(p);
} else
alert("爺行行好了，太多節(jié)點(diǎn)，臣妾做不到啊~");
}
function removenode() {
if (i > 0) {
i--;
var s = document.getElementById("number");
s.removeChild(s.lastChild);
var d = document.getElementById("d");
d.removeChild(d.lastChild);
} else
alert("沒(méi)有節(jié)點(diǎn)，刪個(gè)毛線啊~");
/*var ps = d.getElementsByTagName("p");*/
/*document.getElementById("d").removeChild(ps[9]); */
}
function replacenode() {
if (i > 0) {
var d = document.getElementById("d");
var p = document.createElement("p");
p.innerHTML = document.getElementById("text").value;
var ps = d.getElementsByTagName("p")
d.replaceChild(p, ps[document.getElementById("number").value - 1]);
} else
alert("沒(méi)有節(jié)點(diǎn)，替換個(gè)毛線啊~");
}
</script>
</head>
<body>
<input type="button" value="創(chuàng)建節(jié)點(diǎn)" onclick="createnode()" />
<input type="button" value="刪除最后一個(gè)節(jié)點(diǎn)" onclick="removenode()" />
<select id="number"></select>
<input type="text" id="text" />
<input type="button" value="替換節(jié)點(diǎn)內(nèi)容" onclick="replacenode()" />
<div id="d">
</div>
</body>
</html>
1、<body>節(jié)點(diǎn)
<!--按鈕x2，此兩個(gè)按鈕都有onclick動(dòng)作指向相應(yīng)的函數(shù)-->
<input type="button" value="創(chuàng)建節(jié)點(diǎn)" onclick="createnode()" />
<input type="button" value="刪除最后一個(gè)節(jié)點(diǎn)" onclick="removenode()" />
<!--一個(gè)沒(méi)有<option>子節(jié)點(diǎn)的下拉菜單，由createnode()節(jié)點(diǎn)的同時(shí)，同時(shí)添加。-->
<select id="number"></select>
<!--輸入框x1，注意設(shè)置好id，replacenode()要取這個(gè)文本框的值-->
<input type="text" id="text" />
<!--按鈕x1，同上面的按鈕x2-->
<input type="button" value="替換節(jié)點(diǎn)內(nèi)容" onclick="replacenode()" />
<!--一個(gè)什么都沒(méi)有的空?qǐng)D層，作為<p>的父節(jié)點(diǎn)，添加的<p>皆是此<div>節(jié)點(diǎn)的子節(jié)點(diǎn)-->
<div id="d">
</div>
</body>
2、<head>節(jié)點(diǎn)
<!--網(wǎng)頁(yè)使用的編碼、標(biāo)題，這不重要，關(guān)鍵是下面的js腳本部分-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsdivnode</title>
<script type="text/javascript">
/*記錄了當(dāng)前網(wǎng)頁(yè)有多少個(gè)節(jié)點(diǎn)的全局變量*/
var i = 0;
/*下方有3個(gè)函數(shù)。當(dāng)按鈕被點(diǎn)擊時(shí)候則被調(diào)用*/
function createnode() {
/*如果網(wǎng)頁(yè)中的節(jié)點(diǎn)少于9個(gè)，才工作，否則彈窗*/
if (i < 9) {
/*每多加一個(gè)節(jié)點(diǎn)，記錄了當(dāng)前網(wǎng)頁(yè)有多少個(gè)節(jié)點(diǎn)的全局變量i+1*/
i++;
/*創(chuàng)建option節(jié)點(diǎn)，然后其指針名字也叫option*/
var option = document.createElement("option");
/*聲明創(chuàng)建的option節(jié)點(diǎn)的value屬性為當(dāng)前i的值，也就是當(dāng)i=1時(shí)，有<option value=1></option>這樣的子節(jié)點(diǎn)了。*/
/*部分網(wǎng)頁(yè)說(shuō)用setAttribute()方法去設(shè)置屬性，親自實(shí)踐發(fā)現(xiàn)并不好用*/
option.value = i;
/*設(shè)置option節(jié)點(diǎn)下面的文本，此語(yǔ)句過(guò)后，子節(jié)點(diǎn)變?yōu)?lt;option value=1>Node1</option>*/
option.innerHTML = "Node" + i.toString();
/*<select>父節(jié)點(diǎn)的ID是number，此語(yǔ)句要求在在<select></select>父節(jié)點(diǎn)下增加<option value=1>Node1</option>*/
document.getElementById("number").appendChild(option);
/*道理與上面同，在<div>父節(jié)點(diǎn)下增加<p>子節(jié)點(diǎn)，且<p>子節(jié)點(diǎn)下的文本值為Node1*/
var p = document.createElement("p");
p.innerHTML = "Node" + i.toString();
document.getElementById("d").appendChild(p);
} else
alert("爺行行好了，太多節(jié)點(diǎn)，臣妾做不到啊~");
}
function removenode() {
/*如果網(wǎng)頁(yè)中的節(jié)點(diǎn)多于0個(gè)，也就是存在節(jié)點(diǎn)，才工作，否則彈窗*/
if (i > 0) {
/*每減少一個(gè)節(jié)點(diǎn)，記錄了當(dāng)前網(wǎng)頁(yè)有多少個(gè)節(jié)點(diǎn)的全局變量i-1*/
i--;
/*定義指向<select>父節(jié)點(diǎn)的指針s*/
var s = document.getElementById("number");
/*刪除<select>父節(jié)點(diǎn)旗下的最后一個(gè)子節(jié)點(diǎn)，也就是<option>，如果你要?jiǎng)h第一個(gè)則參數(shù)變?yōu)閟.firstChild*/
s.removeChild(s.lastChild);
/*道理同上，刪除<div>圖層下的最后一個(gè)子節(jié)點(diǎn)*/
var d = document.getElementById("d");
d.removeChild(d.lastChild);
/*如果你要?jiǎng)h除<div>下的第8個(gè)<p>請(qǐng)如下操作*/
/*ps是指向<p>子節(jié)點(diǎn)集的指針*/
/*var ps = d.getElementsByTagName("p");*/
/*document.getElementById("d").removeChild(ps[9]); */
} else
alert("沒(méi)有節(jié)點(diǎn)，刪個(gè)毛線啊~");
}
function replacenode() {
/*如果網(wǎng)頁(yè)中的節(jié)點(diǎn)多于0個(gè)，也就是存在節(jié)點(diǎn)，才工作，否則彈窗*/
if (i > 0) {
/*定義指向<div>父節(jié)點(diǎn)的指針d*/
var d = document.getElementById("d");
/*創(chuàng)建一個(gè)<p></p>節(jié)點(diǎn)*/
var p = document.createElement("p");
/*拿到文本框所輸入的東西，放到<p></p>節(jié)點(diǎn)里面*/
p.innerHTML = document.getElementById("text").value;
/*ps是指向<div>父節(jié)點(diǎn)下的<p>子節(jié)點(diǎn)集、子節(jié)點(diǎn)群的指針*/
var ps = d.getElementsByTagName("p")
/*讓剛剛創(chuàng)建的節(jié)點(diǎn)替換<div>下的第n個(gè)<p>子節(jié)點(diǎn)，其中n是現(xiàn)在下拉列表所選擇的值-1，之所以要-1，是因?yàn)樽庸?jié)點(diǎn)集、子節(jié)點(diǎn)群的計(jì)數(shù)是從0開(kāi)始的，而我們?nèi)说挠?jì)數(shù)是從1開(kāi)始的。*/
d.replaceChild(p, ps[document.getElementById("number").value - 1]);
} else
alert("沒(méi)有節(jié)點(diǎn)，替換個(gè)毛線啊~");
}
</script>
</head>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登錄彈框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
js找出5個(gè)數(shù)中最大的一個(gè)數(shù)和倒數(shù)第二大的數(shù)實(shí)現(xiàn)方法示例小結(jié)
這篇文章主要介紹了js找出5個(gè)數(shù)中最大的一個(gè)數(shù)和倒數(shù)第二大的數(shù)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組遍歷、排序、判斷、比較等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
微信小程序的出現(xiàn)給我們提供了一種使用應(yīng)用的新方式和體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于uniapp打包成微信小程序的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
JavaScript中的this總是讓人迷惑，應(yīng)該是js眾所周知的坑之一。 個(gè)人也覺(jué)得js中的this不是一個(gè)好的設(shè)計(jì)，由于this晚綁定的特性，它可以是全局對(duì)象，當(dāng)前對(duì)象，或者…有人甚至因?yàn)榭哟蠖挥胻his2015-12-12
這篇文章主要針對(duì)Js的Array數(shù)組對(duì)象為大家進(jìn)行詳細(xì)的講解，感興趣的小伙伴們可以參考一下2016-02-02
下面小編就為大家?guī)?lái)一篇淺談JS中的常用選擇器及屬性、方法的調(diào)用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了微信小程序開(kāi)發(fā)的基本流程步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
js 事件對(duì)象 鼠標(biāo)滾輪效果演示說(shuō)明
第三篇，繼續(xù)總結(jié)事件對(duì)象 先看看監(jiān)聽(tīng)鼠標(biāo)滾輪事件能幫我們做什么2010-05-05
詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
canvas可以在頁(yè)面中設(shè)定一個(gè)區(qū)域，再利用JavaScript動(dòng)態(tài)地繪制圖像。本文將利用canvas繪制一個(gè)可以動(dòng)的環(huán)形進(jìn)度條。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試2022-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)一鍵換膚效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07