• 獲取到的是一組元素，是一個(gè)長(zhǎng)得和數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)，但是不是數(shù)組，是偽數(shù)組

• 這個(gè)一組數(shù)據(jù)也是按照索引排列的，所以我們想要準(zhǔn)確的拿到這個(gè) div，需要用索引來獲取

• getElementsByTagName 是用過標(biāo)簽的 標(biāo)簽 名稱來獲取標(biāo)簽的

• 因?yàn)轫?yè)面中可能有多個(gè)元素的 標(biāo)簽 名稱一樣，所以獲取到的是一組元素

• 哪怕真的只有一個(gè)這個(gè)標(biāo)簽名，那么也是獲取一組元素，只不過這一組中只有一個(gè) DOM 元素而已

getElementsByTagName

• 和 getElementsByClassName 一樣，獲取到的是一個(gè)長(zhǎng)得很像數(shù)組的元素

• 必須要用索引才能得到準(zhǔn)確的 DOM 元素

• querySelector 是按照選擇器的方式來獲取元素

• 也就是說，按照我們寫 css 的時(shí)候的選擇器來獲取

• 這個(gè)方法只能獲取到一個(gè)元素，并且是頁(yè)面中第一個(gè)滿足條件的元素

querySelector

console.log(document.querySelector('div')) // 獲取頁(yè)面中的第一個(gè) div 元素 console.log(docuemnt.querySelector('.box')) // 獲取頁(yè)面中第一個(gè)有 box 類名的元素console.log(document.querySelector('#box')) // 獲取頁(yè)面中第一個(gè) id 名為 box 的元素

querySelectorAll

• querySelectorAll 是按照選擇器的方式來獲取元素

• 這個(gè)方法能獲取到所有滿足條件的元素，以一個(gè)偽數(shù)組的形式返回

console.log(document.querySelectorAll('div')) // 獲取頁(yè)面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 獲取頁(yè)面中所有有 box 類名的元素

• 獲取到的是一組數(shù)據(jù)，也是需要用索引來獲取到準(zhǔn)確的每一個(gè) DOM 元素

• 通過我們各種獲取元素的方式獲取到頁(yè)面中的標(biāo)簽以后

• 我們可以直接操作 DOM 元素的屬性，就能直接把效果展示在頁(yè)面上

• 獲取元素內(nèi)部的 HTML 結(jié)構(gòu)

操作屬性

innerHTML

• 設(shè)置元素的內(nèi)容

• 設(shè)置完以后，頁(yè)面中的 div 元素里面就會(huì)嵌套一個(gè) p 元素

• 獲取元素內(nèi)部的文本（只能獲取到文本內(nèi)容，獲取不到 html 標(biāo)簽）

innerText

• 可以設(shè)置元素內(nèi)部的文本

• 設(shè)置完畢以后，會(huì)把 

  hello

   當(dāng)作一個(gè)文本出現(xiàn)在 div 元素里面，而不會(huì)把 p 解析成標(biāo)簽

• 獲取元素的某個(gè)屬性（包括自定義屬性）

getAttribute

 ="100" class="box">