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