當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript基础：元素增删改操作

發布時間：2023/12/8 javascript 24 豆豆

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

前面聊了一些對屬性的一些操作，當然js也可以對元素的添加刪除，畢竟在網頁中很多的頁面元素需要根據后臺返回的數據而呈現的。

當然先聊一下通過元素層級關系得到元素之前的節點。

節點

這個前面說過現在再重復一遍，網頁中所有的內容都是節點（標簽，屬性，文本，注釋等），在DOM中節點都是node來表示。

節點和元素區別

這個節點其實很元素區別很大下面進行演示，當然會使用的一些層級關系的方法，下面會具體說，現在主要了解元素和節點的區別。

<!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>規格包裝</li><li>售后保障</li><li>商品評價(100w)</li></ul> </div> <hr> <div id="tap clearfix"><ul id="test2"><li class="current">商品介紹</li><li>規格包裝</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("-----------節點測試----------------");var ndoes_child1 = elements_u1.childNodes;var len=ndoes_child1.length;for(var i=0;i<len;i++){console.log("第一個ul中的第",i,"個節點是： ",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,"個節點是： ",ndoes_child2[i]);}</script> </body> </html>

看一下控制臺的輸出：

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

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

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

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

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

nodeName屬性是節點名稱是只讀屬性：

元素節點nodeName的值：標簽名相同
屬性節點nodeName的值：屬性的名稱
文本節點nodeName的值：永遠是#text
注釋節點nodeName的值： #comment
文檔節點nodeName的值：#document

nodeValue屬性的值：

元素節點nodeValue的值：undefined或者null
屬性節點nodeValue的值：屬性的值
文本節點nodeValue的值：文本的內容
注釋節點nodeValue的值：注釋的內容

演示：

<!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>規格包裝</li><li>售后保障</li><li>商品評價(100w)</li></ul> </div><script>var elements_u1=document.getElementById("test1");console.log("-----------節點測試----------------" );// 得到屬性節點var attrinode=elements_u1.getAttributeNode("id")console.log("-----------ul屬性節點----------------",elements_u1.getAttributeNode("id"));console.log("-----------ul屬性節點----------------屬性節點nodeName是： ",attrinode.nodeName);console.log("-----------ul屬性節點----------------屬性節點nodeValue是： ",attrinode.nodeValue);console.log(" -----------ul屬性節點---------------屬性節點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,"個節點是： ",ndoes_child1[i]);console.log(" 第",i,"個節點nodeName是： ",ndoes_child1[i].nodeName);console.log(" 第",i,"個節點nodeValue是： ",ndoes_child1[i].nodeValue);console.log(" 第",i,"個節點nodeType是： ",ndoes_child1[i].nodeType);}</script> </body> </html>

結果：

層級元素-得到元素

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

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

父級節點或元素

得到父級節點格式如下：

node.parentNode // 返回父類節點 element.parentElement //返回的是父類元素標簽

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

演示：

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

子元素或子節點

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

node.childNodes // 返回子類節點沒有 element.children //返回的是子類元素標簽

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

補充得到第一個或者最后一個子節點或元素

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

node.firstChild // 返回第一個子類節點 element.firstElementChild //返回的是第一個子類元素標簽node.lastChild // 返回最后一個子類節點 element.lastElementChild //返回的是最后一個子類元素標簽

演示：

例子

<!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="#"> 艾爾登法環</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>

兄弟節點或元素

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

格式：

// 返回當前元素的下一個兄弟節點，找不到返回null node.nextSibling // 返回當前元素的上一個兄弟節點，找不到返回null node.previousSibling //返回當前元素的下一個兄弟元素，找不到返回null element.nextElementSibling //返回當前元素的上一個兄弟元素，找不到返回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="#"> 艾爾登法環</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('---標簽---')console.log(element_li.previousElementSibling)console.log(element_li.nextElementSibling) </script> </body> </html>

創建元素以及添加元素

創建元素或節點

創建的格式：

document.createElement('標簽')

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

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

<!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(元素或者節點);// 添加節點element.append(節點（非屬性節點）); // 添加屬性節點的時候用 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);// 這個地方不會生效的，如果這樣放在后面的編程也會無法運行console.log("start");ul_element1.appendChild(str1);console.log("end") </script> </body> </html>

添加節點

<!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.append(li_element1);ul_element1.append(li_element2);// 可見這樣是無法添加文本的其誰能添加元素ul_element1.append(str_node);// 添加一次后，如果再添加別處就會最后一個添加位置生效ul_element1.append(li_element1);// 添加節點的話可以之間添加文本console.log("start");ul_element1.append(str1);console.log("end") </script> </body> </html>

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

當然也可以進行添加在某些元素前面格式如下：

parentNode.insertBefore(newNode, referenceNode)

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

刪除元素

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

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

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

演示：

<!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)// 因為節點刪除了一個所以變得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>

克隆元素

元素當然也可以克隆，格式如下：

node.cloneNode([flag]);

node.cloneNode返回一個被克隆元素的副本
flag 默認是false，是淺拷貝，也就是克隆復制節點的本身，如果節點本身有子節點那就不會被拷貝，但是如果是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>

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

案例

<!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">發布</button></div> </div> <div id="conment_list_box"><strong>全部評論</strong><ul id="conment_list"><li>看見大樹守衛，我與宮崎老賊不共戴天，半天后真香。<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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机防火墙有用吗,win7自带防火墙有
下一篇：算法细节系列（20）：Word Ladd