javascript的DOM操作

DOM是一个树形结构,要改变HTML的结构，就需要通过JavaScript来操作DOM。

操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点表示的HTML的内容，

遍历：遍历该DOM节点下的子节点，

添加：动态增加了一个HTML节点，

删除：删掉该DOM节点的内容以及它包含的所有子节点。

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

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

// 先定位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');

// 先定位class为'c-green'的节点，再返回其内部所有class包含p的节点：

var arr = document.getElementsByClassName("c-green").getElementsByTagName("p");

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

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

 

更新DOM

// 获取test-js节点:
var P = document.getElementById('test-js');

// 修改文本为JavaScript:
P.innerHTML = 'JavaScript';

// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>

// 修改CSS为: color: #ff0000, font-weight: bold
P.style.color = '#ff0000';
P.style.fontWeight = 'bold'

 

插入DOM

如果这个DOM节点是空的，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

 

使用appendChild

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

<!-- 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>

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

<!-- 得到的结果是： -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

 

使用insertBefore

从零创建一个新的节点，把Haskell插入到Python之前：

var
list = document.getElementById('list'),
ref = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, 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>

 

删除DOM

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

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