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()

//将一个子节点插入到一个父节点的最后一个节点,这个节点会从原先位置上删除 JavaScript     Java     Python     Scheme //把 JavaScript 添加到 的最后一项： 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);