Dom--获取元素的三种方式

Dom即document，是指显示网页内容的部分，也就是这一块：

有三种方式来获取其中的元素，反别是

getElementById, getElementsByTagName, getElementsByName

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom-获取文档中的元素</title>
</head>
<body>
<!--
	两个名词:
	1)元素(Element): 指的是页面中的标签(对象) ---容器
	2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围
	
	◇◇获取文档中的元素1,该方式只能获取元素对象◇◇
	   直接通过document有三种获取方式:
		  1) getElementById(): 通过元素的id属性值
		  2) getElementsByName(): 通过元素的name属性值
		  3) getElementsByTagName(): 通过元素的标签名  
  
 	※通过一个元素对象调用上面的3个函数可以在该元素的dom子树中进行元素获取。 
-->
	<div id="id1">div1</div>
	<button onclick="fun1()">获取div1</button>
	<script type="text/javascript">
		function fun1(){
			divObj = document.getElementById("id1");
			divObj.innerHTML="你是认真书写的一笔一划";
			divObj.style.width="300px";
			divObj.style.height="200px";
			divObj.style.backgroundColor="#EEE";
		}
	</script>

	<br><br><input type="text" name="name2"><br>
	<button onclick="fun2()">获取div2</button>
	<script type="text/javascript">
		function fun2(){
			textObj = document.getElementsByName("name2")[0];
			textObj.value="1233";
		}
	</script>
	
	<div>div3</div>
	<button onclick="fun3()">获取div3</button>
	<script type="text/javascript">
		function fun3(){
			divObj = document.getElementsByTagName("div")[1];
			divObj.innerHTML+="<button>yes</button>";
			divObj.style.width="300px";
			divObj.style.height="100px";
			divObj.style.backgroundColor="#DDD";
		}
	</script>
	
	<input type="text" value="请输入。。。" id="tex" name="姓名">
	<script type="text/javascript">
		var obj = document.getElementById("tex");
		var t = obj.value;
		alert(t);
		var t = obj.name;
		alert(t);
	</script>
</body>
</html>

Dom--获取元素的三种方式

猜你喜欢