JS中的DOM操作————值得一看!!!

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;
原创文章 73 获赞 64 访问量 2727

猜你喜欢

转载自blog.csdn.net/qq_42147171/article/details/105153079