获取DOM元素

获取 DOM 元素
+ 通过 JS 获取到页面中的元素, 进行操作
+ 两类标签
1. 非常规标签
1-1. html
=> document.documentElement
1-2. head
=> document.head
1-3. body
=> document.body
2. 常规标签
+ 不是不能获取非常规标签, 只是一般不这么用
2-1. getElementById()
=> 语法: 查找范围.getElementById('id名称')
=> 查找范围: document 或者一个 元素
=> 返回值:
-> 如果有这个 id 名匹配的元素, 就是这个元素
-> 如果没有这个 id 名匹配的元素, 那么就是 null
2-2. getElementsByTagName()
=> 语法: 查找范围.getElementsByTagName('标签名')
=> 返回值: 是一个伪数组(数组常用方法用不了)
-> 如果有这个标签名匹配的元素, 有多少获取多少
-> 如果没有这个标签匹配的元素, 返回一个空的伪数组
2-3. getElementsByClassName()
=> 语法: 查找范围.getElementsByClassName('类名')
=> 返回值: 是一个伪数组(数组常用方法用不了)
-> 如果有这个类名匹配的元素, 有多少获取多少
-> 如果没有这个类名匹配的元素, 返回一个空的伪数组
2-4. getElementsByName()
=> 语法: 查找范围.getElementsByName('元素name属性的值')
=> 返回值: 是一个伪数组
-> 如果有元素的 name 属性的值匹配, 那么由多少获取多少
-> 如果没有元素的 name 属性值匹配, 那么就是空的伪数组
2-5. querySelector()
=> 语法: 查找范围.querySelector('选择器')
=> 选择器: 能在 css 里面写的选择器, 这里都可以写
=> 返回值:
-> 如果找到选择器匹配的元素, 返回第一个找到的内容
-> 如果没有选择器匹配的元素, 返回 null
=> 特点: IE 低版本不支持
2-6. querySelectorAll()
=> 语法: 查找范围.querySelectorAll('选择器')
=> 选择器: 能在 css 里面写的选择器, 这里都可以写
=> 返回值: 是一个伪数组
-> 如果找到选择器匹配的元素, 有多少获取多少
-> 如果没有选择器匹配的元素, 返回一个空的伪数组
=> IE 低版本不支持