一、DOM获取元素
DOM在实际开发中主要用来操作元素
获取页面中的元素方法:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
1.根据 ID 获取 :使用getElementById()方法获取元素对象
var element = ducument.getElementById('id名');
参数:
- element 是一个 Element对象。如果当前文档中拥有特定ID的元素不存在,则返回null
- id是大小写敏感的字符串,代表了所要查找的元素的唯一ID
返回值:
- 返回一个匹配到ID 的 DOM Element 对象。
- 若在当前的 Document 下没有找到,则返回null
2.根据标签名获取:使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
(以伪数组的形式存储)
var element = ducument.getElementByTagName(‘标签名’);
注意:
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
- 得到元素对象时动态的
- 如果页面中只有一个li,则返回的还是一伪数组的形式
- 如果页面中没有这个元素,则返回的是空的伪数组的形式
2.2根据标签名还可以获取某个元素(父元素)内部所有指定标签名的子元素
(父) (子)
console.log(element.getElementByTagName(‘标签名’));
父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己
3.通过 HTML5 新增的方法获取
document.getElementByClassName('类名'); 根据类名返回元素对象集合
document.querySelector('选择器'); 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');返回指定选择器的所有元素对象集合
4.获取特殊元素(body、html)
1.获取body元素
document.body 返回body元素对象
2.获取html元素
document.documentElement 返回html元素对象