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