修改樣式
可以修改元素的style屬性，修改結(jié)果直接反映到頁面元素
document.querySelector("p").style.color = "#ff0000";
document.querySelector("p").style.fontSize = "30px";
document.querySelector("header").style.backgroundColor = "#fff000";
獲取樣式
使用getComputedStyle方法獲取元素計(jì)算后的樣式缔御，不要通過node.style屬性獲取。
var node = document.querySelector("p");
var color = window.getComputedStyle(node).color;
console.log(color);
class操作
修改樣式盡量使用class的新增衰粹，修改劫流，刪除來實(shí)現(xiàn)
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")); //判斷時(shí)候擁有class="active"吕晌，返回值為布爾值
頁面寬高
clientWidth/clientHeight
offsetWidth/offsetHeight
document.body.clientHeight
document.body.offsetHeight
scrollHeight
元素滾動(dòng)內(nèi)容的總高度（顯示部分內(nèi)容高度和隱藏部分內(nèi)容高度之和），如果沒有滾動(dòng)條烦味，scrollHeight等于clientHeight聂使。
document.body.scrollheight
scrollTop
滾動(dòng)的高度
document.body.scrollTop
window.innerHeight
窗口的高度
window.innerHeight
getBoundingclientRect()
獲取元素在視窗中的位置
HTMLCollection和NodeList
節(jié)點(diǎn)都是單個(gè)對(duì)象，有時(shí)會(huì)需要一種數(shù)據(jù)結(jié)構(gòu)谬俄，容納多個(gè)節(jié)點(diǎn)柏靶。DOM提供兩種集合對(duì)象，用于實(shí)現(xiàn)這種節(jié)點(diǎn)集合：NodeList和HTMLCollection溃论。
NodeList對(duì)象代表一個(gè)有序的節(jié)點(diǎn)列表屎蜓，HTMLCollection是一個(gè)接口，表示HTML元素的集合钥勋，它提供了可以遍歷列表的方法和屬性炬转。
兩種集合對(duì)比：
相同點(diǎn)：都是類數(shù)組對(duì)象，節(jié)點(diǎn)的變化都會(huì)反映在集合中
不同點(diǎn)：少部分方法不同算灸，例如NodeList對(duì)象有forEach方法扼劈，而HTMLCollection沒有
