document
Document接口表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是DOM tree）。DOM tree包括像 、
这样的还有其他的元素。它提供了全局操作document的功能，像获取网页的URL和在document里创建一个新的元素。(MDN)Properties属性：
Document.body：返回当前文档中的 节点。
Document.characterSet：返回文档正在使用的字符集。
Document.documentElement ：返回当前文档的直接子节点。对于 HTML 文档，HTMLHtmlElement 对象一般代表该文档的 元素。（更多请参考mdn url：https://developer.mozilla.org/zh-CN/docs/Web/API/Document）
Element
是非常通用的基类，所有 Document对象下的对象都继承它. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。
Element.attributes ：返回一个与该元素相关的所有属性集合NamedNodeMap ，如以下代码遍历属性值
<a href="#" id="test">
<script>
var test = document.querySelector("#test");
for(i=0;i<test.attributes.length;i++){
console.log(test.attributes[i].name,test.attributes[i].value)
}
<!--输出href # id test-->
</script>
Element.classList：返回该元素包含的class属性是一个DOMTokenList，该属性拥有add，remove，toggle，contains，replace
add方法添加class
remove方法去除class
toggle判断是否存在类然后决定是否添加或去除
contain判断是否存在类
replace替换类该函数有两个参数oldclass,newclass
.container{
height:50px;
width:50px
background:red;
}
.show{
display:none
}
<div class="container" id="test"></div>
<button id="btn">click</button>
<script>
var btn=document.querySelector("#btn");
var test=document.querySelector("#test");
btn.onclick=function(){
test.classList.toggle(".show");
}
</script>
点击buttn能够改变div是否显示 如果div具有动画效果如animation或者transition便具有动画效果
classname:获得指定元素的类名，赋值能够改变元素的类显示方式
clientLeft，clientRight，clientHeight，clientBottom：返回元素x,y坐标和高度宽度
详细查阅：https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft
nextElementSibling:nextElementSibling属性返回紧跟在其父的孩子列表中指定一个元素，或者null如果指定的元素是最后一个在列表中。
scrollHeight:是一个元素的内容高度的测量，包括由于溢出的内容在屏幕上不可见。
该scrollHeight值等于元素在不使用垂直滚动条的情况下拟合视口中的所有内容所需的最小高度。高度的测量方式与clientHeight：它包括元素的填充，但不包括边框，边距或水平滚动条（如果存在）。它还可以包括伪元素的高度，如::before或::after。如果元素的内容可以适合而不需要垂直滚动条，则它scrollHeight等于clientHeight(MDN)