DOM专题

众所周知js具有改写html的强大功能，而由于html文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM

• 始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
  
  • 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
  • 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
  • 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
  • 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

获取选定DOM节点

• 最常用的方法是document.getElementById()和 document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()

• 第二种方法是使用querySelector() 和 querySelectorAll()

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

• DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document

• eg:选择出指定条件的节点：

<!-- HTML结构 -->
<div id="test-div">
<div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>


// 选择JavaScript:
var js = document.querySelector("#test-p");//id查询返回唯一一个Node
// 选择Python,Ruby,Swift:
var arr = document.querySelectorAll(".c-red")[1].children; //class查询返回NodeList
// 选择Haskell:
var haskell = document.querySelectorAll('.c-green')[1].children[1]; //class查询返回NodeList

---

更新DOM

通过上文的方法获取节点之后我们可以对其进行更新。以下介绍两种方法：

修改innerHTML属性

• 此种方法不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
• 用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

修改innerText或textContent属性

• 此种方法可以自动对字符串进行HTML编码，保证无法设置任何HTML标签，比较保险

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

二者区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。

• DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

---

插入DOM

插入前老规矩，先获取节点。但是需判断此节点是否为空
- 节点为空时：
- 直接使用innerHTML = ‘child‘添加即可
- 节点非空时
- 现在就不能用刚才的方法了。强行使用会将原有节点覆盖掉。此时还有两种方法添加新节点：appendChild
- appendChild：将一个子节点添加到父节点的最后一个子节点

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>


<!--把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：-->


var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);


<!--现在，HTML结构变成了这样：-->


<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

• 动态添加新节点
  
  • 从零创建一个新的节点，然后插入到指定位置

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);


<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

• 动态创建节点并且添加到DOM树中
  
  • eg:下面的代码动态创建了一个

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

insertBefore

• 使用parentElement.insertBefore(newElement, referenceElement);将节点插入指定位置，也就是referenceElement之前

eg:把Haskell插入到Python之前

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>



var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);        //ref为要插入的参考节点（插入到参考节点前）



<!-- 新的HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过++迭代children属性++实现

var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i个子节点
}

eg:按字符串顺序重新排序DOM节点

<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>


// sort list:
var list = document.getElementById('test-list');
var lis = list.getElementsByClassName('lang');
for(var i = 0 ; i < lis.length ; i++){
  for(var j = 1 ; j < lis.length-i ; j++){
    var li1 = lis[j - 1];
    var li2 = lis[j];
    if(li1.innerText > li2.innerText){
    list.insertBefore(li2,li1);
    }
  }
}

---

删除DOM

删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置

• 要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新.即删除掉某节点后，通过parent.children[index]再也无法找到。
- eg:把与Web开发技术不相关的节点删掉

<!-- HTML结构 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>


// TODO
var web = ["JavaScript", "HTML", "CSS"];
var ul = document.getElementById("test-list");

for (var li of ul.children) {
    if(web.indexOf(li.innerText) === -1) {
        ul.removeChild(li);
    }
}