操做DOM

1,  操做一个dom节点其实就4个操做： 

• 更新：更新该DOM节点的内容，至关于更新了该DOM节点表示的HTML的内容；

• 遍历：遍历该DOM节点下的子节点，以便进行进一步操做；

• 添加：在该DOM节点下新增一个子节点，至关于动态增长了一个HTML节点；

• 删除：将该节点从HTML中删除，至关于删掉了该DOM节点的内容以及它包含的全部子节点。

2， 获取节点方法

第一种方法：

// 返回ID为'test'的节点：
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点，再返回其内部全部tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部全部class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的全部直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二种方法： 

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

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

3，更新DOM

innerHTML属性      能够修改一个DOM节点的文本内容，还能够直接经过HTML片断修改DOM节点内部的子树：

// 获取<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属性

// 获取<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>

修改节点的style属性：

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

4，动态的添加节点

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>