JavaScript 和 DOM 本身是可以没有关系的，但是开发者需要操作 DOM ，浏览器实现了对应的方法，暴露给开发者，开发者使用 JavaScript 来调用以达到操作 DOM 的目的。
一·获取 DOM
获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：
-
element.getElementById
返回对拥有指定 id 的第一个对象的引用。
-
element.getElementByName
通过元素的 name 属性进行查找的，过去操作表单的时候会经常用到。
通过 getElementsByName 获取到的是 DOM 节点的集合，需要注意的是，这个集合不是数组类型的，而是 NodeList ，其不具备数组的 map 、filter 等方法，但是具备 forEach 方法。
-
element.getElementsByTagName
此方法返回值的类型是 HTMLCollection ，不是 NodeList ，没有 forEach 方法。
可以使用 for 循环对返回值进行遍历。
-
element.getElementsByClassName
与 getElementsByTagName 返回值类型相同，此方法返回类型也是 HTMLCollection。同时此方法也不支持 IE8。
-
element.querySelector
是获取 DOM 节点最常用的方法之一，可以传入 CSS 选择器来匹配获取 DOM 节点。
-
element.querySelectorAll
返回的也是一个 NodeList。返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。
二·修改style样式和class类名来操作DOM
-
1.通过节点·innerHTML来增加标签的内容
element.innerHTML = '<a href="//imooc.com">我变成了超链接</a>';
</script>
获取 id 为 html-element 的 DOM 节点，并通过修改 innerHTML 属性，将这个节点的内容进行了修改。
-
2.通过style来更改样式，更改后为内联样式
tip.style.color = 'red';
节点.style.修改的属性=修改的属性值
-
3.通过class来修改样式
tipEle.className = 'tip show';
节点.classNane=要增加的类名
<label>
<input type="checkbox" class="checkbox">
爱我别走
</label>
//获取节点
var checkbox = document.querySelector('.checkbox');
//点击事件
toggleBtn.onclick = function() {
//获取复选框下的checked属性
var checked = checkbox.getAttribute('checked');
//如果是选中状态就移除checked为不选中
if (checked) {
checkbox.removeAttribute('checked', '');
} else {
//将checked属性设置为checked选中状态
checkbox.setAttribute('checked', 'checked');
}
};
getAttribute 方法就可以获得某个属性的值。
setAttribute 用于给属性设置属性值。
removeAttribute 则是将属性从元素上移除。
这三个方法可以用于元素的任意属性，包括 class 。
