一.節(jié)點(diǎn)操作 增 createElement(name)創(chuàng)建元素 appendChild();將元素添加 刪 獲得要?jiǎng)h除的元素 獲得它的父元素 使用removeChild()方法刪除

?

改 第一種方式:使用上面增和刪結(jié)合完成修改第二中方式:使用setAttribute();方法修改屬性 使用innerHTML屬性修改元素的內(nèi)容

?

查 <script type="text/javascript"> //在第一個(gè)div中動(dòng)態(tài)增加一個(gè)a標(biāo)簽. 該a標(biāo)簽點(diǎn)擊之后跳轉(zhuǎn)到百度首頁(yè).function addNode(){//1.獲得 第一個(gè)divvar div = document.getElementById("div_1");//2.創(chuàng)建a標(biāo)簽 createElement==>創(chuàng)建一個(gè)a標(biāo)簽 <a></a>var eleA = document.createElement("a");//3.為a標(biāo)簽添加屬性 <a href="http://www.baidu.com"></a>eleA.setAttribute("href", "http://www.baidu.com");//4.為a標(biāo)簽添加內(nèi)容 <a href="http://www.baidu.com">百度</a>eleA.innerHTML = "百度"; //5.將a標(biāo)簽添加到div中 div.appendChild(eleA);}//點(diǎn)擊后 刪除div區(qū)域2function deleteNode(){//1 獲得要?jiǎng)h除的div區(qū)域var div = document.getElementById("div_2");//2.獲得父親var parent = div.parentNode;//3 由父親操刀 parent.removeChild(div);}//點(diǎn)擊后 替換div區(qū)域3 為一個(gè)美女function updateNode(){//1 獲得要替換的div區(qū)域3var div = document.getElementById("div_3");//2創(chuàng)建img標(biāo)簽對(duì)象 <img />var img = document.createElement("img");//3添加屬性 <img src="001.jpg" />img.setAttribute("src", "001.JPG");//4.獲得父節(jié)點(diǎn)var parent = div.parentNode;//5.替換 parent.replaceChild(img, div);}//點(diǎn)擊后 將div區(qū)域4 克隆一份 添加到頁(yè)面底部function copyNode(){//1.獲取要克隆的divvar div = document.getElementById("div_4");//2.克隆 參數(shù)為true 那么克隆時(shí)克隆所有子元素. false 只克隆自己var div_copy = div.cloneNode(true);//3.獲得父親var parent = div.parentNode;//4.添加 parent.appendChild(div_copy);}</script>

?

二.修改 HTML DOM?

• 改變 HTML 內(nèi)容?

? ? ? ? 改變?cè)貎?nèi)容的最簡(jiǎn)答的方法是使用 innerHTML ，innerText。

??????? 改變 CSS 樣式 　　 <p id="p2">Hello world!</p> document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px

改變 HTML 屬性

? ? ? ? elementNode.setAttribute(name,value)

? ? ? ? elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

• 創(chuàng)建新的 HTML 元素?

? ? ? ? createElement(name)

• 刪除已有的 HTML 元素?

? ? ? ? elementNode.removeChild(node)

• 關(guān)于class的操作?

? ? ? ? elementNode.className

? ? ? ? elementNode.classList.add

? ? ? ? elementNode.classList.remove

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/icemonkey/p/10498890.html

總結(jié)

以上是生活随笔為你收集整理的JS DOM节点增删改查 属性设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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