JavaScript基础(26)—document对象(2)

最新推荐文章于 2024-08-22 23:42:23 发布

msirene

最新推荐文章于 2024-08-22 23:42:23 发布

阅读量142

点赞数

分类专栏： Javasprict

本文链接：https://blog.csdn.net/msirene/article/details/24206141

版权

Javasprict 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>javascript038.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	 /*
	   通过节点对象之间的父子，兄弟关系，进行获取
	   指定一个参考节点 table表格
	 */
	 function documentDemo(){
		 //获取一个参考性的节点 table节点对象
		 var tableNode = document.getElementById("tab_id");
		 alert(tableNode.nodeName);
		// alert(tableNode.nodeName);
		//通过table节点来获取父节点
		// parentNode 获取文档层次中的父对象。
		var parentNode = tableNode.parentNode.parentNode.parentNode;
		alert(parentNode.nodeName);
		
		 }
		 
	  function documentDemo2(){
		  //通过table节点，获取子节点  
		   var tableNode = document.getElementById("tab_id");
		   var childNode = tableNode.childNodes[0].childNodes;
		   alert(childNode.length);
		}
		
		function documentDemo3(){
			 //通过table节点，获取兄弟节点
			 var tableNode = document.getElementById("tab_id");
			// var node = tableNode.previousSibling.previousSibling.previousSibling.previousSibling;
			// alert(node.nodeName);
			var node = tableNode.nextSibling.nextSibling.nextSibling;
			alert(node.nodeName);
		 }
	</script>
	<style type="text/css">
	  .onediv{
		width:200px;
		height:100px;
		border: 1px solid #F00;
		margin-top:20px;
	  }
	  
	  table,td{
		  border:1px solid #00F;
		  width:200px;
		  margin-top:20px;
		  text-align:center;}
		  
	  #tab_id{
		  color:#F00;
	  }
	</style>
  </head>
  
  <body>
	  <input type="button" value="document对象演示"  οnclick="documentDemo()"/><br />
	  <div class="onediv" id="tab_id">
	    这里是一个div区域
	  </div>
	  <input type="text"  name="txt" />
	  <table id="tab_id" cellspacing="0">
	     <tr>
	        <td>java</td><td>php</td>
	     </tr> 
	     <tr>
	        <td>.net</td><td>IOS</td>
	     </tr>
	  </table>
	  <span>这是一个span区域</span> <br />
	  <a href="#">这是一个超链接</a>
  </body>
</html>