JS对元素内容的获得和设置

时间：6年前阅读：4949

getElementById(“ID”)

getElementById()可以访问Documnent中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。

getElementsByName(“Name”)

这个是通过name来获得元素，但不知大家注意没有，这个是get elemnets，复数elemnets代表获得的不是一个元素，为什么呢？

因为Documnent中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。

getElementsByTagName(“TagName”)

这是通过TagName（标签名称）来获得元素，一个Document中当然会有相同的标签，所以这个方法也是取得一个数组。

下面这个例子有两个DIV，可以用getElementsByTagName("div")来访问它们，用getElementsByTagName("div")[0]访问第一个DIV,，用getElementsByTagName("div")[1]访问第二个DIV。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var dd = document.getElementById('dd');
				var title = document.getElementById('title');
//				给按钮加单击事件
				dd.onclick = function(){
//				获得h1里所有的内容(innerHTML指的是从对象的起始位置到终止位置的全部内容,)
//				var tt = title.innerHTML;
//				alert(tt);

//				设置元素的所有内容（里面的标签没过滤）
//				title.innerHTML ="这个是新设置出来的内容";
				
//				获得纯文本内容(过滤掉里面的标签)
//				var  yy = title.innerText; //这个是对IE浏览器好像，可能有一些浏览器不支持
//				var yy = title.textContent;  //一般用这个(这个是标准w3c的写法)
//				alert(yy);
//				
//				
////				document.all 识别IE浏览器,判断
//				if (document.all) {
//					var  yy = title.innerText;
//				} else{
//					var yy = title.textContent;
//				}
				
//				兼容性的短路写法(上面的也可以这样写)
				var yy = title.innerText || title.textContent;
				alert(yy);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="dd" id="dd" value="来点我进行操作！" />
<br /><br />
		<h1 id="title">一是不知道自己应该写什么，<span>二是怕自己写的不好。</span></h1>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

JS对元素内容的获得和设置

网友评论