（八）-前端-DOM基础

8.DOM

1).****新建节点

document.createElement("元素名") // 新建一个元素节点

document.createAttribute("属性名") // 新建一个属性节点

document.createTextNode("文本内容") // 创建一个文本节点

document.createDocumentFragment() // 新建一个DOM片段

2).****添加、移除、替换、插入：

appendChild() // 向节点的子节点末尾添加新的子节点

removerChild() // 移除

parentNode.replaceChild(newChild, oldChild );用新节点替换父节点中已有的子节点

insertBeform() // 在已有的子节点前插入一个新的子节点

3).****查找

document.getElementById() // 通过元素id查找,唯一性

document.getElementByClassName() // 通过class名称查找

document.getElementsByTagName() // 通过标签名称查找

document.getElementsByName() // 通过元素的Name属性的值查找 

------------------------------------------------------------------

DOM****回流、重绘

DOM回流(reflow)：页面中的元素增加、删除、大小、位置的改变，会引起浏览器重新计算 其他元素的位置，这种现象称为DOM回流。DOM回流非常消耗性能，尽量避免DOM回流

DOM重绘：元素的某些css样式如背景色、字体颜色等发生改变时，浏览器需要重新描绘渲 染这个元素，这种现象称为DOM重绘。

DOM 操作的读写分离

在JS中把设置样式和获取样式的两种操作分来来写， 设置样式的操作放在一起，读取样式的操作放在一起，这样可以有效的减少DOM的回流和重绘；

Box.style.background = ‘red’;

For(){}

Box.style.color = ‘green’

 

 

DOM事件：

事件的传播机制：先冒泡，然后是目标阶段 然后再去捕获，我们可以利用事件的冒泡来进行事件委托，、也就是可以在父元素上绑定事件，通过事件对象 e 来判断点击的具体元素；可以提供性能；

我们可以利用的 e.stopPropagation()来阻止冒泡；利用 e.preventDefault()来阻止默认事件；

事件中有0级事件绑定和2级事件绑定

JS 盒子模型

// client offset scroll width height left top

// clientWidth 内容宽度 + 左右padding

// offsetWidth clientWidth + 左右 border

// offsetTop 当前盒子的外边框到上级参照物的内边框的偏移量

// offsetParent 上级参照物：有定位的上级（包含 父级，祖父，曾祖父...）元素，所有所有上级都没有定位， 则参照物就是 body

// scroll 内容不溢出 等同于 client

// 内容溢出时 没有设置overflow 值是内容宽高 + 上或左padding

// 内容溢出时 有设置overflow时 值是内容宽高 + 上下或左右padding

// scrollTop 卷去内容的高度

// 13个属性 只有 scrollTop和scrollLeft时可以设置值的， 其他的都是只读属性