當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS中DOM节点的CRUD
生活随笔
收集整理的這篇文章主要介紹了
JS中DOM节点的CRUD
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//獲取body標(biāo)簽//var body = document.getElementsByTagName("body")[0];/** 在document中有一個屬性body，它保存的是body的引用*/var body = document.body;/** document.documentElement保存的是html根標(biāo)簽*/var html = document.documentElement;//console.log(html);/** document.all代表頁面中所有的元素*/var all = document.all;//console.log(all.length);/*for(var i=0 ; i<all.length ; i++){console.log(all[i]);}*///all = document.getElementsByTagName("*");//console.log(all.length);/** 根據(jù)元素的class屬性值查詢一組元素節(jié)點對象* getElementsByClassName()可以根據(jù)class屬性值獲取一組元素節(jié)點對象，* 但是該方法不支持IE8及以下的瀏覽器*///var box1 = document.getElementsByClassName("box1");//console.log(box1.length);//獲取頁面中的所有的div//var divs = document.getElementsByTagName("div");//獲取class為box1中的所有的div//.box1 div/** document.querySelector()* - 需要一個選擇器的字符串作為參數(shù)，可以根據(jù)一個CSS選擇器來查詢一個元素節(jié)點對象* - 雖然IE8中沒有g(shù)etElementsByClassName()但是可以使用querySelector()代替* - 使用該方法總會返回唯一的一個元素，如果滿足條件的元素有多個，那么它只會返回第一個*/var div = document.querySelector(".box1 div");var box1 = document.querySelector(".box1")//console.log(div.innerHTML);//console.log(box1.innerHTML);/** document.querySelectorAll()* - 該方法和querySelector()用法類似，不同的是它會將符合條件的元素封裝到一個數(shù)組中返回* - 即使符合條件的元素只有一個，它也會返回數(shù)組*/box1 = document.querySelectorAll(".box1");box1 = document.querySelectorAll("#box2");console.log(box1);};</script></head><body><div id="box2"></div> <div class="box1">我是第一個box1 <div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div></div></body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//創(chuàng)建一個"廣州"節(jié)點,添加到#city下myClick("btn01",function(){//創(chuàng)建廣州節(jié)點 <li>廣州</li>//創(chuàng)建li元素節(jié)點/** document.createElement()* 可以用于創(chuàng)建一個元素節(jié)點對象，* 它需要一個標(biāo)簽名作為參數(shù)，將會根據(jù)該標(biāo)簽名創(chuàng)建元素節(jié)點對象，* 并將創(chuàng)建好的對象作為返回值返回*/document.createElement("di");var li = document.createElement("li");//創(chuàng)建廣州文本節(jié)點/** document.createTextNode()* 可以用來創(chuàng)建一個文本節(jié)點對象* 需要一個文本內(nèi)容作為參數(shù)，將會根據(jù)該內(nèi)容創(chuàng)建文本節(jié)點，并將新的節(jié)點返回*/var gzText = document.createTextNode("廣州");//將gzText設(shè)置li的子節(jié)點/** appendChild()* - 向一個父節(jié)點中添加一個新的子節(jié)點* - 用法：父節(jié)點.appendChild(子節(jié)點);*/li.appendChild(gzText);//獲取id為city的節(jié)點var city = document.getElementById("city");//將廣州添加到city下city.appendChild(li);});//將"廣州"節(jié)點插入到#bj前面myClick("btn02",function(){//創(chuàng)建一個廣州var li = document.createElement("li");var gzText = document.createTextNode("廣州");li.appendChild(gzText);//獲取id為bj的節(jié)點var bj = document.getElementById("bj");//獲取cityvar city = document.getElementById("city");/** insertBefore()* - 可以在指定的子節(jié)點前插入新的子節(jié)點* - 語法：* 父節(jié)點.insertBefore(新節(jié)點,舊節(jié)點);*/city.insertBefore(li , bj);});//使用"廣州"節(jié)點替換#bj節(jié)點myClick("btn03",function(){//創(chuàng)建一個廣州var li = document.createElement("li");var gzText = document.createTextNode("廣州");li.appendChild(gzText);//獲取id為bj的節(jié)點var bj = document.getElementById("bj");//獲取cityvar city = document.getElementById("city");/** replaceChild()* - 可以使用指定的子節(jié)點替換已有的子節(jié)點* - 語法：父節(jié)點.replaceChild(新節(jié)點,舊節(jié)點);*/city.replaceChild(li , bj);});//刪除#bj節(jié)點myClick("btn04",function(){//獲取id為bj的節(jié)點var bj = document.getElementById("bj");//獲取cityvar city = document.getElementById("city");/** removeChild()* - 可以刪除一個子節(jié)點* - 語法：父節(jié)點.removeChild(子節(jié)點);* * 子節(jié)點.parentNode.removeChild(子節(jié)點);*///city.removeChild(bj);bj.parentNode.removeChild(bj);});//讀取#city內(nèi)的HTML代碼myClick("btn05",function(){//獲取cityvar city = document.getElementById("city");alert(city.innerHTML);});//設(shè)置#bj內(nèi)的HTML代碼myClick("btn06" , function(){//獲取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加廣州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增刪改的相關(guān)操作* 一般我們會兩種方式結(jié)合使用*///city.innerHTML += "<li>廣州</li>";//創(chuàng)建一個livar li = document.createElement("li");//向li中設(shè)置文本li.innerHTML = "廣州";//將li添加到city中city.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜歡哪個城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>東京</li><li>首爾</li></ul></div></div><div id="btnList"><div><button id="btn01">創(chuàng)建一個"廣州"節(jié)點,添加到#city下</button></div><div><button id="btn02">將"廣州"節(jié)點插入到#bj前面</button></div><div><button id="btn03">使用"廣州"節(jié)點替換#bj節(jié)點</button></div><div><button id="btn04">刪除#bj節(jié)點</button></div><div><button id="btn05">讀取#city內(nèi)的HTML代碼</button></div><div><button id="btn06">設(shè)置#bj內(nèi)的HTML代碼</button></div><div><button id="btn07">創(chuàng)建一個"廣州"節(jié)點,添加到#city下</button></div></div></body>
</html>
總結(jié)
以上是生活随笔為你收集整理的JS中DOM节点的CRUD的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS删除之前弹出一个带有确认和取消按钮的
- 下一篇： JS浏览器加载一个页面的过程