DOM
- 2022 年 8 月 6 日
- 筆記
- DOM, javascript
DOM
節點
節點：Node
元素節點 （element）
屬性節點 （attribute）
文本節點 （text）
<div id='a' name='b'>這是文本節點</div>
div為標籤節點、 id和name…等都是屬性節點、這是文本節點是文本節點
屬性節點操作的相關方法
setAttributeNode 設置屬性節點
getAttributeNode 獲取屬性節點
removeAttributeNode 刪除屬性節點
方法
cloneNode 方法 （克隆所有節點）
append 添加節點
appendChild 添加節點
replaceChild 替換節點
replaceChildren 替換所有的子節點
insertBefore 插入節點
removeChild 移除子節點
innerHTML 及 innerText
//innerHtml 顯示的html(所有) innerText 顯示的文本（所有的文本）
console.log(div.innerHTML);
console.log(div.innerText);
div.innerHTML = "<b>hello</b>" //解析html程式碼的
div.innerText = "<b>hello</b>" //不會解析html程式碼的
document文檔對象
屬性
-
document.head //獲取head標籤
-
document.body //獲取body標籤
-
document.forms //獲取所有的表單標籤
HTMLCollection 與 NodeList 的區別
-
NodeList 是一個靜態集合，其不受 DOM 樹元素變化的影響；
-
相當於是 DOM 樹快照，節點數量和類型的快照，就是對節點
增刪，NodeList 感覺不到。但是對節點內部內容修改，是可以感覺到的，比如修改
innerHTML。 -
只有 NodeList 對象有包含屬性節點和文本節點。
-
HTMLCollection 是動態綁定的，是一個的動態集合，DOM 樹發生變化，HTMLCollection 也會隨之變化，節點的增刪是敏感的。
-
HTMLCollection 元素可以通過
name，id或index索引來獲取。NodeList 只能通過index索引來獲取。
方法
1.獲取全局內容
Element後面有s的都是返回一個偽數組（有長度和下標，但不是數組）
-
通過id獲取（document.getElementById()）返回一個元素（Element類型）
-
通過class屬性名獲取（document.getElementsByClassName() ）（HTMLCollection）
-
通過標籤名獲取（document.getElementsByTagName() ）（HTMLCollection）
-
通過屬性獲取（document.getElementsByName() ）（NodeList）
-
通過複合選擇器獲取（document.querySeletor() ）返回的是第一個查到的元素（Element類型）
（NodeList）
-
通過複合選擇器獲取（document.querySeletorAll() ）
（NodeList）
-
獲取根節點（document.getRootNode()）
2.創建全局的內容
-
創建元素（document.createElement()）返回一個元素
-
創建屬性結點（document.createAttribute()）
-
創建文本節點 （document.createTextNode()）
//創建元素的方法
var p = document.createElement('p') //傳入的是一個對應的標籤名
console.log(p);
//創建屬性的方法
var attr = document.createAttribute('password') //創建的是一個屬性 默認為空值
//給屬性對象賦屬性值的操作
attr.value = '123456'
console.log(attr);//
//創建文本
var text = document.createTextNode('文本節點') //創建一個文本節點對象
console.log(text);
Element元素對象
<span></span>
<div>
<a></a>
<span></span>
</div>
<p></p>
屬性
獲取父元素
// 相關屬性
var div = document.getElementsByTagName('div')[0]
// 獲取父元素
console.log(div.parentElement);//body
獲取子元素
// 獲取子元素
var div = document.getElementsByTagName('div')[0]
console.log(div.childElementCount); //2 子元素個數
console.log(div.children); //[a,span] 獲取子元素 （偽數組）
獲取兄弟元素
var div = document.getElementsByTagName('div')[0]
//獲取前面的兄弟
console.log(div.previousElementSibling);
//得到<span></span>
//獲取後面的兄弟
console.log(div.nextElementSibling)
//得到<p></p>
方法
-
獲取特定的元素
<div id='box'> <img></img> <img></img> <img></img> </div> <img></img> //獲取 div 中的 Img document.getElementById('box').getElementsByTagName('img') -
替換元素
-
replaceChild （用一個新的元素來替換裡面的子元素）
-
replaceChildren （用一個元素來替換裡面所有的子元素）
var div = document.getElementById('box') div.replaceChildren("hello") //替換所有的子節點 用傳入的節點替換裡面所有的子節點 var content = document.createElement('div') div.replaceChildren('span') //用content傳的替換所有子元素，產生一個content傳來的標籤 //replaceChild 用前面的替代後面的（一定是屬於我們本身的兒子元素） var a = document.createElement('a') div.replaceChild(a,div.children[0]) //使用新的節點來替換對應的子節點 使用a這個元素來替代對應的content這個子元素
-
-
插入元素
-
append 插入任意的子元素到對應的父元素內 插入到後面
-
appendChild 插入一個子元素到對應的父元素內容 插入到後面
-
insertBefore 插入一個元素到另一個子元素的前面
var div = document.getElementById('box') // 插入元素 append inster div.append("hello",content) //追加內容到當前元素裡面的最後一個元素的後面 追加多個 // appendChild 追加子元素 var b= document.createElement('b') div.appendChild(content) //追一個元素在當前元素的裡面 （同一個元素只能允許加一次 裡面存在是不可以添加的） div.appendChild(b) //追一個元素在當前元素的裡面 //insertBefore var span = document.createElement('span') //參數1 當前需要插入的元素 參數2 對應的子元素 div.insertBefore(span,div.children[0]) //插入到哪個子元素的前面
-
-
刪除元素
div.remove() //全部刪除 包括自己 // 清空所有的內容 //建議使用replaceChildren('') -
cloneNode（克隆）
var div = document.getElementById('box') var cloneDiv = div.cloneNode() //進行元素克隆 //默認只會克隆自己 並不會克隆裡面包含對應的內容 var div1 = div.cloneNode(true) //裡面是true的情況表示深度克隆 他會考慮所有的內容包括事件 console.log(div1); -
獲取、創建、刪除屬性的方法
-
getAttribute
-
setAttribute
-
removeAttribute
//獲取 //示例：element.getAttribute(name) box.setAttribute('username','tom') console.log(box.getAttribute('width'));//返回對應的值 一般都是string console.log(box.getAttribute('username'));//返回對應的值 一般都是string //創建 //示例：element.setAttribute(name,value) //不僅可以操作 後續定義的屬性 也可以操作本身就有的屬性 var box = document.querySelector('div') box.setAttribute('width','100px') //刪除 //示例：element.removeAttribute(name) box.removeAttribute('width')
-
