JS中的DOM操作:盒子模型属性
DOM:document object model 文档对象模型,提供系列的属性和方法,让我们能在JS中操作页面中的元素
获取元素的属性和方法
document.getElementById([ID])
[context].getElementsByTagName([TAG-NAME])
[context].getElementsByClassName([CLASS-NAME])
//=>在IE6~8中不兼容
document.getElementsByName([NAME])
//=>在IE浏览器中只对表单元素的NAME有作用
[context].querySelector([SELECTOR])
[context].querySelectorAll([SELECTOR])
//=>在IE6~8中不兼容
//---------------------
document
document.documentElement
document.head
document.body
childNodes 所有子节点
children 所有元素子节点
//=>IE6~8中会把注释节点当做元素节点获取到
parentNode
firstChild / firstElementChild
lastChild / lastElementChild
previousSibling / previousElementSibling
nextSibling / nextElementSibling
//=>所有带Element的,在IE6~8中不兼容
DOM的增删改操作
document.createElement([TAG-NAME])
document.createTextNode([TEXT CONTENT])
字符串拼接(模板字符串),基于innerHTML/innerText存放到容器中
[PARENT].appendChild([NEW-ELEMENT])
[PARENT].insertBefore([NEW-ELEMENT],[ELEMENT])
[ELEMENT].cloneNode([TRUE/FALSE])
[PARENT].removeChild([ELEMENT])
//=>设置自定义属性
[ELEMENT].xxx=xxx;
console.log([ELEMENT].xxx);
delete [ELEMENT].xxx;
[ELEMENT].setAttribute('xxx',xxx);
console.log([ELEMENT].getAttribute('xxx'));
[ELEMENT].removeAttribute('xxx');
获取元素样式和操作样式
//=>修改元素样式
[ELEMENT].style.xxx=xxx; //=>修改和设置它的行内样式
[ELEMENT].className=xxx; //=>设置样式类
//=>获取元素的样式
console.log([ELEMENT].style.xxx); //=>获取的是当前元素写在行内上的样式,如果有这个样式,但是没有写在行内上,则获取不到
JS盒子模型属性
基于一些属性和方法,让我们能够获取到当前元素的样式信息,例如:clientWidth 、offsetWidth等
- client
- width / height
- top / left
- offset
- width / height
- top / left
- parent
- scroll
- width / height
- top / left
方法:window.getComputedStyle([ELEMENT],[伪类]) / [ELEMENT].currentStyle
let box = document.getElementById('box');
//=>获取盒子可视区域的宽高(内容宽度+左右PADDING)
//1.内容溢出与否对他无影响
//2.获取的结果是没有单位的(其余的盒模型属性也是)
//3.获取的结果是整数,它会自己进行四舍五入(其余的盒模型属性也是)
box.clientWidth
box.clientHeight
//获取当前页面一屏幕(可视化)区域的宽高
let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;
//=>获取盒子左边框和上边框的大小
box.clientLeft
box.clientTop
let box = document.getElementById('box');
//=>在CLIENT的基础上加上BORDER == 盒子本身的宽高
box.offsetWidth
box.offsetHeight
//=>在没有内容溢出的情况下,获取的结果和CLIENT是一样的
//=>在有内容溢出的情况下,获取的结果约等于真实内容的宽高(上/左PADDING + 真实内容的高度/宽度)
//1.不同浏览器获取的结果不尽相同
//2.设置overflow属性值对最后的结果也会产生一定的影响
box.scrollWidth
box.scrollHeight
//获取整个页面真实的高度
document.documentElement.scrollHeight || document.body.scrollHeight
let box = document.getElementById('box');
//=>竖向滚动条卷去的高度
//=>横向滚动条卷去的宽度
//1.边界值
//min=0
//max=整个的高度scrollHeight - 一屏幕高度clientHeight
box.scrollTop
box.scrollLeft
//=>13个盒子模型属性,只有这两个是“可读写”的属性(既可以获取也可以设置对应的值),其余的都是“只读”属性(不能设置值,只能获取)
box.scrollTop=0;
//=>offsetParent:获取它的父参照物(不一定是父元素)
//父参照物和它的父元素没有必然的联系,父参照物查找:同一个平面中,最外层元素是所有后代元素的父参照物,而基于position:relative/absolute/fixed可以让元素脱离文档流(一个新的平面),从而改变元素的父参照物
document.body.offsetParent === null;
//=>offsetTop:距离其父参照物的上偏移
//=>offsetLeft:距离其父参照物的左偏移(当前元素的外边框到父参照物的里边框)
/*
* offset:获取当前元素距离BODY的左/上偏移(不论其父参照物是谁)
* curEle:current element当前要操作的元素
* [object]包含上/左偏移的信息 => {top:xxx,left:xxx}
*/
function offset(curEle) {
let par = curEle.offsetParent,
l = curEle.offsetLeft,
t = curEle.offsetTop;
//存在父参照物,而且还没有找到BODY
while (par && par.tagName !== "BODY") {
//在原有偏移的基础上累加:父参照物的边框、父参照物的偏移
if (!/MSIE 8\.0/.test(navigator.userAgent)) {
//IE8中偏移值自已就算了边框了,不需要我们在加边框的值 navigator.userAgent获取当前浏览器的版本信息
l += par.clientLeft;
t += par.clientTop;
}
l += par.offsetLeft;
t += par.offsetTop;
//继续获取上级参照物
par = par.offsetParent;
}
return {
top: t,
left: l
};
}
getComputedStyle
获取当前元素所有经过浏览器计算过的样式
- 只要元素在页面中呈现出来,那么所有的样式都是经过浏览器计算的
- 哪怕你没有设置和见过的样式也都计算了
- 不管你写或者不写,也不轮写在哪,样式都在这,可以直接获取
在IE6~8浏览器中不兼容,需要基于currentStyle来获取
//=>第一个参数是操作的元素 第二个参数是元素的伪类:after/:before
//=>获取的结果是CSSStyleDeclaration这个类的实例(对象),包含了当前元素所有的样式信息
let styleObj = window.getComputedStyle([element],null);
styleObj["backgroundColor"]
styleObj.display
//=>IE6~8
styleObj = [element].currentStyle;