DOM

获取元素的属性和方法

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等

方法：window.getComputedStyle([ELEMENT],[伪类]) / [ELEMENT].currentStyle

clintHeight|clientWidth

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;

clientLeft|clientTop:获取盒子左边框和上边框的大小

offsetWidth|offsetHeight

let box=document.getElementById('box');
//在client的基础上加上border==盒子本身的宽高

scrollWidth|scrollHeight

//在没有内容溢出的情况下，获取的结果和client是一样的
//在有内容溢出的情况下，获取的结果约等于真实内容的宽高（上/左padding+真实内容的高度/宽度）
//1. 不同浏览器获取的结果不尽相同
//2.设置overflow属性值对最后的结果也会产生一定的影响
//获取整个页面真实的高度
document.documentElement.scrollHeight || document.body.scrollHeight

offsetParent

//=>offsetParent：获取它的父参照物（不一定是父元素）
//父参照物和它的父元素没有必然的联系，父参照物查找：同一个平面中，最外层元素是所有后代元素的父参照物，
而基于position:relative/absolute/fixed可以让元素脱离文档流（一个新的平面），从而改变元素的父参照
物
document.body.offsetParent === null;

offsetTop|offsetLeft

//offsetTop:距离其父级参照物的上偏移
//offsetLeft:距离其父级参照物的左偏移（当前元素的外边框到父参照物的内边框）
//offset:获取当前元素距离body的左|上偏移（不论其父级参照物是谁）
/* 
@params
 *      curEle:current element当前要操作的元素
 *   @return
 *      [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中偏移值自己就算边框，不需要再加边框
      i+=par.clientLeft;
      t+=par.clientTop;
  }
    i+=par.offsetLeft;
    t+=par.offsetTop;
}
  return{
    top:t,
    left；1
  }
}

getComputedStyle

//获取当前元素所经过浏览器计算过的样式
//只要元素在页面中呈现出来，则所有的样式都是经过浏览器计算的
//即使没有设置和见过的样式也都会被计算出来
//样式存在，可以直接获取
//ie6-8浏览器中不兼容，需要基于currentStyle获取
//第一个参数是操作的元素  第二个参数是元素的伪类：after/：before
//获取的结果是CSSStyleDeclaration这个类的实例(对象)，包含当前元素所有的样式信息
let styleObj=wiindow.getComputedStyle([element],null);
  styleObj['backgroundColor']
styleObj.display
//styleObj=[element].currentStyle