1.使用document.getElementById();
通過id來取得元素
<div id="box"></div>
console.log(document.getElementById('box'))
image.png
2.使用document.getElementsByClassName();
通過class來取得元素,獲取的元素為一個數(shù)組
<div class="box"></div>
console.log(document.getElementsByClassName('box'))
image.png
它返回的是，返回帶有指定類的所有元素的類數(shù)組對象[HTMLCollection]扮碧，可以數(shù)組方式操作趟章。
3.使用document.getElementsByName();
通過name來取得元素,獲取的元素為一個數(shù)組
<div name="box"></div>
console.log(document.getElementsByName('box'))
image.png
返回一個nodeList 以數(shù)組方式操作。
4.使用document.getElementsByTagName();
通過標(biāo)簽來取得元素,獲取的元素為一個數(shù)組
console.log(document.getElementsByTagName('div'))
image.png
它返回的是芬萍，返回帶有指定類的所有元素的類數(shù)組對象[HTMLCollection]尤揣，可以數(shù)組方式操作。
html5新增：
document.querySelector（）
console.log(document.querySelector('#box'))
image.png
如果選擇器選擇以class方式柬祠，或者別的方式：
<div class="box">1</div>
<div class="box">2</div>
console.log(document.querySelector('.box'))
image.png
只會獲取第一個北戏。
這樣的話大部分時候并不滿足需求，從而引出document.querySelectorAll()
document.querySelectorAll('.box')
image.png
查詢所有滿足條件的dom漫蛔。
