11Element對象

什麼是Element對象

DOM的标準規範中提供了 Elementi對象，該對象提供了HTML頁面中所有元素所具有的屬性和方法。

DOM标準規範中提供了Node對象，主要是依靠DOM節點樹結構通路和更新HTML頁面的内容。

而DOM标準規範中提供了 Element對象，主要是依靠DOM元素樹結構通路和更新HTML頁面的内容。

定位元素

<div class='container'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>           

複制

1. getElementsByTagName

   var container = document.getElementsByClassName("container")[0] var elements = container.getElementsByTagName("div"); console.log(elements)

1. getElementsByClassName

   var container = document.getElementsByClassName("container")[0] 通過此方法擷取不存在空白節點問題

2. querySelector

   var container = document.body var css1 = container.querySelector('.container') 可以包含一個或多個，但隻傳回第一個

1. querySelectorAll

   與上一個類似，傳回全部

周遊元素

<div id="d">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>           

複制

1. 擷取指定節點的所有子元素
2. 擷取指定元素的所有子元素的個數

3. 擷取指定節點的第一個子元素

   存在空白節點問題。，如果沒有子元素，則傳回null

4. 擷取指定節點的最後一個子元素

var d = document.getElementById('d')
d.firstChild.nextSibling.textContent = '666'
// 擷取指定節點的所有子元素
console.log('children:', d.children)
// 擷取指定元素的所有子元素的個數
console.log("childElementCount", d.childElementCount)
// 擷取指定節點的第一個子元素
console.log("firstChild", d.firstChild)
// 擷取指定節點的最後一個子元素
console.log("lastElementChild", d.lastElementChild)           

複制

1. 擷取指定元素的前面相鄰兄弟元素
2. 擷取指定元素的後面相鄰兄弟元素

var d = document.getElementById('d')
// 擷取下一個兄弟元素（擷取到空白節點）
console.log(d.nextSibling)
// 擷取到script腳本
console.log(d.nextSibling.nextSibling)
console.log(d.previousSibling)
console.log(d.previousSibling.previousSibling)           

複制

屬性操作

<p id="p1" class="text">12312321</p>           

複制

1. 擷取

   var pElement = document.getElementById('p1') console.log(pElement.getAttribute("class")) //傳回text

2. 設定

   pElement.setAttribute("name", 'name_test') console.log(pElement.getAttribute('name'))

3. 删除

   pElement.setAttribute("name", 'name_test') pElement.removeAttribute('name') console.log(pElement.getAttribute('name')) 如果删除的屬性不存在的話，不會引發任何異常

4. 判斷是否含有指定屬性（是否含有指定屬性，布爾值）

   console.log(pElement.hasAttribute("class"))

5. 用于判斷是否存在屬性(存在屬性即傳回true)

   console.log(pElement.hasAttributes())

InnerHTML

可以直接添加HTML代碼

var pElement = document.getElementById('p1')
pElement.innerHTML = '<span>test<span>'           

複制