element

element对象对应于网页的HTML标签元素，每一个HTML标签元素，在DOM树上都会转化为一个element节点对象。

相关遗漏知识点

1、element.tagName
返回指定元素的大写标签名，与nodeName属性的值相等

2、element.innerHTML
!如果插入的文本包括HTML标签，会被解析为节点插入对象DOM，但如果插入script标签，会生成script标签，但并不会执行。

3、elemente.classList与element.className
Element.classList返回一个类似数组的对象，element.className返回一个由该element各class属性值组成的字符串，其中每个class用空格分隔。
className和classList方法的异同——添加和删除某个类

Var box=document.getElementById('box');
//添加
a、box.className+='bold';
b、box.classList.add('bold');
//删除
a、box.className=box.className.replace(/^bold$/,'')
b、box.classList.remove('bold');

 

盒模型相关属性

4、client系列
1）element.clientHeight,element.clientWidth
返回元素节点可见部分的宽高，即包括padding和width但不包括滚动条边框和margin的值
对于整张网页来说，当前可见高度，即视口高度要从document.documentElement对象上获取。
且

//没有滚动条时
document.documentElement.clientHeight==window.innerHeight;//true
//有滚动条时
document.documentElement.clientHeight<=window.innerHeight;//true，此时等于window.innerHeight减去水平滚动条的高度\

！注意不能用document.body.clientHeight或clientWidth，因为document.body会返回body节点，与视口大小无关。
2)、element.clientLeft,element.clientTop
返回元素节点上边框及左边框的宽度值，单位为像素，这两个属性包括滚动条的宽度，但不包括margin及padding。
！如果元素的显示设为display：inline，其clientLeft属性一律为0

5、scroll系列
1)、Element.scrollHeight，element.scrollWidth分别返回某个网页元素的总高度总宽度，包括由于存在滚动条而不可见的部分，默认情况下，他们包括padding，但不包括border和margin

//不存在溢出
Box.scrollHeight==box.clientHeight//true
//存在溢出，且滚动条滚动到内容底部。
Box.scroolHeight-box.scrollTop==box.clientHeight//true

如果滚动条没有滚动到内容底部，上面的表达式为false，该特性结合onscroll事件，可用于判断用户是否滚动到了指定元素的底部，比如向用户展示某个内容区块时，判断用户是否滚动到了区块的底部。

box.onscroll=function(){
If(this.scrollHeight-this.scrollTop==this.clientHeight{console.log('谢谢阅读')}
else{console.log('您还未读完')}
}

 

2）、element.scrollLeft,element.scrollTop
表示网页元素的水平滚动条向右侧、下侧滚动的像素数量，若没有滚动，这俩属性值则为0
！若要查看整张网页的水平的和垂直的滚动举例，要行document.body元素上读取。
Document.body.scrollLeft

6、offset系列
1）element.offsetHeight,elementoffsetWidth
这两个属性分别返回元素的垂直高度、水平宽度，这两个属性包括padding和border以及滚动条，注意与element.clientHeight、element.clientWidth区分开，如果没有滚动条，element.offsetHeight只比element.clientHeight多了边框border的高度。

！整张网页的高度，可以在document.documentElement和document.body上读取。
2）、element.offsetLeft，element.offsetTop返回当前元素相对于其父节点的水平or垂直位移。
如何求元素左上角相对于整张网页的坐标呢？

var getPos=function(e){
var posX=0,posY=0;
while(e!=null){
posX+=e.offsetLeft;
posY+=e.offsetTop;
e=e.offetParent;
}
console.log({'posX':posX,'posY':posY})
return;
}//这样求，前提是均设置相关position