DOM，全称 Document Object Model，文档对象模型。
dom 对象就是将标签封装成的 js 对象，而 JavaScript 中内置提供的 document 对象就是将 html 标签封装成的 js 对象。我们可以利用 document 对象的方法来找到某个 html标签。例如，下面的代码中就是通过 document 对象的 getElementById()方法找到 html 文档中 id 为 t1 的标签，并将其封装对象返回给 a1。
var a1 = document.getElementById("t1");
DOM 操作其实就是两步，先找到需要操作的标签的对象，然后对对象进行操作。
// 根据id属性获取元素(返回一个对象)
document.getElementById(id值)
// 根据name属性获取标签(返回多个对象(数组))
document.getElementsByName(name值);
// 根据标签名获取元素(返回多个对象(数组))
document.getElementsByTagName(标签名称)
// 根据class属性获取标签(返回多个对象(数组))
document.getElementsByClassName(类名)
获取文本 OR 设置文本
元素节点.innerHTML // 可识别标签
元素节点.innerText // 不识别标签，将标签当做文本处理
可以使用dom对象的 innerHTML 属性和 innerText 属性，innerHTML 可以识别内容中的标签；而 innerText 是识别纯文本，即使有标签，innerText 也是将标签当做文本处理的。
function test21() {
var dom1 = document.getElementById("t1");
dom1.innerText="<input type = 'text' />";
}
function test22() {
var dom = document.getElementById('t1');
dom.innerHTML="<input type = 'text' />";
}
innerText的效果：
元素节点.属性名 //例如 元素节点.value 获取 value 属性的值
元素节点.属性名.样式名
style 属性比较特殊，想要修改 style 属性不像其他属性那样直接赋值，而是需要对具体的样式属性进行修改，比如，下面代码将元素节点的背景颜色修改为红色，浮动设置为右浮动。
dom.style.backgroundColor="red";
dom.style.cssFloat="right";
// 注意：
// 如果使用的是IE浏览器设置浮动使用styleFloat
// 如果使用的不是IE浏览器，比如Chrome，那么设置浮动使用cssFloat
注意：在CSS中背景颜色的样式属性名是 background-color，浮动的样式属性名是 float，而JavaScript中属性名会不一样，这个不要求背下来，再需要用的时候去找CSS帮助文档 中会告诉我们在JavaScript中使用时的属性名。比如，下面的 background-color 属性的说明中有对应的脚本特性为 backgroundColor，这个脚本特性就是我们在JavaScript中需要写的属性名。Java1.8、JS、Html5、Css、SQL、正则表达式、jquery、W3CSchool中文帮助文档下载地址
在学习HTML标签的时候，遇到了一些以 on 开头的属性，这些属性都是事件，可以使用在标签定义时为标签添加一个事件，但是这种事件的绑定是静态的绑定，没办法变更事件，使用JavaScript可以实现动态绑定，可以根据需要绑定事件、解除事件等。
元素节点.事件名=方法名()
<body>
<button type="button" onclick="javascript:test4();">测试事件1</button>
<button type="button" id="b1">测试事件2</button>
<script type="text/javascript">
// 事件
function test4() {
var dom = document.getElementById("b1");
dom.onclick=function(){
alert("T_T");
}
}
</script>
</body>
在绑定事件的时候，可以使用上面的方法，也可以使用添加或移除事件监听的方法进行绑定或解绑，事件监听的好处在于可以绑定多个事件 。但实际上不太常用，一般会用JQuery来进行事件监听
function f() {
alert("T_T");
}
// 绑定事件
function test4() {
var dom = document.getElementById("b1");
dom.addEventListener("click", f);
}
// 解除事件
function test5() {
var dom = document.getElementById("b1");
dom.removeEventListener("click", f);
}
https://www./content-1-835301.html
