Js获取标签对象

通过js提供的方法根据html标签的id，name,class等属性以及标签名字可以来获取该标签的引用，从而获取标签对象的属性和修改标签对象的属性。

1.document.getElementById("idname") 。通过标签的id值来获取对象。传入的参数是标签的id属性值。

获取到文档流中第一个id = "idname"的标签。只返回一个对象。

例如：修改该html中id = "t1"标签的字体颜色为蓝色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			window.onload = function(){
				testid();
			}
			function testid(){
				var obj =  document.getElementById("t1");
				console.log("文本值为:"+obj.innerText);
				obj.style.color = "blue";
			}
		</script>
	</head>
	<body>
		<div id="t1"> test1 </div>
		
		<div id="t1"> test2 </div>
		<div name="n1"> test3 </div>
		<div name="n1"> test4 </div>
	</body>
</html>

运行效果：我们发现只有文本值为test1的div变成了蓝色。而同为id="t1"的test2并没有改变。通过该方法获取到的是第一个id值对应的对象。

控制台输出为:

2.document.getElementsByName("name")。通过标签的name属性值来获取对象。传入的参数就是标签的name属性值。

返回的是一个对象数组。每个符合的标签对象是按从文档流读入的次序排列的。

例如：修改该html中name = "n1"标签的背景颜色为蓝色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			window.onload = function(){
				testname();
			}
			function testname(){
				var objs =  document.getElementsByName("n1");
				for(var i =0 ;i<objs.length;i++){
					console.log("文本值为:"+objs[i].innerText);
					objs[i].style.background = "blue";
					
				}
				
			}
		</script>
	</head>
	<body>
		<div id="t1"> test1 </div>
		<div id="t1"> test2 </div>
		<div name="n1"> test3 </div>
		<div name="n1"> test4 </div>
		<div class="c1"> test5 </div>
		<div class="c1"> test6</div>
	</body> 
</html>

运行效果：

控制台输出:

3.document.getElementsByTagName("tagname");通过标签名来获取对象。传入的参数是标签的name属性值。

和通过name属性值的方法是一样的，返回的也是一个对象数组。每个符合的标签对象是按从文档流读入的次序排列的。只是传入的参数是标签名。

例如：修改该html中标签名为div的字体颜色为蓝色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			window.onload = function(){
				testTagname();
			}
			function testTagname(){
				var objs =  document.getElementsByTagName("div");
				for(var i =0 ;i<objs.length;i++){
					console.log("文本值为:"+objs[i].innerText);
					objs[i].style.color = "blue";
				}
			}
		</script>
	</head>
	<body>
		<div id="t1"> test1 </div>
		<div id="t1"> test2 </div>
		<div name="n1"> test3 </div>
		<div name="n1"> test4 </div>
		
	</body>
</html>

运行效果：

控制台输出：

4. document.getElementsByClassName("classname");通过class属性值来获取对象。传入的参数是标签的class属性值。

例如：修改该html中class值为"c1"的标签字体颜色为蓝色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			window.onload = function(){
				testClassname();
			}
			function testClassname(){
				var objs =  document.getElementsByClassName("c1");
				for(var i =0 ;i<objs.length;i++){
					console.log("文本值为:"+objs[i].innerText);
					objs[i].style.color = "blue";
				}
			}
			
		</script>
	</head>
	<body>
		<div id="t1"> test1 </div>
		<div id="t1"> test2 </div>
		<div name="n1"> test3 </div>
		<div name="n1"> test4 </div>
		<div class="c1"> test5 </div>
        <div class="c1"> test6 </div>
	</body>
</html>

运行效果:

控制台输出：

猜你喜欢