Js获取标签对象

时间：2021-12-12作者：klpeng分类：IT综合浏览：1235评论：0

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

一、根据指定类型获取标签对象

1.document.getElementById("idname")

2.document.getElementsByName("name")

3.document.getElementsByTagName("tagname")

4. document.getElementsByClassName("classname")

二、任意类型获取标签

1、document.querySelector("name")

2、document.querySelectorAll("name")

一、根据指定类型获取标签对象

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>

运行效果:

控制台输出：

二、任意类型获取标签

1、document.querySelector("name")

传入要获取标签对象的属性名，可以是id值（#idname），class值(.classname) ,标签名(tagname) ,某标签有某属性 (tagment[属性名]) ；只能获取到符合标准的第一个标签对象。

代码实例:获取html标签中不同a的标签对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div id="a"></div>
		<div class="a"></div>
		<div name ="a"></div>
		<script>
			
			var ida=  document.querySelector("#a");
			ida.textContent = "id1";
			var classa = document.querySelector(".a");
			classa.textContent = "class1";
			
			var taga = document.querySelector("div");
			taga.style.color = "red";
			
			var tagfielda = document.querySelector("div[name]");
			tagfielda.innerText = "tag[attributename]";
		</script>
	</body>
</html>

页面效果:

2、document.querySelectorAll("name")

顾名思义，与上述的基本一致，就是选择获取符合标准的所有标签对象。

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div id="a"></div>
		<div class="a"></div>
		<div name ="a"></div>
		<script>
			var taga = document.querySelectorAll("div"); //返回一个标签对象数组
			for(var i in taga){
				taga[i].innerText="test";
			}
			
		</script>
	</body>
</html>

页面效果: