动态操作DOM节点js实现

标签：style   blog   class   c   code   java   

    近日再次翻看《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]);
}

动态操作DOM节点js实现,布布扣,bubuko.com

动态操作DOM节点js实现

标签：style   blog   class   c   code   java   

原文地址：http://blog.csdn.net/yingyiledi/article/details/26397415