<ul id='cont' class='ulClass'>
  <li class='liClass'>How</li>
  <li class='liClass'>are</li>
  <li class='liClass'>you</li>
</ul>
<div name='divName'>I am fine</div>
<div name='divName'>Thank you</div>

• 以下輸出帶有length的均為 類數(shù)組
所有帶 length 的類數(shù)組，均可通過 Array.prototype.slice.call(類數(shù)組) 轉(zhuǎn)化為數(shù)組

一：getElementById通過 id 獲取

let idNode = document.getElementById('cont')
console.log(idNode)

輸出：

image.png

二：getElementsByTagName通過 標簽 獲取

let liNode = document.getElementsByTagName('li')
console.log(liNode)

輸出：

image.png

三：getElementsByClassName通過 class 獲取

let liClassNode = document.getElementsByClassName('liClass')
let ulClassNode = document.getElementsByClassName('liClass')
console.log(liClassNode)
console.log(ulClassNode )

輸出：

image.png

四：querySelector通過 選擇器 獲取

let queryClass = document.querySelector('.liClass')
console.log(queryClass)

輸出：

image.png

輸出的第一個 class 名稱為liClass 元素

五：querySelectorAll通過 選擇器 獲取

let queryClass = document.querySelectorAll('.liClass')
console.log(queryClass)

輸出：

image.png

輸出的所有 class 名稱為liClass 的元素

六：getElementsByName通過 name 獲取

let nameNode = document.getElementsByName('divName')
console.log(nameNode)

輸出：

image.png

七：body獲取 body

let bodyNode = document.body
console.log(bodyNode)

輸出：

image.png

八：documentElement獲取 html

let htmlNode = document.documentElement
console.log(htmlNode)

輸出：

image.png

九：輸出一下document

console.log(document)

輸出：

image.png