DOM

JS中的DOM操作：盒子模型

DOM 提供属性和方法来操作页面中的元素

获取元素属性和方法

 document.getElementById(id); //这个只能在document的上下文中获取元素
 [context].getElementsByTagName([Tag-Name]);
 [context].getElementsByClassName([Class-Name]); //在IE6-8中不兼容
 [context].getElementsByName([Name]) //在IE中只对表单的name起作用



// 在IE6-8中不兼容
 [context].querySelector([selector])
 [context].querySelectorAll([selector])

获取元素的属性

document
document.documentElement (获取HTML元素节点，这里HTML作为一个节点)
document.head
document.body

childNodes 所有子节点
children 所有元素子节点
// 在IE6~8中会把注释节点当做元素节点

parentNode
firstChild / firstElementChild
lastChild / lastElementChild
previousSibling / previousElementsSibling
nextSibling / nextElementsSibling
// 所有带element都不兼容IE6~8

DOM的增加删除修改

// 创建元素
document.createElement([TagName])
document.createTextNode([TEXTCONTENT])
字符串拼接，基于innerText / innerHTML 存放到容器中
document.createDocumentFragment() // 集中加入domTree


// 增加元素
[parent].appendChild([child])
[parent].insertBefore([element], [new-element]); 将new-element放在element之前
[elment].cloneNode([true/false])
[parent].removeChild([element])

// 属性设置
// 放在堆内存中的，将页面元素看成是一个对象
[element].xxx = xxx
console.log([element].xxx);
delete [element].xxx

// 可以体现在标签上
[element].setAttribute()
[element].getAttribute()
[element].removeAttribute()

获取元素样式和操作样式

// 修改元素样式
[element].style.xxx = xxx; 修改行内样式
[element].style.className = xxx; 设置样式类别


// 获取原始样式 style对象的属性
let w = box.style.width; //=> 获取的是当前元素写在行内的样式
如果有这个样式但是没有写在行内上，则无法获取

JS盒子模型

基于一些属性和方法，让我们获取元素的样式信息
clientWidth offsetWidth等

• client
  • height / width
  • top / left
• offset
  • width / height
  • top / left
  • parent 父级参照物
• scroll
  • width / height
  • top / left

window.getComputedStyle([element],[伪类]) / [element].currentStyle
let box = document.getElmentById('box');


// content-box 传统盒模型 设置宽高的时候只是内容的宽高
// border-box 新的盒子模型  方便开发中使用-不用手动调整
// 切换 box-sizing


// 获取盒子可视区域的宽度高度（内容 + 左右或者上下padding)
box.clientWidth; 
box.clientHeight;
// 内容溢出对盒子的大小没有影响
// 获取的结果是没有单位的----其余的盒模型属性也是
// 获取的结果是整数，四舍五入到整数---其余盒模型的属性也是

// 获取的是当前屏幕的可视化宽高
document.documentElement.clientHeight;
document.documentElement.clientWidth;

let windowWidth = document.body.clientWidth || document.documentElement.clientWidth;

// 获取左边框和上边框的大小
// 没有bottom和right
box.clientWidth;
box.clientHeight;

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

// 没有溢出的情况下，获取的结果和client一样
// 有溢出的情况下，获取的结果约等于（不同浏览器的结果同，overflow的值会影响结果）
// 真是内容的宽高(上、左padding + 真是内容的宽度/高度)
box.scrollHeight;
box.scrollWidth;

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


// scrollTop 滚动条蜷曲的部分长度
box.scrollTop; // 竖向
box.scrollLeft; // 横向

let box = document.getElementById('box')
// 竖向的滚动条蜷去的高度
// 横向滚动条卷去的高度
// 1. 边界值
// min = 0
// max = 整个的高度scrollHeight - 屏幕的高度(clientHeight)
box.scrollHeight;
box.scrollWidth;
// 13个盒子模型属性，只有上面两个是可读写的属性
// 其余的都是只读属性，不能够设置值

// 应用：
// 回到顶部
box.scrollHeight = 0;
// 快速定位到底部
box.scrollTop = box.scrollHeight - box.clientHeight;

box.offsetParent;//取父级的参照物(不一定是父元素)
父级参照物的查找，同一个平面中最外层的元素是所有后代的父级参照物
box.offsetTop; //距离父级参照物的上偏移
box.offsetLeft; //距离父级参照物的左偏移 （当前元素的外边框到父级参照物的里边框）

document.body.offsetParent = null; 到body处就结束了
// 区别于浮动的情况, 浮动后位置还占，相当于一个映射的位置

getComputedStyle

获取当前元素所有经过浏览器计算后的样式
哪怕你没有设置和见过的样式也都计算了
不管你写或者不写，也不论卸载哪里，均可以使用getComputedStyle获取
在IE6-8下不兼容，需要基于currentStyle获取

// 第一个参数是要操作的元素，第二个参数是元素的伪类 :after / :before
// 获取的是一个对象 CSSStyleDeclearation
let styleObj = window.getComputedStyle([element],null)
// 获取值
styleObj['backgroundColor']
styleObj.display

// 兼容IE 6-8
styleObj = [element].currentStyle;