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

最新推荐文章于 2021-06-19 07:08:15 发布

NS西北风

最新推荐文章于 2021-06-19 07:08:15 发布

阅读量1k

点赞数 1

分类专栏： html+css+js 文章标签：网页设计 javascript 实例韩顺平添加删除html元素

本文链接：https://blog.csdn.net/huang2009303513/article/details/17098699

版权

html+css+js 专栏收录该内容

27 篇文章 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" οnclick="test1()"/>
	
	请选择你的爱好：
	<input type="checkbox" name="hobby"  value="足球"/>足球
	<input type="checkbox" name="hobby"  value="旅游"/>旅游
	<input type="checkbox" name="hobby"  value="音乐"/>音乐
	<input type="button" value="复选框测试" οnclick="test2()"/>
	<input type="button" value="得到所有input测试" οnclick="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" οnclick="test1()" value="动态创建一个超链接"/>
	 <input type="button" οnclick="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" οnclick="test1()" value="添加一个元素"/>
	 <input type="button" οnclick="test2()" value="删除一个元素id为id1"/>
	 <input type="button" οnclick="test3()" value="得到父节点"/>
	 <div id="div1" style="width:200px;height:400px;border:1px solid red;"></div>
  </body>