韩顺平网页设计第四十五讲

原创 2013年12月03日 17:29:26

document对象:

代表的是整个html文档,可以访问文档中的所有对象。

write()向文档输出文本或者js代码

writeln()与write()不同的是换行输出。但是对于浏览器来说没有区别。





getElementById()方法:

(1)html文档中,id号一定要唯一,如果不唯一,则只取第一个id

(2)html的id号不要以数字开头。

getElementsByName()用法:可以用于通过元素名字来获取一个对象集合。

getElementsByTagName()用法:通过标签名返回对象集合。

代码如下:

<head>
    <title>document1.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">
    
    <script  language="javascript" type="text/javascript">
	function test1()
	{
		var myhref=document.getElementById("a1");
		alert(myhref.innerText);  //总是返回第一个,因为他找到第一个就不找了。
	}
	function test2()
	{
	   //id不能重复,但是名字可以重复
	   var hobbies = document.getElementsByName("hobby");
	   for(var i=0;i<hobbies.length;i++)
	   {
	       if(hobbies[i].checked)  //被选中的checked为true
		   {
				alert("你选中的是"+hobbies[i].value);
		   }
	   }
	}
	//通过标签名来获取元素
	function test3()
	{
		var myobjs=document.getElementsByTagName("input");
		for(var i=0;i<myobjs.length;i++)
		{
			alert(myobjs[i].value);
		}
	}
    </script>
  </head> 
  <body>
    <a id="a1" href="http://www.sohu.com">连接到sohu</a><br/>
	<a id="a1" href="http://www.sina.com">连接到sina</a><br/>
	<a id="a1" href="http://www.163.com">连接到163</a><br/>
	<input type="button" value="测试1" onclick="test1()"/>
	
	请选择你的爱好:
	<input type="checkbox" name="hobby"  value="足球"/>足球
	<input type="checkbox" name="hobby"  value="旅游"/>旅游
	<input type="checkbox" name="hobby"  value="音乐"/>音乐
	<input type="button" value="复选框测试" onclick="test2()"/>
	<input type="button" value="得到所有input测试" onclick="test3()"/>
  </body>



document对象可以动态的创建/添加/删除元素或者节点。

添加举例:

<script  language="javascript" type="text/javascript">
	function test1()
	{  //创建元素,可以是a,button,text等等。
		var myElement = document.createElement("a");//参数是希望创建的html元素标签名
		//给新元素添加一些信息
		myElement.href="http://www.sina.com";
		myElement.innerText="链接到新浪";
		//新元素定位
		myElement.style.left="200px";
		myElement.style.top="300px";
		myElement.style.position="absolute";
		//添加到document的body上面去。
		document.body.appendChild(myElement);
		//将这个元素添加到div1
		//document.getElementById("div1").appendChild(myElement);
	}
	function test2()
	{  //创建元素
		var myElement = document.createElement("a");//参数是希望创建的html元素标签名
		//给新元素添加一些信息
		myElement.href="http://www.sina.com";
		myElement.innerText="链接到新浪";
		//新元素定位
		//myElement.style.left="200px";
		//myElement.style.top="300px";
		//myElement.style.position="absolute";
		//添加到document的body上面去。
		//document.body.appendChild(myElement);
		//将这个元素添加到div1
		document.getElementById("div1").appendChild(myElement);
	}
    </script>
  </head> 
  <body>
     <input type="button" onclick="test1()" value="动态创建一个超链接"/>
	 <input type="button" onclick="test2()" value="动态创建一个超链接div中"/>
	 <div id="div1" style="width:200px;height:400px;border:1px solid red;">div1</div>
  </body>

动态添加和删除举例:
<script  language="javascript" type="text/javascript">
	function test1()
	{  
	     //创建元素,可以是a,button,text等等。
		var myElement = document.createElement("input");//参数是希望创建的html元素标签名
		//给新元素添加一些信息
		myElement.type="text"
		myElement.value="我是button";
		myElement.id="id1"
		//添加到div1。
		document.getElementById("div1").appendChild(myElement);
		//动态添加的盒原先就有的都可以删除。
		
	}
	function test2()
	{
		//删除一个元素,必须找到它的父节点
		//删除一个元素的前提是找到父元素的id
		document.getElementById("div1").removeChild(document.getElementById("id1"));
	}
	function test3()
	{
	      //找到一个节点的父节点的id的方式
		  //可以用于删除元素过程中查找父元素的id
	      window.alert(document.getElementById("id1").parentNode.id);
	}
    </script>
  </head> 
  <body>
     <input type="button" onclick="test1()" value="添加一个元素"/>
	 <input type="button" onclick="test2()" value="删除一个元素id为id1"/>
	 <input type="button" onclick="test3()" value="得到父节点"/>
	 <div id="div1" style="width:200px;height:400px;border:1px solid red;"></div>
  </body>



相关文章推荐

韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 函数(方法)——如何理解 如何理解方法这个概念,给大家举个通俗的示例: 拉灯同志给特工小组下达命令:去炸XX...

韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 在上一个博客中未完成的矩阵转置的问题:韩顺平_轻松搞定网页设计(html+css+javascript)_第28...

韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ 对象——function特别说明 1.在js中一切都是对象 2.类(原型对象)其实也是对象,它实际上是Functio...

韩顺平网页设计第四十四讲

window的status属性可以设置页面的状态栏,代码如下: 在最后面显示世界你好!: var space_num = 0; var dir = 1; function myScrol...

韩顺平_轻松搞定网页设计(html+css+javascript)_第32讲_构造函数_成员函数详解_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js面向(基于)对象编程——类(原型对象)与对象 对象—对象(成员)函数的初步介绍 在某些情况下,我们要需要定义对象...

韩顺平网页设计第四十一讲

为什么要dom编程:         js最重要的功能就是让用户与网页元素进行交互操作。这才是学js的精华所在。用户可以对页面元素进行各种操作。         Document就是一个dom对象...

韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——基本数据类型 javascript基本数据类型三大类型 ①基本数据类型 分为: (1)数...

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——三大流程控制 循环控制 听其名而知其意,就是让你的代码可以循环的执行。 案例: 编写一个程序...

韩顺平网页设计第四十二讲1

window的方法setInterval()的使用案例: 每隔一秒刷新时间 //setInterval()按照指定的周期来循环调用函数或者表达式。是一个window对象 //每隔一秒钟弹出hello...

韩顺平网页设计第四十三讲

clearTimeout()用法案例: function test(){ window.alert("abc"); } //setTimeout的作用是4秒以后运...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:韩顺平网页设计第四十五讲
举报原因:
原因补充:

(最多只允许输入30个字)