JS获取DOM元素的方法(8种)
通过ID获取(getElementById)
通过name属性(getElementsByName)
通过标签名(getElementsByTagName)
通过类名(getElementsByClassName)
通过选择器获取一个元素(querySelector)
通过选择器获取一组元素(querySelectorAll)
获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的
获取body的方法(document.body)
document.body是专门获取body这个标签的。
1.通过ID获取
<div id="app"><div>
var div = document.getElementBuId('app')
- 返回值值获取到一个元素,没找到返回null
- 不需要写#
- 必须是字符串格式
2.通过name属性
<input type="text" name="password" />
var div = document.getElementByName('password')
- 必须传参数,参数是获取元素的name属性。
3.通过标签名
<p>文字文字文字</p>
<p>文字文字文字</p>
<p>文字文字文字</p>
<p>文字文字文字</p>
var p = document.getElementByTagName('p')
for(var i =0; i<p.lenght; i++){
console.log(p[i])
}
- 必须传参数,参数是获取元素的标签名。
4.通过类名
<div class="app"></div>
var app = document.getElementByClassName('app')
- 必须传参数,参数是获取元素的标签名。
5.通过选择器获取一个元素
<div id="app" class="layout"></div>
var app = document.querySelector('#app')
var layout = document.querySelector('.layout')
var div = document.querySelector('div')
- 必须传参数,参数是通过选择器获取元素
- 返回值只获取到第一个元素。
6.通过选择器获取一组元素
<ul class="list">
<li class="item">文字1</li>
<li class="item">文字2</li>
<li class="item">文字3</li>
<li class="item">文字4</li>
<li class="item">文字5</li>
</ul>
var li = document.querySelectorAll('.list .item')
for(var i in li){
console.log(li[i])
}
- 必须传参数,参数是通过父级选择器获取子级选择器
- 返回值是一个类数组