DOM知識點總結
- 2022 年 6 月 11 日
- 筆記
- js學習之路
DOM-Document Object Model
部分知識點總結,話不多說,上程式碼
1.DOM查詢剩餘方法
<script>
window.onload = function () {
//獲取body標籤
//var body = document.getElementByTagName("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; 根基元素的class屬性chaxunyi
//根據元素的class屬性查詢一組元素節點對象
//getElementsClassName()不兼容ie8及以下
var box1 = document.getElementsByClassName("box1");
console.log(box1.length);
//獲取頁面中所有的div
var divs = document.getElementsByTagName("div");
/*
* document.querySelector()
* -需要一個選擇器的字元串作為參數,可以根據css選擇器來查詢一個元素節點對象
* -雖然ie8中沒有getElementsByClassName(),但是也可以使用querySelector()代替
* -使用該方法會返回唯一一個元素,如果滿足條件的元素有多個,那麼他只會返回第一個
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");
/*
* document.querySelectorAll()
* -方法和querySelector()用法類似,不同的是她會符合條件的元素封裝到一個數組中
* -即使符合條件的元素只有一個.也會返回數組
*
*/
var box1=document.querySelectorAll(".box1");
}
</script>
</head>
<body>
<div class="box1">
<div>第一個</div>
</div>
<div class="box1">
<div>第二個</div>
</div>
<div class="box1">
<div>第三個</div>
</div>
</body>
2.DOM增刪改
寫了具體幾個case來加深理解
//創建一個"廣州"節點,添加到#city下
myClick("btno1",function(){
//創建廣州節點<li>廣州</li>
//創建li元素節點
//可以創建一個元素節點對象
//需要一個標籤名作為參數,將會根據標籤名創建元素節點對象
//並將創建的對象作為返回值返回
var li= document.createElement("li");
//創建廣州文本節點
//document.createTextNode()
//可以用來創建一個文本節點對象
//需要一個文本內容作為參考,將會根據該內容創建文本節點,並將新的節點返回
var geText= document.createTextNode("廣州");
//將geText設置li的子節點
//向一個父節點添加一個新的子節點
//用法:父節點.appendChild(子節點)
li.appendChild(gzText);
//將"廣州"添加到city下
city.appendChild(li);
;})
//將廣州插入到#bj之前
myClick("btn02",function(){
//創建一個廣州
var li=document.createElement("li");
var gzText=document.createTextNode("廣州");
li.appendChild(geText);
//獲取id為bj的節點
var bj=document.getElementById("city");
//獲取city
var city=document.getElementById("city");
//insertBefore()
//--可以在指定的子節點前插入新的子節點
//語法:
//父節點.insertBefore(新節點,舊節點)
city.insertBefore(li,bj);
})
//replaceChild()
//可以使用指定的子節點替換已有的子節點
//語法:父節點.replaceChild(新節點,舊節點);
//removeChild()
//--可以刪除一個子節點
//--語法:父節點.removeChild(子節點);
//也可 子節點.parentNode.removeChild(子節點)
bj.parentNode.removeChild(bj);
//向city中添加廣州
var city=document.getElementById("city");
//使用innterHTML也可以完成DOM的增刪改的相關操作,動作太大一般我們會兩種方式結合
//city.innterHTML+="<li>廣州</li>"
var li=document.createElement("li");
li.innterHTML="廣州";
