首页 > 代码库 > 动态操作DOM节点js实现

动态操作DOM节点js实现

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

   

<INPUT  LEFT: 392px; POSITION: absolute; TOP: 128px" type="button" value=http://www.mamicode.com/"add" onclick="add()"  >>
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为移除子元素的方法同时也回答了引用文章评论的答案。