9dayDOM: Document Object Model(文档对象模型) DOM树回流和重绘重绘(repaint

DOM: Document Object Model(文档对象模型)

DOM树

回流和重绘重绘(repaint)：

影响布局就是回流（重排）回流一定会出发重绘
不影响布局就是重绘

当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。
常见的重绘操作有：

改变元素颜色
改变元素背景色
more ……

回流(reflow)：

又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
常见的回流操作有：

页面初次渲染
浏览器窗口大小改变
元素尺寸/位置/内容发生改变
元素字体大小变化
添加或者删除可见的 DOM 元素
……

重点：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。

DOM 操作

1、获取元素

1.1 根据id名获取

document.getElementById(idName)

[context].getElementsByClassName()获取元素集合

 [context]指的是获取元素的范围

1.2 根据标签名获取

document.getElementsByTagName(tagName)   // 返回一个集合 （类数组对象）  从整个文档获取
element.getElementsByTagName(tagName)    // 从element的后代元素中获取

1.3 根据类名获取（不兼容ie6~8）

document.getElementsByClassName(className)   // 返回一个集合（类数组对象）  从整个文档获取
element.getElementsByClassName(className)   // 从element的后代中获取

1.4 根据 name 属性值获取

正常的规范中，咱们只会给表单元素起name值，如果给其它元素设置name，在ie9以下版本浏览器不兼容，是获取不到的，

所以为了这种情况，咱们以后养成习惯，只给表单元素用name，非表单元素不用name

document.getElementsByName()  //返回集合  只有document才有该方法

1.5 根据选择器获取

注意：querySelector 和querySelectorAll 在ie6-ie8 下不兼容

document.querySelector(选择器)   //选择器第一个满足选择器条件的
document.querySelectorAll(选择器) //选择所有满足选择器条件的，返回nodeList（类数组对象）
element.querySelector(选择器)
element.querySelectorAll(选择器)

1.6 document.head

获取Head元素对象

1.7 document.body

获取body元素对象

1.8 document.documentElement

获取html元素对象

2、获取一屏幕的宽度或者高度，兼容所有的浏览器

// 获取一屏幕的高度
var vH = document.documentElement.clientHeight || document.body.clientHeight;
// 偶去一屏幕的宽度
var vW = document.documentElement.clientWidth || document.body.clientWidth;

3、id小妙招

直接把id当成变量去用的时候，可以获取相应的id元素。（浏览器的机制）

<div id="box1">111</div>
<script>
 console.log(box1)
</script>

2、节点

文档节点
属性节点
元素节点
文本节点
注释节点

2.1 文档节点

nodeType（节点类型）：9
nodeName（节点名称）："#document"
nodeValue（节点值）:null

document.nodeType;
document.nodeName
document.nodeValue;

2.2 属性节点

nodeType：2
nodeName：属性名
nodeValue:属性值

getAttributeNode() 方法从当前元素中通过名称获取属性节点。

 <a href="http://www.baidu.com" id="a1">百度</a>
var a1=a1.getAttributeNode("href");// 获取属性节点
console.log(a1.nodeType);//2
console.log(a1.nodeName);//"href"; 属性名
console.log(a1.nodeValue);//"http://www.baidu.com"; 属性值

2.3 元素节点

●nodeType：1

●nodeName：大写的标签名

●nodeValue:null

<div id="box">百度</div>

<script>
  console.log(box.nodeName)
</script>

2.4 文本节点

●nodeType：3

●nodeName："#text"

●nodeValue:文本内容

●在标准浏览器中，换行和空格也属于文本节点

 <a href="http://www.baidu.com" id="a1">百度</a>

var res=a1.childNodes[0];
console.log(res.nodeType);//3
console.log(res.nodeValue);//"百度";
console.log(res.nodeName);//"#text";

2.5 注释节点

nodeType：8
nodeName："#comment"
nodeValue:注释的内容

<a href="http://www.baidu.com" id="a1">
  <!--a标签 -->
  百度
</a>

a1.childNodes; //NodeList(3) [text, comment, text]
a1.childNodes[1].nodeName;//"#comment"
a1.childNodes[1].nodeType;//8
a1.childNodes[1].nodeValue;//"a标签 "

3、节点之间关系的属性

节点类：

parentNode 父节点

childNodes 所有子节点的集合

firstChild 第一个子节点

lastChild 最后一个子节点

previousSibling 上一个兄弟节点

nextSibling 下一个兄弟节点

元素类：

children 所有子元素的集合

firstElementChild 第一个子元素 IE9+

lastElementChild 最后一个子元素 IE9+

previousElementSibling 上一个兄弟元素 IE9+

nextElementSibling 下一个兄弟元素 IE9+

3.1 parentNode

获取当前节点唯一的父亲节点

<div class="box333">
  <div>
  <!-- 111 -->
  <div id="box">111</div>
</div>
</div>

<script>
    console.log(box.parentNode)
</script>

3.2 childNodes

获取当前节点所有的子节点

3.3 firstChild

获取被选节点的第一个子节点。

3.4 lastChild

获取被选节点的最后一个子节点。

3.5 previousSibling

获取上一个哥哥节点

3.6 nextSibling

获取当前节点的下一个兄弟节点

3.7 children

获取当前元素所有的元素子节点，但是在ie6--ie8下不兼容

3.8 firstElementChild

获取当前节点的第一个元素子节点 ie6-ie8 不兼容

3.9 lastElementChild

获取当前节点的最后一个元素子节点 ie6-ie8 不兼容

3.10 previousElementSibling

获取上一个哥哥元素节点 ie6-ie8 不兼容

3.11 nextElementSibling

获取当前节点的下一个兄弟元素节点 ie6-ie8 不兼容

DOM 的增删改

1、createElement：创建一个元素

document.createElement("div");

2、createTextNode: 创建一个文本节点

var otext=document.createTextNode("哈哈!");

3、appendChild:把元素追加到一个容器的末尾

语法：[context].appendChild([元素])；

 <div id="id1"></div>
  <script>
    var odiv = document.createElement("div");
    id1.appendChild(odiv);
    console.log(id1)
  </script>

4、insertBefore: 把一个元素插入到另一个元素的前面

首先要指定一个父节点

var insertedNode = 父节点.insertBefore(要插入的节点, 插在这个节点之前)

var insertedNode = parentNode.insertBefore(newNode, referenceNode)

newNode：将要插入的节点
referenceNode：被参照的节点（即要插在该节点之前）
insertedNode：插入后的节点
parentNode：父节点

<div id="id1">
  <p class="p1" id="p1">这是P1</p>
</div>
<script>
  var div = document.getElementById('id1');
  var p1 = document.getElementById('p1');
  var odiv = document.createElement("div");
  var returnDom = div.insertBefore(odiv, p1);
console.log(div)
</script>

、cloneNode:把某一个节点进行克隆

【ele】.cloneNode();浅克隆：只是克隆了一个节点，里面的内容还有样式都没克隆
【ele】.cloneNode(true);深克隆：把节点包含的所有内容进行克隆

 <div id="id1">
    <p class="p1" id="p1">这是P1</p>
  </div>
  <script>
    var res = id1.cloneNode();
    var res2 = id1.cloneNode(true)
    console.log(res)
    console.log(res2)
  </script>

6、removeChild：移除某个节点

【context】.removeChild(ele);

<div id="id1">
    1111
    <p class="p1" id="p1">这是P1</p>
  </div>
  <script>
    id1.removeChild(p1);
    console.log(id1)
  </script>

7、set/get/removeAttribute

设置/获取/删除当前元素的某一个自定义属性

setAttribute
getAttribute
removeAttribute

box.setAttribute("index", 1);
box.getAttribute("index");
box.removeAttribute("index");
console.log(box)
// 设置
// box["aa"] = 22;
// 获取
// box["aa"]
//移除
// delete box["aa"];

9day