JS中的DOM操作：盒子模型属性JS中的DOM操作：盒子模型属性获取元素的属性和方法 DOM的增删改操作获取元素样式

JS中的DOM操作：盒子模型属性

DOM:document object model文档对象模型，提供系列的属性和方法，使得能在js中操作页面中的元素

获取元素的属性和方法

document.getElementById([ID])
[context].getElementsByTagName([TAGNAME])
[context].getElementsByClassName([ClassName])//在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([CHILD])
[PARENT].insertBefore([NEW-ELEMENT],[ELEMENT])

[ELEMENT].clone([true/false])
[PARENT].removeChild([ELEMENT])

// 自定义属性的处理
[ELEMENT].key = val;
[ELEMENT].setAttribute('xxx', xxx);
[ELEMENT].getAttribute('xxx');
[ELEMENT].removeAttribute('xxx');

获取元素样式和操作样式

[ELEMENT].style.xxx = 'xxx' // 修改和设置它的行内样式
[ELEMENT].className = 'className' // 设置样式类

// 获取元素的样式 
let w = box.style.width; // 此方式只能获取当前元素写在行内上的样式，如果有这个样式，但是没写在行内上，则获取不到

JS盒子模型属性

基于一些属性和方法，让我们能够获取到当前元素的样式信息，例如：

clientWidth、offsetWidth等

client
- width / height
- top / left
offset
- width /height
- top / left
- parent
scroll
- width / height
- top / left

方法：getComputedStyle([ELEMENT], [伪类]) / [ELEMENT].currentStyle (IE浏览器)

let box = document.getElementById('box');
// 获取盒子的可视区域的宽高（内容宽度+左右padding）
// 1.内容溢出无影响
// 2.获取的结果不带单位
// 3.获取的结果是整数，会进行四舍五入
box.clientWidth;
box.clientHeight;

//获取当前页面一屏可视区域的宽高
let winW = document.documentElement.clientWidth || document.body.clientWidth;

//=>获取盒子左边框和上边框的大小
box.clientLeft
box.clientTop

let box = document.getElementById('box');
//=>在client的基础上加上border，等价于盒子本身的高度
box.offsetWidth;
box.offsetHeight;

//=>在没有内容溢出的情况下，获取的结果和client是一样的
//=>在有内容溢出的情况下，获取的结果约等于真实内容的宽高
//1.不同浏览器获取的结构不尽相同
//2.设置overflow属性值对最后的结果也会有影响
box.scrollWidth;
box.scrollHeight;

//获取整个页面真实的高度
document.documentElement.scrollHeight || document.body.scrollHeight;

let box = document.getElementById('box');
box.scrollTop // 竖向滚动条卷去的高度
box.scrollLeft // 横向滚动条卷去的高度
//边界值
//min=0
//max=整个的高度scrollHeight-一屏幕高度clientHeight
//=>13个盒子模型属性，只有这2个是“可读写”属性，其余的都是“只读”属性

//=>offsetParent:获取它的父参照物
//=>offsetTop:距离其父参照物的上偏移
//=>offsetLeft:距离其父参照物的左偏移

/**
 * 获取距离body元素左边界和上边界的数值
 * @param curEle 谁距body，就传哪个dom元素，
 */
function offset(curEle) {
  let par = curEle.offsetParent;
  let l = curEle.offsetLeft;
  let t = curEle.offsetTop;
  while(par && par.tagName !== 'BODY') {
    if (!/MSIE 8\.0/.test(navigator.userAgent)) {
      // ie8中偏移值自己就算了边框了，不需要我们在加边框的值
      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
let styleObj = window.getComputedStyle([element], null);
styleObj["backgroundColor"] // 获取具体样式值