DOM

DOM

DOM的全拼是：Document Object Model，叫做文档对象模型，主要用于操作html文档。例如，改变标签的北京颜色，让标签移动产生动画。。。。

DOM中的顶级对象是document，言外之意，DOM其实是属于BOM的。

例如：

window.document.write();
window.document.bgColor="red";

html基本结构的操作：

0. document.body :body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取
1. document.documentElement : 可以获取html元素及其所有内容
2. document.head : 可以直接获取head元素
3. document.title : 可以直接获取title的文本

获取元素

在js中，标签的id名，可以当做是变量，直接就能代表这个标签元素，但是，id名可以随便定义，但是变量名不能随便定义，所以使用id名代表标签是有风险的。所以需要通过方法来获取到标签元素，自己定义给变量，可以避免这种风险。

通过document获取节点

document.getElementById("标签id名"); // 通过标签的id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
// 上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合（类数组）

使用css选择器获取元素：

documen.querySelector(css选择器); // 获取到匹配css的第一个元素
documen.querySelectorAll(css选择器); // 获取到匹配css的所有元素

属性操作

自定义属性

元素.setAttribute(属性名,属性值) # 设置元素的属性
元素.getAttribute(属性名); # 获取元素属性
元素.removeAttribute(属性名); # 删除元素属性

元素自带属性

元素.属性名 = 值;
console.log(元素.属性名);

例：

btn.onclick=function(){
    img.src = '2.jpg';
}

内容操作

语法：
    元素.innerHTML # 代表元素中的所有内容（包含标签）
    元素.innerText # 代表元素中的文本内容
    表单元素.value
    # 单标签操作内容其实就是在操作元素的属性

样式设置

元素.style.css属性名 = css属性值; # 给标签设置样式

元素类名

使用元素的className属性可以设置元素的类名，也可以获取类名