关闭

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

标签: 网页设计javascript实例韩顺平添加删除html元素
859人阅读 评论(0) 收藏 举报
分类:

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>



1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    最新评论