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值对应的对象。

        Js获取标签对象

        控制台输出为:

Js获取标签对象

         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>

        运行效果:

Js获取标签对象

        控制台输出:

Js获取标签对象

         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>

        运行效果:

Js获取标签对象

        控制台输出:

Js获取标签对象

        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>

        运行效果:

Js获取标签对象

        控制台输出:

Js获取标签对象

         

二、任意类型获取标签

        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>

                页面效果:

 Js获取标签对象

        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>

                页面效果:

Js获取标签对象

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢