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

原创 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)

传智播客.韩顺平.轻松搞定网页设计(html.css.javascript)http://www.kesjc.com/bbs/forum-66-1.html 第00讲.开山篇 第01讲.html介...
  • cgnine
  • cgnine
  • 2014年07月01日 18:08
  • 1401

韩顺平_Javascript 教学视频教程_学习笔记整理_目录

韩顺平_Javascript 教学视频教程_学习笔记整理_目录 韩顺平 javascript教学视频_学习笔记1_js课程介绍_js基本介绍 韩顺平 javascript教学视频_学习笔记2_...
  • fuyizhonhong
  • fuyizhonhong
  • 2016年01月26日 17:27
  • 1765

韩顺平SqlServer数据库实例中的两张表

-- 创建数据库; create database spdb1; --切换数据库; use spdb1; --创建部门表; create table dept (deptno int primary ...
  • petergunner
  • petergunner
  • 2017年01月26日 18:08
  • 222

韩顺平.循序渐进学.java.从入门到精通

视频: 韩顺平.循序渐进学.java.从入门到精通.第28讲-面试题评讲.avi
  • fengyunzhenyu
  • fengyunzhenyu
  • 2014年04月24日 17:54
  • 1435

韩顺平2011细说Servlet笔记1

韩顺平2011细说Servlet笔记1 2012-06-16 18:18 1278人阅读 评论(0) 收藏 举报 servlettomcat浏览器web服务stringweb u...
  • p656456564545
  • p656456564545
  • 2013年11月03日 10:54
  • 1977

韩顺平java 第32讲 swing编程实战

拆分窗格 JSplitPane和多行文本框组件JTextAreaJSplitPane属于容器类组件。package chen.com; import java.awt.*; import javax....
  • chenguibao
  • chenguibao
  • 2015年10月09日 21:57
  • 449

韩顺平 java 第35讲 事件处理机制

点击按钮控制背景颜色变化package chen.com; import java.awt.*; import java.awt.event.ActionEvent; import java.awt....
  • chenguibao
  • chenguibao
  • 2015年10月12日 11:06
  • 382

韩顺平java从入门到精通第59讲,建立数据库代码

create table emp ( empno int primary key, ename nvarchar(30), job nvarchar(30), mgr int, h...
  • u010046013
  • u010046013
  • 2016年01月11日 09:48
  • 484

韩顺平php开发合集208集-从Html基础到php开发Web QQ实战 共15G

韩顺平php开发合集208集-从Html基础到php开发Web QQ实战 共15G 里面包括了框架,服务器技术,数据库优化技术和面向对象编程 泰牛程序员(韩顺平)经典培训视频教程,全部共208...
  • u013948187
  • u013948187
  • 2016年10月23日 17:10
  • 1747

(转)韩顺平j2ee学习笔记与心得

Java EE概念:Java EE是一个开放的平台,它包括的技术很多,主要包括十三种核心技术(java EE就是十三种技术的总称)。建立一个整全的概念。要成为一个java EE程序员,必须掌握的技术是...
  • lishirong
  • lishirong
  • 2014年12月02日 09:47
  • 2338
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:韩顺平网页设计第四十五讲
举报原因:
原因补充:

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