码迷,mamicode.com
首页 > 编程语言 > 详细

javascript document对象 第21节

时间:2015-08-20 15:12:02      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

<html>
<head>
	<title>DOM对象</title>
	<style type="text/css">
	  table {
                   border:1px solid green;
				   border-collapse:collapse;
				   width:300px;
	  }
	  td {
              padding:5px;
              border:1px solid green;
			  font-size:16px;
			  text-align:center;
	  }
	  table#tab {
                  border:1px solid green;
				   border-collapse:collapse;
				   width:128px;
	  }
	  #tab td {
              
              border:1px solid green;
			  padding:1px;
	  }
	  #tab td img {
          border:0; 
	  }
	</style>
	<script type="text/javascript">
	       function showMsg(id) {
                   var val = document.getElementById(id);//节点
				   if(val.nodeName == "SPAN") {
                         alert(val.innerHTML);// 文本使用innerHTML
						 val.innerHTML = "oracle";//可以取值 赋值
				   } else {
                        alert(val.value);//文本框使用value属性取值
						val.value="李四";
				   }

		   }
		   function checkAll(sta) {
                // alert(sta);
				var arr = document.getElementsByName("loves");//数组
				//alert(arr.length);
				//设置状态
				for(var i = 0; i < arr.length; i++ ) {
                     arr[i].checked = sta;
				}
		   }
	
	</script>	
	</head>
	<body>
	<div>DOM对象</div>
		1.document对象  getElementById()  getElementsByName()<br/>
			<script type="text/javascript">
			     /*
			      document.open();//打开流
				  document.close();
				  */
			     document.write("document.body : ", document.body.nodeName , "<br/>");
				  document.write("document.cookie : ", document.cookie , "<br/>");
				  document.write("document.domain : ", document.domain , "<br/>");
				  document.write("document.lastModified : ", document.lastModified , "<br/>");
				  document.write("document.referrer : ", document.referrer , "<br/>");
				  document.write("document.title : ", document.title , "<br/>");
				  document.write("document.URL : ", document.URL , "<br/>");
				/*
				  document.writeln("document.URL : " );
				  document.write("document.URL : " );
                  */
			</script>
			<table>
			<tr><td><span id="show">javascript</span></td></tr>
			<tr><td><input type="text" name="username" id="username"/></td></tr>
			<tr><td><input type="button" value="span" onclick="showMsg(‘show‘)"/>
			<input type="button" value="文本框" onclick="showMsg(‘username‘)"/></td></tr>

            <tr><td><input type="checkbox" name="control"  onclick="checkAll(this.checked)"/>全选/全不选</td></tr>
			<tr><td>
			
			<input type="checkbox" name="loves" value="足球"/>足球
			<input type="checkbox" name="loves" value="上网"/>上网
			<input type="checkbox" name="loves" value="旅游"/>旅游
			<input type="checkbox" name="loves" value="阅读"/>阅读

			</td></tr>
			</table><br/>

		2.document对象  getElementsByTagName()<br/>
		    
			<script type="text/javascript">
			      function randomImg() {
						var tab = document.getElementById("tab");//获取表格
						//通过标记名获取img
						var imgs = tab.getElementsByTagName("img");
						//alert(imgs.length);
						for(var i = 0; i < imgs.length; i++ ) {
							imgs[i].src = "ICONS/0" + ( Math.round( Math.random() * 84) + 11) + ".BMP"

						}

				  }
			</script>
			<table id="tab">
			<tr>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			</tr>
			<tr>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			</tr>
			<tr>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			</tr>
			<tr>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			<td><img src="ICONS/011.BMP"/></td>
			</tr>
			

			</td></tr>
			</table><br/>
         <input type="button" value="打散" onclick="randomImg()"/><br/>

		3.集合<br/>
		    <a href="http://www.baidu.com">百度</a><br/>
			<a href="http://www.sina.com">新浪</a><br/>
			<a href="http://www.taobao.com">淘宝</a><br/>
			<form><input type="button" value="提交" /></form>
			<form action="DOM对象操作.htm">
			<input type="button" value="提交" />
			</form>
			<img src="p1.jpg"/><br/>
			<img src="p2.jpg"/><br/>
			<script type="text/javascript">
			   document.write("document.links[1] .href : ", document.links[1] .href, "<br/>");
			   document.write("document.forms[1] .action : ", document.forms[1] .action, "<br/>");
			   document.write("document.images[17] .src : ", document.images[17] .src, "<br/>");
			   
			   function replaceCon() {
						document.links[1] .href = "http://www.163.com";
					   document.forms[1] .action = "内置对象.htm";
					   document.images[17] .src = "开发语言排行.jpg";
					   alert(document.forms[1] .action);

				  }
			</script>
			
         <input type="button" value="替换" onclick="replaceCon()" />

</body>
</html>

 rs:

技术分享

2.

技术分享

javascript document对象 第21节

标签:

原文地址:http://www.cnblogs.com/feilongblog/p/4744907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!