獲取屬性節點的N種方式

本身是window物件上的乙個子物件。我們寫的html**，載入到瀏覽器中，就會形成document物件。

利用document物件，就可以獲取dom樹上的元素節點。

document.head 了解獲取head元素 document.title 了解獲取不是title元素，是title標籤中的文字節點 document.body 了解獲取body元素 document.childnodes 了解獲取所有的子節點 document.children 了解獲取所有的元素節點

....

let divs = document.getelementsbytagname("div")
for (let div of array.from(divs))

let res = document.getelementsbyname("div1")
for (let div of array.from(res))

let res = document.getelementsbyclassname("div1")
for (let div of array.from(res))

// .son 類選擇器 queryselector選擇滿足條件的第1個元素

// let res = document.queryselector(".son")

// .father .son 後代選擇器

let res = document.queryselector(".father .son")

console.log(res)

// queryselectorall  選中所有   queryselectorall返回值也是乙個偽陣列
let res = document.queryselectorall(".father .son")
console.log(res)
console.log(array.isarray(res))
console.log(array.from(res))

parentnode 獲取父節點重要沒有相容性問題忽略換行節點

parentelement 獲取父節點重要沒有相容性問題

獲取標籤中第乙個子節點  不要用 因為它會考慮換行節點 注釋節點

獲取標籤中第乙個子元素節點  可以使用

let father = document.queryselector(".father")
console.log(father.firstchild); // 獲取是換行節點

獲取標籤中最後乙個子節點  不要用 因為它會考慮換行節點 注釋節點

獲取標籤中最後乙個子元素節點  可以使用

let father = document.queryselector(".father")
console.log(father.lastchild); // 獲取換行節點
console.log(father.lastelementchild); // 獲取元素節點

獲取下乙個兄弟節點  會有換行節點影響

獲取下乙個兄弟節點

獲取上乙個兄弟節點  會有換行節點影響

獲取上乙個兄弟節點

獲取乙個或多個元素節點方案： 1） document.head document.title document.body 3）根據標籤名獲取元素節點 document.getelementsbytagname("div") 4）根據name獲取元素節點 document.getelementsbyname("div1") 5）根據class的名字獲取元素節點 document.getelementsbyclassname("div1") 6）根據選擇器來獲取乙個元素名點 document.queryselector(".father") document.queryselectorall(".father .son") 7）通過節點關係來獲取某乙個元素節點 parentelement firstelementchild lastelementchild nextelementsibling: previouselementsibling:

children

2）根據標籤名獲取元素節點 document.getelementsbytagname("div") 非常標準的

3）根據選擇器來獲取乙個元素名點 document.queryselector(".father") document.queryselectorall(".father .son")

4）parentelement

獲取屬性節點的N種方式

HTML DOM節點的屬性獲取

jQuery 獲取DOM節點的兩種方式

資料整合的N種方式

獲取屬性節點的N種方式

HTML DOM節點的屬性獲取

jQuery 獲取DOM節點的兩種方式

資料整合的N種方式

相關推薦