- 通过ID获取,返回一个元素对象(document.getElementById)
document.getElementById('ID属性值')
document.getElementById('table')
- 通过标签名称获取,返回一个伪数组,里面包含多个DOM对象 (document.getElementsByTagName)
document.getElementsByTagName('标签名称')
document.getElementsByTagName('li')
- 通过name属性的值获取元素,返回一个伪数组,里面包含多个DOM对象 (document.getElementsByName)
document.getElementsByName('name属性')
document.getElementsByName('name')
- 通过类样式名称获取元素,返回一个伪数组,里面包含多个DOM对象(document.getElementsByClassName)
document.getElementsByClassName('类样式名称')
document.getElementsByClassName('cls')
- 通过选择器获取元素,返回一个元素对象(document.querySelector)
document.querySelector('选择器名字')
document.querySelector('#table')
- 通过选择器获取多个元素,返回一个伪数组,里面保存了多个DOM对象(document.querySelectorAll)
document.querySelectorAll('选择器名字')
注意事项
- querySelector()方法仅仅返回匹配指定选择器的第一个元素,如果你需要返回多个请使用querySelectorAll代替。
- 选择器获取dom元素和传统获取dom元素方法的区别
- getElementById() 获取的是动态集合,通过函数获取元素后,元素之后的改变还是会动态添加到已经获取的这个元素中。也可以理解为通过这个方法获取到的元素存储到变量的时候,以后每一次在js函数中使用这个变量的时候都会再去访问一下这个变量对应的html元素
- querySelector()获取的是静态集合,通过这个函数获取元素之后,元素之后的改变并不会影响之前获取后存储到的变量。也就是获取到元素之后就和html中的这个元素没有关系了。