HTML中详述获取元素对应JavaScript对象的四种方法

最新推荐文章于 2021-07-08 21:52:28 发布

程序猿11号

最新推荐文章于 2021-07-08 21:52:28 发布

阅读量381

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_46383618/article/details/107431621

版权

元素与标签

具体方法：

一、getElementById（）方法

二、getElementsByClassName（）方法

三、getElementsByTagName（）方法

四、getElementsByName（）方法

元素与标签：

标签：指用一对<>括起来的标签的总称。
元素：指从开始标签到结束标签的所有代码，元素包含内容多于标签。

具体方法：

一、getElementById（）方法

作用：获取id为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="ttt">
			<span>郑州大学</span><i>河南大学</i>
		</div>
		<!--document-->
		
		<script>
			var element = document.getElementById("ttt");//获取HTML元素对应javaS对象
			console.log(element);
		</script>
	</body>
</html>

结果展示：

二、getElementsByClassName（）方法

作用：获取类名为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p class="z">黄河水</p>
		<p class="z">长江水</p>

		<!--document-->
		
		<script>
			var elements = document.getElementsByClassName("z");
			console.log(document.getElementsByClassName("z")[0]);
			for(var i in elements){
				console.log(element[i]);
			}
			console.log("######################");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

结果展示：

三、getElementsByTagName（）方法

作用：获取标签为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p class="z">黄河水</p>
		<p class="z">长江水</p>
	
		<!--document-->
		<script>
			
			console.log("######################");
			elements = document.getElementsByTagName("p");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

结果展示：

四、getElementsByName（）方法

作用：获取name属性为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="hobby" />足球<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />乒乓球
	
		<script>
			
			console.log("######################");
			elements = document.getElementsByName("hobby");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
			
			function tttt(){
				var element = document.getElementById("user_name");
				console.log(element.value);
			}
			
		</script>
	</body>
</html>

结果展示：