JavaScript之DOM操作
DOM简介
是什么？
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的效果：
innerHTML的效果：
处理元素属性
元素节点.属性名 //例如 元素节点.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中需要写的属性名。
处理事件
事件绑定
在学习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>在一开始点击测试事件2按钮的时候不会弹出消息提示框，因为测试事件2这个按钮在定义时并没有添加事件，而点击测试事件1按钮之后再点集测试事件2，会弹出消息提示框，因为点击测试事件1按钮之后为测试事件2按钮添加了点击事件。
事件监听
在绑定事件的时候，可以使用上面的方法，也可以使用添加或移除事件监听的方法进行绑定或解绑，事件监听的好处在于可以绑定多个事件。但实际上不太常用，一般会用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);}