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

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

msirene

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

阅读量116

点赞数

分类专栏： Javasprict

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

版权

Javasprict 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>javascript037.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">
	  /*
	    document对象 代表给定浏览器窗口中的 HTML 文档。
		使用document对象，获取HTML页面中的标签节点对象，对标签节点对象进行操作
		
		document对象获取HTML页面中的标签节点对象的三个方法
		
		getElementById("标签节点的id属性值")
		
		getElementsByName("标签节点的name属性")
		
		getElementsByTagName("标签名")
	  */
	 
	 function documentDemo(){
		 var tableNode = document.getElementById("tab_id");
		 //表格table对象的属性 nodeName 是标签名
		// alert(tableNode.nodeName);
		//对表格节点对象的style属性进行设置
		tableNode.style.border = "5px solid #00FF00";
	 }
	 
	 function documentDemo2(){
	    var	 txtNode = document.getElementsByName("txt");
		//alert(txtNode[0].nodeName);
		alert(txtNode[0].value);
	
	 }
	 
	 function documentDemo3(){
		 var tdNode = document.getElementsByTagName("td");
		// alert(tdNode.length);
		for(var x = 0 ; x < tdNode.length ; x++){
		    tdNode[x].style.background = "#FFFF0"+x;	
	   }
	  }
	</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;}
	</style>
  </head>
  
  <body>
	  <input type="button" value="document对象演示"  οnclick="documentDemo3()"/><br />
	  
	  <div class="onediv">
	    这里是一个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>

msirene

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础(26)—document对象(1)

javascript037.html --> /* document对象代表给定浏览器窗口中的 HTML 文档。使用document对象，获取HTML页面中的标签节点对象，对标签节点对象进行操作 document对象获取HTML页面中的标签节点对象的三个方法 getElementById("标签节点
复制链接

扫一扫

专栏目录