js获取标签的几种方式

<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的均为 类数组
所有带 length 的类数组，均可通过 Array.prototype.slice.call(类数组) 转化为数组

一：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