javaScript中获取Html标签元素的方法

最新推荐文章于 2024-06-23 14:49:10 发布

原创最新推荐文章于 2024-06-23 14:49:10 发布 · 5.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Web

javaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JavaScript中获取HTML标签元素的六种方法，包括通过ID、name值、className、标签类型、获取子标签和后一个标签。对于通过className获取的集合，需要通过下标指定元素，同样，通过标签类型获取的也是一个集合。示例代码展示了如何操作这些元素。

javaScript中获取Html标签元素的方法

js可以对html中标签的属性和内容进行操作，也可以动态创建，为拿到对应标签，可以通过下面几个方法：

1.通过标签ID

var span = document.getElementById("ID名")

2.通过name值

var span = document.getElementsByName("name值")

3.通过className

这里注意通过className拿到的是一个集合，因为不知道整个网页中具体有多少个，所以将结果做了封装，需要通过下标获取具体的标签
其实看到getElements而非getElement就可以知道其含义
var p = document.getElementsByClassName("PPP");
在这里插入图片描述

修改方法：
var p = document.getElementsByClassName("PPP")[0];

4.通过标签类型

这里拿到的也是一个集合，也需要通过下标进行具体的获取
拿到所有的p标签
var p = document.getElementsByTagName("p")
拿到单个p标签
var p = document.getElementsByTagName("p")[0]

5. 拿到一个标签下所有的子标签

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<img src=""/>
			<p class="PPP"><span></span></p>
		</div>
		
		<script type="text/javascript">
			var box = document.getElementById("box")
			var sons = box.children
			alert(sons.length)
		
		</script>
	</body>
</html>

显示结果：
这里只能拿到子类，子类内部的元素标签拿不到
在这里插入图片描述