<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节的更多相关文章

  1. javaScript document对象详解

    Document对象内容集合 document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必 ...

  2. javascript BOM对象 第15节

    <html> <head> <title>浏览器对象</title> <script type="text/javascript&quo ...

  3. 详解JavaScript Document对象

    转自:http://segmentfault.com/a/1190000000660947 在浏览器中,与用户进行数据交换都是通过客户端的javascript代码来实现的,而完成这些交互工作大多数是d ...

  4. 浅尝JavaScript document对象

    document对象 每个载入浏览器的 HTML 文档都会成为 Document 对象.document 对象是HTML文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点).Docu ...

  5. JavaScript document对象

    1.document对象是window对象的子对象,可直接使用,多用于获取HTML页面元素 2.document对象属性 a) alinkColor活动链接颜色 b) linkColor文本链接颜色 ...

  6. javascript Window对象 第16节

    <html> <head> <title>浏览器对象</title> <script type="text/javascript&quo ...

  7. 14 JavaScript Window对象

    Window对象表示一个浏览器窗口或者一个框架. 在客户端JavaScript中,window对象是全局对象,所有的表达式都在当前的环境中计算. Window对象的子对象: JavaScript do ...

  8. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  9. 第一百二十节，JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

随机推荐

  1. linux find用法总结

    前言:我们为什么要学会使用find命令? 转自:http://blog.chinaunix.net/uid-24648486-id-2998767.html 每一种操作系统都有成千上万的文件组成,对于 ...

  2. vijosP1319 数列

    vijosP1319 数列 链接:https://vijos.org/p/1319 [思路] 数学. 相当于交换进制2为k. [代码] #include<iostream> using n ...

  3. codeforce 621D - Rat Kwesh and Cheese

    题意:求表达式中最大的值. long double 128位 有效数字18-19 范围正负1.2*10^4932 注意取对数! #include<iostream> #include< ...

  4. linux 安装java环境(jdk)

    第一步:下载jdk-7-linux-i586.tar.gz wget -c http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-i586 ...

  5. hive0.11的编译/安装/配置

    一.获取hive 0.11文件 1.直接在apache网站下载release版 2.自己下载源码编译.方法: git clone https://github.com/amplab/hive.git ...

  6. ural 1091. Tmutarakan Exams 和 codeforces 295 B. Greg and Graph

    ural 1091 题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1091 题意是从1到n的集合里选出k个数,使得这些数满足gcd大于1 ...

  7. Kooboo中主要的几个关键词中的关系

    Kooboo中主要的几个关键词中的关系 Content Type  //相当于数据库表 Content      //相当于数据 View         //部分View 她可以使用Content ...

  8. CodeForces Round #179 (295A) - Greg and Array

    题目链接:http://codeforces.com/problemset/problem/295/A 我的做法,两次线段树 #include <cstdio> #include < ...

  9. XI.spring的点点滴滴--IObjectFactoryPostProcessor(工厂后处理器)

    承接上文 IObjectFactoryPostProcessor(工厂后处理器)) 前提是实现接口的对象注册给当前容器 直接继承的对象调用这个postProcessBeanFactory方法,参数为工 ...

  10. URAL 1992 CVS 链表

    不更改链表结构,只是添加节点,没有删除节点.通过记录和更改标记来模拟题意的插入和删除,复制 指针模拟链表: 预开指针,存在M[]中,可以提高效率 #include<functional> ...