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.οnscrοll=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