动态操作DOM节点js实现

浏览数：17 / 时间：2015年06月09日

近日再次翻看《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实现,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

动态操作DOM节点js实现