BOM-Browser Object Model
一整套操作文档流相关内容的属性和方法
-操作 元素 修改样式
-操作 元素 修改属性
-操作 元素 改变位置
-操作 元素 添加事件
…
1，获取元素的方式
确定你要操作的是哪一个元素
- 根据 id 名称获取 document.getElementById(“id名称”)
- 根据元素 类名 获取 document.getElementsByClassName(“元素类名”)
- 根据元素 标签名 获取 document.getElementsByTagName(“标签名”)
- 根据 选择器 获取一个 document.querySelector(“选择器”)
- 根据 选择器 获取一组 document.querySelectorAll(“选择器”)
1，根据 id 名称获取
语法：document.getElementById(“id名称”)
作用：获取文档流中== id 名对应的一个==元素
返回值：
如果有 id 对应的元素，就是 这个元素
如果没有 id 对应的元素，就是 null
例：
2，根据元素 类名 获取
语法：document.getElementsByClassName(“元素类名”)
作用：获取文档流中所有类名对应的元素
返回值：必然是一个伪数组
如果有类名对应的元素，有多少获取多少
如果没有类名对应的元素，空的伪数组
例：
3，根据元素 标签名 获取
语法：document.getElementsByTagName(“标签名”)
作用：获取文档流中所有标签名对应的元素
返回值：必然是一个伪数组
如果有标签名对应的元素，有多少获取多少
如果没有标签名对应的元素，空的伪数组
例：
4，根据 选择器 获取一个
语法：document.querySelector(“选择器”)
作用：获取文档流中满足选择器规则的第一个元素
返回值：
如果有选择器对应的元素，获取到第一个
如果没有选择器对应的元素，null
例：
5，根据 选择器 获取一组
语法：document.querySelectorAll(“选择器”)
作用：获取文档流中所有满足选择器规则的元素
返回值：必然是一个伪数组
如果有选择器对应的元素，有多少获取多少
如果没有选择器对应的元素，空的数组
例：
操作元素内容
操作元素 文本 内容
获取：元素.innerText
设置：元素.innerText = " 新内容 "
例：
操作元素 超文本 内容
获取：元素.innerHTML
设置：元素.innerHTML = " 新内容 "
例：
操作元素属性
原生属性
获取：元素.属性名
设置：元素.属性名 = " 属性值 "
例：
自定义属性
获取：元素.getAttribute(“属性名”)
设置：元素.setAttribute(“属性名”,“属性值”)
删除：元素.removeAttribute(“属性名”)
例：
注意：以上方法一般不用做操作元素 类名 和 样式
操作元素类名
操作元素类名
获取：元素.className
设置：元素.className = “新类名”
例：
1： classList.add() 追加新属性 不覆盖原有属性
元素.classList.add(“新类名1”,“新类名2”)
2：classList.remove() 删除class属性
元素.classList.remove(“新类名1”,“新类名2”)、
3：智能添加和删除（如果有就删除 没有就添加）
元素.classList.toggle(“类名”);
4：判断是否存在某个class属性 如果存在结果为true 反之为false
元素.classList.contains(“类名”)
操作元素行内样式
操作元素行内样式
获取：元素.style.样式名
设置：元素.style.样式名 = “样式值”
例：
操作元素非行内样式
操作元素非行内样式
获取：window.getComputedStyle(元素).样式名
注意：可以获取行内样式，也可以获取非行内样式
例：
注意：只能获取非行内样式，不能设置非行内样式。
获取元素尺寸
例：
