前端 JS Docume

最新推荐文章于 2024-07-24 23:00:08 发布

小兰同学要独立

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量182

点赞数

文章标签：前端 javascript document 动态创建删除元素

JS Document 补充整理

1.getElementById():理论上id必须唯一，若不唯一则只能取到第一个。

2.getElementsByName()：方法可返回带有指定名称的对象的集合。该方法与 getElementById() 方法相似，但是它查询元素的 name属性，而不是id属性。另外，因为一个文档中的name属性可能不唯一（如HTML表单中的单选按钮通常具有相同的name属性），所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

代码：

<script language="javascript" type="text/javascript">


	function test(){
	//id不能唯一，但是name可以重复
	var hobbies = document.getElementsByName("hobby");
	//window.alert(hobbies.length);	输出3
	for(var i=0;i<hobbies.length;i++){
		//判断是否选中
		if(hobbies[i].checked){
		window.alert("你的爱好是"+hobbies[i].value)
		}
		}
	}
  </script>
 </head>
 <body>
	请选择你的爱好
  <input type="checkbox" name="hobby" value="足球"/>足球
  <input type="checkbox" name="hobby" value="篮球"/>篮球
  <input type="checkbox" name="hobby" value="网球"/>网球


  <input type="button"  value="选择" οnclick="test()"/>足球
 </body>

3.getElementsByTagName()方法可返回带有指定标签名的对象的集合。document.getElementsByTagName(tagname)

4.如何动态创建HTML元素（参考文献XML Dom高级）(createElement())

//动态添加元素
	function test1(){
		//创建元素
		var myElement=document.createElement("a");//希望创建的HTML元素标签名
		//给新元素添加必要信息
		myElement.href="http://www.sina.com";
		myElement.innerText="新浪连接";
		//myElement.style.left="200px";
		//myElement.style.top="200px";
		//myElement.style.position="absolute";
		//绝对定位 添加到document.body
		//document.body.appendChild(myElement);
		//将元素添加到指定部件（如：div）
		document.getElementById("div1").appendChild(myElement);
		}
  </script>
 </head>
 <body>
	<div id="div1" style="width:500px;height:400px;border:1px solid red;">这是div1</div>
  
  <input type="button"  value="创建超链接" οnclick="test1()"/>
 </body>

test1()中也可以加入 Button

var myElement=document.createElement("input");//希望创建的HTML元素标签名
		//给新元素添加必要信息
		myElement.type="button";
		myElement.value="我是按钮";

5.如何动态删除元素（removeChild()）

function test1(){
		//创建元素
		var myElement=document.createElement("input");//希望创建的HTML元素标签名
		//给新元素添加必要信息
		myElement.type="button";
		myElement.value="我是按钮";
		myElement.id="id1";
		document.getElementById("div1").appendChild(myElement);
		}
	//动态删除元素
	function test2(){
		//删除一个元素前提是要：必须获得其父元素
		//删除元素 方法1（不太灵活）
		document.getElementById("div1").removeChild(document.getElementById('id1'));
		//第二种方式 （推荐）
		document.getElementById("id1").parentNode.removeChild(document.getElementById('id1'));
	}
  </script>
 </head>
 <body>
	<div id="div1" style="width:500px;height:400px;border:1px solid red;">这是div1</div>
  <input type="button"  value="删除元素" οnclick="test2()"/>
  <input type="button"  value="创建元素" οnclick="test1()"/>

小兰同学要独立

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 JS Docume

JS Document 补充整理1.getElementById():理论上id必须唯一，若不唯一则只能取到第一个。2.getElementsByName()：方法可返回带有指定名称的对象的集合。该方法与 getElementById() 方法相似，但是它查询元素的 name属性，而不是 id属性。另外，因为一个文档中的 name属性可能不唯一（如 HTML表单中的单选
复制链接

扫一扫