8种方案(两静态四动态两特殊)
1. 两个静态获取
一下两种方法不具有 实时性(只能获取页面已经存在的元素)
使用 css 选择器 进行选择(.类名)
1.1 querySelector
document.querySelector(‘选择器’)
在指定上下文中通过选择器获取第一个元素(只能获取一个),获取不到就是null
1.2 querySelectorAll
document.querySelectorAll(‘选择器’)
在指定上下文中通过选择器获取一组元素集合,获取不到就是空元(通过数组方法取元素)
2. 四个动态获取
2.1 getElementById
document.getElementByid(‘id名’)
在document上下文下获取元素(通过Id获取的元素是一个元素对象,获取不到就是null)
2.2getElementByTagName
document.getElementByTagName(‘标签名’)
通过指定的上下文获取指定的标签,获取的是一个元素集合,如果没有获取到元素,那就是空元素集合 (通过数组方法取元素)
2.3 getElementByName
document.getElementByName(‘标签名’)
在整个文档中,通过标签的NAME属性值获取一组节点集合(在IE中只有表单元素的NAME才能识别,所以我们一般应用于表单元素的处理)
2.4 getElementClassName
document.getElementClassName(‘类名’)
通过指定的上下文或按照class名取指定的标签,获取的是一个元素集合,如果没有获取到元素,那就是空元素集合 (通过数组方法取元素)
3.两个特殊获取
3.1 document.body
var body=document.body;
console.log(body);
body 属性用于设置或返回文档体。
如果是返回, 该属性返回当前文档的 body 元素。
如果是设置, 该属性会覆盖所有在 body 元素中的子元素, 并用新的内容来替换它。
3.2 document.documentElement
var html=document.documentElement;
console.log(html);
documentElement 属性以一个元素对象返回一个文档的文档元素。
HTML 文档返回对象为HTML元素。
注意: 如果 HTML 元素缺失,返回值为 null。
4.动态获取中id获取器
动态获取里面 id 得先存在 在获取
id获取器是一个特殊的方法,可以不用变量接收通过id获取的值,直接用id名称调用