JavaScript入门(二)

JavaScript入门—操作DOM树

要点

DOM树是一个树形结构，操作DOM树通常是“更新、遍历、新增、删除”。

更新DOM树

• 拿到DOM节点

var id=document.getElementById(‘id’)

var tag=document.getElementsByTagName(‘TagName’);

var class=document.getElementsByClassName(‘className’);

• 更新节点内容

内容：例如（id.innerHTML=’’;）

样式（DOM节点的style属性对应所有的CSS，可以直接获取或设置）：

Id.style.color=’red’;

插入DOM

• 使用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);

//从零创建一个新的节点，然后插入到指定位置

Var list = document.getElementById('list'),

Var haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

list.appendChild(haskell);

• 使用insertBefore将新增节点插入到指定位置。

思路：1、获取父节点。

2、创建新节点

3、取得插入位置的后一个节点

4、使用父节点的insertBefore()；

//把Haskell插入到Python之前

Var list = document.getElementById('list'),

Var ref = document.getElementById('python'),

Var haskell = document.createElement('p');

haskell.id = 'haskell';

haskell.innerText = 'Haskell';

list.insertBefore(haskell, ref);