修改样式
可以修改元素的style属性，修改结果直接反映到页面元素
document.querySelector("p").style.color = "#ff0000";
document.querySelector("p").style.fontSize = "30px";
document.querySelector("header").style.backgroundColor = "#fff000";
获取样式
使用getComputedStyle方法获取元素计算后的样式，不要通过node.style属性获取。
var node = document.querySelector("p");
var color = window.getComputedStyle(node).color;
console.log(color);
class操作
修改样式尽量使用class的新增，修改，删除来实现
var nodeDiv = document.querySelector("div");
console.log(nodeDiv.classList);
nodeDiv.classList.add("active"); //新增class="active"
nodeDiv.classList.remove("active"); //删除class="active"
nodeDiv.classList.toggle("active"); //如果没有class="active"，则新增，如果有class="active"，则删除
console.log(nodeDiv.classList.contains("active")); //判断时候拥有class="active"，返回值为布尔值
页面宽高
clientWidth/clientHeight
offsetWidth/offsetHeight
document.body.clientHeight
document.body.offsetHeight
scrollHeight
元素滚动内容的总高度（显示部分内容高度和隐藏部分内容高度之和），如果没有滚动条，scrollHeight等于clientHeight。
document.body.scrollheight
scrollTop
滚动的高度
document.body.scrollTop
window.innerHeight
窗口的高度
window.innerHeight
getBoundingclientRect()
获取元素在视窗中的位置
HTMLCollection和NodeList
节点都是单个对象，有时会需要一种数据结构，容纳多个节点。DOM提供两种集合对象，用于实现这种节点集合：NodeList和HTMLCollection。
NodeList对象代表一个有序的节点列表，HTMLCollection是一个接口，表示HTML元素的集合，它提供了可以遍历列表的方法和属性。
两种集合对比：
相同点：都是类数组对象，节点的变化都会反映在集合中
不同点：少部分方法不同，例如NodeList对象有forEach方法，而HTMLCollection没有
