动态操作DOM节点js实现

    近日再次翻看《javascript面向对象编程指南》这本书，读到浏览器环境一章，渐渐明白了js作为脚本语言，需要依托宿主环境来实现功能，从浏览器角度考虑，就是对浏览器的BOM和DOM的操作。DOM操作又可分为：访问、修改、删除、新建。每种操作都有独特的方法和属性。下面取dom节点的访问、新建和删除的功能实例来讲解（参考文章）。

<INPUT  LEFT: 392px; POSITION: absolute; TOP: 128px" type="button" value="add" onclick="add()"  >
<INPUT  LEFT: 392px; POSITION: absolute; TOP: 128px" type="button" value="remove" onclick="remove()"  >
  <table id="Table1"  border="1"></table>

function add()//动态添加表格的例子
    {
	var parNode = document.getElementById("Table1");
    var tr=document.createElement("tr");

    var td = document.createElement("td"); //新建一个td类型的Element节点

     td.appendChild(document.createTextNode("这是第一列"));
     tr.appendChild(td);

        var td = document.createElement("td"); //新建一个td类型的Element节点
        td.appendChild(document.createTextNode("这是第二列"));
        tr.appendChild(td);
        parNode.appendChild(tr);

}
function remove()
{
	var parNode=document.getElementById("Table1");

	var tr=document.getElementsByTagName("tr");
	alert(tr);//从此处看出tr为nodelist即节点表，所以删除节点需要指定具体哪个需要删除
	parNode.removeChild(tr[0]);
}

    首先在html中建立两个按钮元素，分别单击响应add和remove函数。两个函数内getElementById、getElementByTagName属于dom元素访问的快速方法，createElement和CreateTextNode分别为新建元素和文本内容的方法，removeChild为移除子元素的方法同时也回答了引用文章评论的答案。

动态操作DOM节点js实现