javascript学习笔记—DOM常用API、属性、方法、函数

huobengluantiao8
浏览: 1028535 次
最近访客更多访客>>

u012363178
wangyy
lsmh2000
shlpyy
博主相关

博客
微博
相册
留言
关于我
文章分类

全部博客 (1470)
社区版块

存档分类

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>DOM常用属性和方法</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  
 </HEAD>

 <BODY id="bb">
  	<table id="tab" border=1>
		<thead id="Thead">
		<tr>
			<th onClick="sortTable('tab',0,'int')" style="cursor:pointer">ID</th>
			<th onClick="sortTable('tab',1)" style="cursor:pointer">姓名</th>
			<th onClick="sortTable('tab',2,'int')" style="cursor:pointer">年龄</th>
			<th onClick="sortTable('tab',3,'date')" style="cursor:pointer">出生日期</th>
		</tr>
		</thead>
		<tbody id="Tbody">
		<tr id="tr1">
			<td width=100 id="ID">1</td>
			<td id="name" width="100">张三</td>
			<td id="age" width="100">25</td>
			<td id="date" width="100">1970-9-9</td>
		</tr>
		<tr id="tr2">
			<td width=100 id="ID">3</td>
			<td id="name" width="100">李四</td>
			<td id="age" width="100">18</td>
			<td id="date" width="100">1980-9-9</td>
		</tr>
		<tr id="tr3">
			<td width=100 id="ID">2</td>
			<td id="name" width="100">王五</td>
			<td id="age" width="100">19</td>
			<td id="date" width="100">1990-9-9</td>
		</tr>
		<tr id="tr4">
			<td width=100 id="ID">6</td>
			<td id="name" width="100">续写</td>
			<td id="age" width="100">22</td>
			<td id="date" width="100">1965-9-9</td>
		</tr>
		<tr id="trr" name="rr">
			<td width=100 id="ID1">5</td>
			<td id="name" width="100">经典</td>
			<td id="age" width="100">30</td>
			<td id="date" width="100">1950-9-9</td>
		</tr>
		</tbody>
	</table>
	<div id="textDiv">测试</div>
	<div id="txt"></div>
	<div id="removeDiv">removeDiv</div>
	<div id="txtDiv">aaa</div>
	<form name="form1"></form>
	<form name="form2"></form>
	<a href="#" name="a1">超链接一</a>
	<a href="#" name="a2">超链接二</a>

 </BODY>
 <script type="text/javascript" > 
		//返回指定id的元素节点
		function $(id){
			return id ? document.getElementById(id) : id ;
		}
 /* */
		var oHtml = document.documentElement; //得到<html>元素 
		alert("节点名称："+oHtml.nodeName);
		alert("节点类型："+oHtml.nodeType);

		//获取<head> 元素的几种方法，效果一样
		var oHead = document.head;
		oHead = oHtml.firstChild;
		oHead = oHtml.childNodes.item(0);
		oHead = oHtml.childNodes[0];
		oHead = oHtml.children.item(0);
		oHead = oHtml.children[0]; 
		
		//获取 <body>元素的几种方法，效果一样
		var oBody = document.body;
		oBody = oHtml.lastChild;
		oBody = oHtml.childNodes.item(1);
		oBody = oHtml.childNodes[1];
		oBody = oHtml.children.item(1);
		oBody = oHtml.children[1];

		alert(oHead.parentNode == oHtml); //head节点的父节点是html节点，返回 true   
		alert(oBody.parentNode == oHtml); //body节点的父节点是html节点，返回 true   
		alert(oBody.previousSibling == oHead); //body节点的上一个兄弟节点是head节点 ，返回 true  
		alert(oHead.nextSibling == oBody);//head节点的下一个兄弟节点是body节点，返回 true  
		alert(oHead.ownerDocument == document); //判断head节点的根元素是否指向Document，返回 true 
		alert(oBody.ownerDocument == document); //判断body节点的根元素是否指向Document，返回 true 

		var tdArray = document.getElementsByTagName("td"); //得到一个td标签的集合
		for(var i=0;i<tdArray.length;i++){ //遍历集合，输出所有标签的内容
			alert(tdArray[i].innerHTML); 
		}
 
		var node = $("textDiv"); 
		alert(node.innerHTML);
		

		//创建一个div元素节点
		var div = document.createElement("div");
		alert(div.nodeType); 
		//创建一个文本节点
		var text = document.createTextNode("创建的文本节点");
		alert(text.nodeType);
		var txtNode = $("txt");
		txtNode.appendChild(text);  //将创建的文本节点添加到指定的元素内
		alert(txtNode.innerHTML); //输出文本节点的内容
		
		//为元素设置属性值
		//div.id = "myID"; 
		div.setAttribute("id","myID"); //效果同上，为创建的div设置id属性
		alert("div的属性id的值是："+div.getAttribute("id")); //获取div的属性id的值，如果属性不存在，返回null
		
		//设置div中的内容
		div.innerHTML = "<p>续写经典</p>";

		//将创建的div加入到body中
		var body = document.getElementsByTagName("body")[0];
		body.appendChild(div);

		//通过id查找元素
		div = $("myID");
		alert(div.innerHTML); //访问id为“myID”的元素的内容 

		//获得表格的集合
		var arr = new Array();
		arr = document.getElementById("tab").rows; //获得id为“tab”的表格的集合
		alert("表格的行数为："+arr.length);
		//删除表格中指定的一行数据
		document.getElementById("tab").deleteRow(arr.length-1);
 
		var han = {
			//获取子节点的集合（ie，ff通用）
			getChildNodes:function(node){
				var arr = [];
				var nodes = node.childNodes;
				for(var i in nodes){
					if(nodes[i].nodeType == 1){ //查找元素节点
						arr.push(nodes[i]);
					}
				}
				return arr;
			},
			//获取第一个元素子节点（ie，ff通用）
			getFirstElementChild : function(node){
				return node.firstElementChild ? node.firstElementChild : node.firstChild ;
			},
			//获取最后一个元素子节点（ie，ff通用）
			getLastElementChild : function(node){
				return node.lastElementChild ? node.lastElementChild : node.lastChild ;
			},
			//获取上一个相邻节点（ie，ff通用）
			getPreviousSibling : function(node){
				//找到上一个节点就返回节点，没找到就返回null
				do{
					node = node.previousSibling;
				}while(node && node.nodeType!=1)
				return node;
			},
			//获取下一个相邻节点 （ie，ff通用）
			getNextSibling : function(node){
				//找到下一个节点就返回节点，没找到就返回null
				do{
					node = node.nextSibling;
				}while(node && node.nodeType!=1)
				return node;
			},
			//将元素插入到指定的node节点后面
			insertAfter : function(newNode,targetNode){
				if(newNode && targetNode){
					var parent = targetNode.parentNode;
					var nextNode = this.getNextSibling(targetNode);
					if(nextNode && parent){
						parent.insertBefore(newNode,nextNode);
					}else{
						parent.appendChild(newNode);
					}
				}
			}
		};
		//创建一个div元素节点
		var newDiv = document.createElement("div");
		newDiv.innerHTML = "一二三四";
		var div1 = $("textDiv");
		//将元素插入到指定节点后面
		han.insertAfter(newDiv,div1); 

		//创建一个div元素节点
		var newDiv2 = document.createElement("div");
		newDiv2.innerHTML = "五六七八";
		var div2 = $("textDiv");
		//将元素插入到指定节点前面
		div2.parentNode.insertBefore(newDiv2,div2);

		
		//获取子节点的个数（ie，ff通用）
		var a2 = han.getChildNodes(Tbody);
		alert("body子节点长度："+a2.length);
		
		//获取首个子节点的内容 （ie，ff通用）
		var firstNode = han.getFirstElementChild(tab).innerHTML;
		alert("tab的首个子节点内容是："+firstNode);

		//获取最后一个子节点的内容 （ie，ff通用）
		var lastNode = han.getLastElementChild(tab).innerHTML;
		alert("tab的最后一个子节点内容是："+lastNode);
		
		alert("tab的父节点名字是："+tab.parentNode.nodeName); //获取父节点名字
		alert("tab的父节点类型是："+tab.parentNode.nodeType); //获取父节点类型
		alert("tab的父节点值是："+tab.parentNode.nodeValue); //获取父节点值
		
		var node = document.getElementById("Tbody");
		var myNextSibling;
		if(han.getNextSibling(node)){
			myNextSibling = han.getNextSibling(node);
			alert("Tbody的下一个相邻的节点名字是："+myNextSibling.nodeName);
		}else{
			alert("已经是最后一个节点");
		}
		
		var node1 = document.getElementById("Thead");
		var myPreviousSibling;
		if(han.getPreviousSibling(node1)){
			myPreviousSibling = han.getPreviousSibling(node1);
			alert("Thead的上一个相邻的节点名字是："+myPreviousSibling.nodeName);
		}else{
			alert("已经是第一个节点");
		} 

		//克隆函数,参数为true时：克隆并包括所有子对象；参数为false时：克隆但不包括所有子对象
		var cloneNode = textDiv.cloneNode(true);
		txtDiv.appendChild(cloneNode);

		//检测是否包含有网页元素( HTML Elements )或 TextNodes 对象。返回boolean类型的值
		alert(tr3.hasChildNodes());

		//删除一个子节点，所有子对象将被一起删除
		var remove = bb.removeChild(removeDiv);

		//替换一个子对象，被替换时，所有与之相关的属性内容都将被移除
		var newDIV = document.createElement("div");
		newDIV.innerHTML = "一生经典";
		//var replace =  bb.replaceChild(newDIV,$("textDiv")); //方法一
		var replace = $("textDiv").replaceNode(newDIV);  //方法二，两种效果一样

		//forms:当前文档中的所有表单集合
		alert("<form>表单的个数："+document.forms.length); //获取集合的长度
		for(var i=0;i<document.forms.length;i++){	//遍历集合,输出每一个元素
			alert(document.forms[i].name);			
		}
		//links:当前文档中所有超链接元素的集合
		alert("<a>元素的个数："+document.links.length); //获取集合的长度
		for(var i=0;i<document.links.length;i++){   //遍历集合，输出每一个元素
			alert(document.links[i]);
		}
		
  </script>
</HTML>
分享到：