javascript学习札记—DOM常用API、属性、方法、函数-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20411 次

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

<!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 == o

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>