原生js 二

一、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的回流和重绘；

DOM事件：

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

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

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

二、this指向的6种情况

全局中的函数和全局变量可以看作是window的方法和属性所以全局函数中的this指向window；方法中的this指向该方法所指的对象；

this指向函数运行时所属的对象

this不指函数本身，也不指函数所对的作用域，指向调用此函数的对象；

this指向分为六种情况：

1）全局函数中的this，在全局环境下调用的时候指向window

注意：如果全局函数内部是严格模式，则在全局环境下不指向window，指向undefined;

2）函数被赋值给某个事件时，指向对象所属的对象

3）this在对象方法中使用时，指向的是方法所属的对象

4）在闭包中this指向window;

5）在构造函数中以及构造函数的原型对象中的this，都指向构造函数的实例对象 var arr=new Array( )  Array是构造函数  arr实例对象

6）箭头函数中的this指向箭头函数所在（定义）的执行环境

三、DOM怎样添加、移除、移动、复制、创建和查找节点

// 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

四、null和undefined的区别？

null是一个表示"无"的对象，undefined是一个表示"无"的原始值

undefined：
　　（1）变量被声明了，但没有赋值时，就等于undefined。
　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
　　（3）对象没有赋值的属性，该属性的值为undefined。
　　（4）函数没有返回值时，默认返回undefined。
null：
　　（1） 作为函数的参数，表示该函数的参数不是对象。
　　（2） 作为对象原型链的终点。

五、new操作符具体干了什么呢?

        （1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
　　（2）属性和方法被加入到 this 引用的对象中。
　　（3）新创建的对象由 this 所引用，并且最后隐式的返回this。