JavaScript学习笔记二十四：操作DOM

JavaScript教程传送门

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

查询DOM

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

// 返回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;

更新DOM

1、修改innerHTML属性：

// 获取<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>的内部结构已修改

注意，innerHTML会直接替换掉原来的所有子节点。

2、修改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返回所有文本。另外注意IE<9不支持textContent。

插入DOM

1、使用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>

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

var    list = document.getElementById('list'),    haskell = document.createElement('p');haskell.id = 'haskell';haskell.innerText = 'Haskell';list.appendChild(haskell);// 现在HTML变成<!-- 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>

2、使用insertBefore，把一个子节点添加到另一个节点之前。例如：

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

删除DOM

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