當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript基础：元素增删改操作

發(fā)布時間：2023/12/8 javascript 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript基础：元素增删改操作小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前面聊了一些對屬性的一些操作，當(dāng)然js也可以對元素的添加刪除，畢竟在網(wǎng)頁中很多的頁面元素需要根據(jù)后臺返回的數(shù)據(jù)而呈現(xiàn)的。

當(dāng)然先聊一下通過元素層級關(guān)系得到元素之前的節(jié)點。

節(jié)點

這個前面說過現(xiàn)在再重復(fù)一遍，網(wǎng)頁中所有的內(nèi)容都是節(jié)點（標(biāo)簽，屬性，文本，注釋等），在DOM中節(jié)點都是node來表示。

節(jié)點和元素區(qū)別

這個節(jié)點其實很元素區(qū)別很大下面進(jìn)行演示，當(dāng)然會使用的一些層級關(guān)系的方法，下面會具體說，現(xiàn)在主要了解元素和節(jié)點的區(qū)別。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title><style>*{margin: 0px;padding: 0px;}div{width: 400px;margin: 10px auto;}li{list-style: none;float: left;padding: 10px;background-color: grey;border-bottom: 1px solid red;cursor: pointer;}.current{background-color: red;}.clearfix:after{display: block;content: "";clear: both;}</style> </head> <body> <div class="tap clearfix"><ul id="test1"><li class="current">商品介紹</li><li>規(guī)格包裝</li><li>售后保障</li><li>商品評價(100w)</li></ul> </div> <hr> <div id="tap clearfix"><ul id="test2"><li class="current">商品介紹</li><li>規(guī)格包裝</li><li>售后保障</li><li>商品評價(100w)</li></ul> </div><script>var elements_u1=document.getElementById("test1");var elements_u2=document.getElementById("test2");console.log("-----------元素測試----------------");// 首先得到自元素var elements_child1 = elements_u1.children;var len=elements_child1.length;for(var i=0;i<len;i++){console.log("第一個ul中的第",i,"個元素是： ",elements_child1[i]);}var elements_child2 = elements_u2.children;var len=elements_child2.length;for(var i=0;i<len;i++){console.log("第二個ul中的第",i,"個元素是： ",elements_child2[i]);}console.log("-----------節(jié)點測試----------------");var ndoes_child1 = elements_u1.childNodes;var len=ndoes_child1.length;for(var i=0;i<len;i++){console.log("第一個ul中的第",i,"個節(jié)點是： ",ndoes_child1[i]);}var ndoes_child2 = elements_u2.childNodes;var len=ndoes_child2.length;for(var i=0;i<len;i++){console.log("第二個ul中的第",i,"個節(jié)點是： ",ndoes_child2[i]);}</script> </body> </html>

看一下控制臺的輸出：

元素的話li元素和注釋換不換行沒有什么區(qū)別，但是節(jié)點就不一樣，其中最神奇的是為什么節(jié)點有#text是什么意思？

其實這個很容易理解，在元素之間之間可以輸入文字的，換行符其實也是一個文本的輸入的內(nèi)容，注釋自然也算。所以可以看出元素和節(jié)點的區(qū)別了。

節(jié)點一般至少擁有過三個基本屬性nodeType（節(jié)點類型），nodeName（節(jié)點名稱），nodeValue（節(jié)點值）；

其中最常用的一個屬性是nodeType：

元素節(jié)點nodeType的值為1
屬性節(jié)點nodeType的值為2
文本節(jié)點nodeType的值為3（文本節(jié)點包括文字，空格，換行等）
注釋節(jié)點nodeType的值為8
文檔節(jié)點nodeType的值為9

nodeName屬性是節(jié)點名稱是只讀屬性：

元素節(jié)點nodeName的值：標(biāo)簽名相同
屬性節(jié)點nodeName的值：屬性的名稱
文本節(jié)點nodeName的值：永遠(yuǎn)是#text
注釋節(jié)點nodeName的值： #comment
文檔節(jié)點nodeName的值：#document

nodeValue屬性的值：

元素節(jié)點nodeValue的值：undefined或者null
屬性節(jié)點nodeValue的值：屬性的值
文本節(jié)點nodeValue的值：文本的內(nèi)容
注釋節(jié)點nodeValue的值：注釋的內(nèi)容

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title><style>*{margin: 0px;padding: 0px;}div{width: 400px;margin: 10px auto;}li{list-style: none;float: left;padding: 10px;background-color: grey;border-bottom: 1px solid red;cursor: pointer;}.current{background-color: red;}.clearfix:after{display: block;content: "";clear: both;}</style> </head> <body> <div class="tap clearfix"><ul id="test1"><li class="current">商品介紹</li><li>規(guī)格包裝</li><li>售后保障</li><li>商品評價(100w)</li></ul> </div><script>var elements_u1=document.getElementById("test1");console.log("-----------節(jié)點測試----------------" );// 得到屬性節(jié)點var attrinode=elements_u1.getAttributeNode("id")console.log("-----------ul屬性節(jié)點----------------",elements_u1.getAttributeNode("id"));console.log("-----------ul屬性節(jié)點----------------屬性節(jié)點nodeName是： ",attrinode.nodeName);console.log("-----------ul屬性節(jié)點----------------屬性節(jié)點nodeValue是： ",attrinode.nodeValue);console.log(" -----------ul屬性節(jié)點---------------屬性節(jié)點nodeType是： ",attrinode.nodeType);var ndoes_child1 = elements_u1.childNodes;var len=ndoes_child1.length;for(var i=0;i<len;i++){console.log("第一個ul中的第",i,"個節(jié)點是： ",ndoes_child1[i]);console.log(" 第",i,"個節(jié)點nodeName是： ",ndoes_child1[i].nodeName);console.log(" 第",i,"個節(jié)點nodeValue是： ",ndoes_child1[i].nodeValue);console.log(" 第",i,"個節(jié)點nodeType是： ",ndoes_child1[i].nodeType);}</script> </body> </html>

結(jié)果：

層級元素-得到元素

前面元素是通過id，tap等得到元素，雖然可以得到元素，但是無法在js中了解元素之間的層級關(guān)系。而層級關(guān)系是什么？

簡單的說就是父子，兄弟關(guān)系。這樣得到的元素人，然后很容易理解元素之間的關(guān)系。

父級節(jié)點或元素

得到父級節(jié)點格式如下：

node.parentNode // 返回父類節(jié)點 element.parentElement //返回的是父類元素標(biāo)簽

parentNode可返回某節(jié)點的父節(jié)點，注意是最近的一個父節(jié)點，如果指定的節(jié)點沒有父節(jié)點就返回null。
parentElement返回父類元素標(biāo)簽，如果沒有返回null

演示：

因為無論父節(jié)點還是父元素都是一個元素，所以兩者一樣。

子元素或子節(jié)點

這個是得到元素或節(jié)點的子元素或者節(jié)點，格式如下：

node.childNodes // 返回子類節(jié)點沒有 element.children //返回的是子類元素標(biāo)簽

這兩個其實在前面演示節(jié)點和元素的區(qū)別的時候使用了，可以翻看一下上面。

補(bǔ)充得到第一個或者最后一個子節(jié)點或元素

在得到子元素后者節(jié)點的時候，還有兩個自帶的方法可以得到第一個和最后一個子元素或者子節(jié)點。

node.firstChild // 返回第一個子類節(jié)點 element.firstElementChild //返回的是第一個子類元素標(biāo)簽node.lastChild // 返回最后一個子類節(jié)點 element.lastElementChild //返回的是最后一個子類元素標(biāo)簽

演示：

例子

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title><style>*{margin: 0px;padding: 0px;}div{width: 400px;margin: 10px auto;}li{list-style: none;}.tab_list{ float: left;width: 100px;padding: 10px;text-align: center;background-color: grey;border-bottom: 1px solid red;cursor: pointer;}.tab_list ul{margin-top: 20px;}.clearfix:after{display: block;content: "";clear: both;}a{text-decoration: none;color: #cccccc;}</style> </head> <body> <div class="tap clearfix"><ul id="test1"><li class="tab_list"><a href="#"> 魂類游戲</a><ul style="display: none"><li><a href="#"> 黑魂系列</a></li><li><a href="#"> 支狼</a></li><li><a href="#"> 仁王</a></li><li><a href="#"> 艾爾登法環(huán)</a></li></ul></li><li class="tab_list"><a href="#"> 角色扮演游戲</a><ul style="display: none"><li><a href="#"> 巫師系列</a></li><li><a href="#"> 神秘海域系列</a></li><li><a href="#"> 消逝的光芒系列</a></li><li><a href="#">瘟疫系列 </a></li></ul></li></ul> </div><script>var li_list=document.getElementsByClassName("tab_list");var len=li_list.length;for(var i=0;i<len;i++){li_list[i].onmouseover=function () {console.log(this);this.children[1].style.display="block";}li_list[i].onmouseout=function () {console.log(this );this.children[1].style.display="none";}}</script> </body> </html>

兄弟節(jié)點或元素

這個就是在同一個層級的元素，這個兄弟元素主要分前后。

格式：

// 返回當(dāng)前元素的下一個兄弟節(jié)點，找不到返回null node.nextSibling // 返回當(dāng)前元素的上一個兄弟節(jié)點，找不到返回null node.previousSibling //返回當(dāng)前元素的下一個兄弟元素，找不到返回null element.nextElementSibling //返回當(dāng)前元素的上一個兄弟元素，找不到返回null element.previousElementSibling

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title><style>*{margin: 0px;padding: 0px;}div{width: 400px;margin: 10px auto;}li{list-style: none;}.tab_list{ float: left;width: 100px;padding: 10px;text-align: center;background-color: grey;border-bottom: 1px solid red;cursor: pointer;}.tab_list ul{margin-top: 20px;}.clearfix:after{display: block;content: "";clear: both;}a{text-decoration: none;color: #cccccc;}</style> </head> <body> <div class="tap clearfix"><ul id="test1"><li><a href="#"> 黑魂系列</a></li><li><a href="#"> 支狼</a></li><li><a href="#"> 仁王</a></li><li><a href="#"> 艾爾登法環(huán)</a></li></ul> </div><script>var element_ul=document.getElementById("test1");var element_li= element_ul.children(1);console.log('---元素---')console.log(element_li.previousSibling)console.log(element_li.nextSibling)console.log('---標(biāo)簽---')console.log(element_li.previousElementSibling)console.log(element_li.nextElementSibling) </script> </body> </html>

創(chuàng)建元素以及添加元素

創(chuàng)建元素或節(jié)點

創(chuàng)建的格式：

document.createElement('標(biāo)簽')

Document.createElement() 方法用于創(chuàng)建一個由標(biāo)簽名稱 tagName 指定的 HTML 元素。如果用戶代理無法識別 tagName，則會生成一個未知 HTML 元素 HTMLUnknownElement。

如果單獨(dú)創(chuàng)建一個元素的，而不將添加道某個元素下，其實沒有什么效果的。演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title> </head> <body> <div ><ul id="test1"></ul> </div><script>var li_element=document.createElement("li"); </script> </body> </html>

所以下面聊一下添加元素或者說將其添加到某個元素下面。

添加元素

格式：

//添加元素element.appendChild(元素或者節(jié)點);// 添加節(jié)點element.append(節(jié)點（非屬性節(jié)點）); // 添加屬性節(jié)點的時候用 ul_element1.setAttributeNode()

添加元素

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title> </head> <body> <div ><ul id="test1"><li>ABC</li></ul></div><script>var li_element1=document.createElement("li");var li_element2=document.createElement("li");var ul_element1=document.getElementById("test1");var str1="test1";var str2="test2";//元素添加這樣寫文本元素var str_node= document.createTextNode(str2);ul_element1.appendChild(li_element1);ul_element1.appendChild(li_element2);// 可見這樣是無法添加文本的其誰能添加元素ul_element1.appendChild(str_node);// 添加一次后，如果再添加別處就會最后一個添加位置生效ul_element1.appendChild(li_element1);// 這個地方不會生效的，如果這樣放在后面的編程也會無法運(yùn)行console.log("start");ul_element1.appendChild(str1);console.log("end") </script> </body> </html>

添加節(jié)點

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title> </head> <body> <div ><ul id="test1"><li>ABC</li></ul></div><script>var li_element1=document.createElement("li");var li_element2=document.createElement("li");var ul_element1=document.getElementById("test1");var str1="test1";var str2="test2";//當(dāng)然節(jié)點也可以這樣寫文本元素var str_node= document.createTextNode(str2);ul_element1.append(li_element1);ul_element1.append(li_element2);// 可見這樣是無法添加文本的其誰能添加元素ul_element1.append(str_node);// 添加一次后，如果再添加別處就會最后一個添加位置生效ul_element1.append(li_element1);// 添加節(jié)點的話可以之間添加文本console.log("start");ul_element1.append(str1);console.log("end") </script> </body> </html>

前面兩個添加其實可以看出插入位置是插入子元素的尾部或者說是末端。

當(dāng)然也可以進(jìn)行添加在某些元素前面格式如下：

parentNode.insertBefore(newNode, referenceNode)

不再演示，其使用過程很類似就不再單一演示，后面會來一個整體演示。

刪除元素

當(dāng)然也可以刪除元素，Node.removeChild() 方法從DOM中刪除一個子節(jié)點。返回刪除的節(jié)點。格式：

let oldChild = node.removeChild(child);//ORelement.removeChild(child);

被移除的這個子節(jié)點仍然存在于內(nèi)存中,只是沒有添加到當(dāng)前文檔的DOM樹中,因此,你還可以把這個節(jié)點重新添加回文檔中.

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title> </head> <body> <div ><ul id="test1"><li>ABC</li>test1</ul></div><script>var ul_element1=document.getElementById("test1");console.log(ul_element1.childNodes)console.log('------------')var li_element=document.getElementsByTagName("li")[0];var shan_li=ul_element1.removeChild(li_element);console.log("刪除的元素 ",shan_li)// 因為節(jié)點刪除了一個所以變得2個了console.log("======= ",ul_element1.childNodes[1])var shan_text=ul_element1.removeChild(ul_element1.childNodes[1]);console.log("刪除的文本 ",shan_text)</script> </body> </html>

上面的是父類刪除子類元素，還有一種方法是元素自己刪除自己格式如下：

Element.remove()

Element.remove() 方法，把對象從它所屬的 DOM 樹中刪除。

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title> </head> <body> <div id="div-01">Here is div-01</div> <div id="div-02">Here is div-02</div> <div id="div-03">Here is div-03</div><script>var el = document.getElementById('div-02');el.remove();</script> </body> </html>

克隆元素

元素當(dāng)然也可以克隆，格式如下：

node.cloneNode([flag]);

node.cloneNode返回一個被克隆元素的副本
flag 默認(rèn)是false，是淺拷貝，也就是克隆復(fù)制節(jié)點的本身，如果節(jié)點本身有子節(jié)點那就不會被拷貝，但是如果是true的話就是可以完全拷貝。

演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title> </head> <body> <div id="box"><div class="div">Here is div-01</div><div class="div">Here is div-02</div><div class="div">Here is div-03</div> </div><script>var box_element=document.getElementById('box');var el = document.getElementsByClassName('div')[0];console.log(el);box_element.appendChild(el.cloneNode(true))box_element.appendChild(el.cloneNode()) </script> </body> </html>

元素屬性本身也是元素自帶的，所以不算是子元素，所以可以默認(rèn)可以拷貝。

案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文檔</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}#conment_box ,#conment_list_box{width: 400px;margin: 10px auto;}#conment_list_box{border-top: 1px solid red;}textarea{resize: none;width: 360px;height: 40px;margin-top: 5px;margin-left: 40px;}button{margin-top: 5px;margin-left: 360px;}li{list-style: none;margin-top: 10px;}</style> </head> <body> <div id="conment_box"><div> <span>輸入評論:</span></div><div> <textarea id="text_"></textarea></div><div> <button onclick="bt_function()" id="bt">發(fā)布</button></div> </div> <div id="conment_list_box"><strong>全部評論</strong><ul id="conment_list"><li>看見大樹守衛(wèi)，我與宮崎老賊不共戴天，半天后真香。<a href="javascript:;">刪除</a></li></ul> </div><script>var element_text=document.getElementById("text_");var element_ul=document.getElementById("conment_list");function bt_function(){// alert(element_text.value.trim().length);if(element_text.value.trim().length>0){var text_value=element_text.value;var el=document.createElement("li");el.innerHTML=text_value +'<a href="javascript:;">刪除</a>';// el.innerHTML('<a href="javascript:;">刪除</a>')// console.log(el);// var a_el=d('')// //// el.appendChild(a_el);var el_first=element_ul.children[0];element_ul.insertBefore(el,el_first);element_text.value="";var a_els=document.getElementsByTagName("a");console.log(a_els);var len=a_els.length;for (var i=0;i<len;i++){a_els[i].onclick=function () {this.parentElement.remove();}}}} </script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的javascript基础：元素增删改操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机防火墙有用吗,win7自带防火墙有
下一篇：微信小程序支付(基于Java实现微信JS