简介

本文主要介绍通过JS获取DOM元素的五种方法:

1.根据id名获取元素:getElementById;

2.根据标签名获取元素:getElementsByTagName,返回个数组;

3.根据类名获取元素:getElementsBClassName,返回个数组;

4.根据name属性获取元素:getElementsByName,返回个数组;

5.根据选择器获取元素:

    1.querySelector:获取一个元素,推荐使用,用法类似写css;

     2.querySelectorAll:返回一个元素数组.

一、根据id名获取元素:getElementById

语法:document.getElementById(“id属性的值”);

返回值:是一个元素对象,即当前id对象(获取到元素则返回该元素,如果页面没有你所获取的id,则返回null

<!DOCTYPE html>
<html>
	<head&gt;
		<meta charset="utf-8"&gt;
		<title&gt;</title&gt;
	</head&gt;
	<body>
		<div id="d1"></div>
	</body>
	<script type="text/javascript">
		console.log(document.getElementById("d1"));
		console.log(document.getElementById("d2"));
	</script>
</html>

运行结果如下

<div id="d1"></div>
null

二、根据标签名获取元素:getElementsByTagName

语法document.getElementsByTagName(“标签名字”);

返回值:是一个伪数组,所以页面没有对应标签时候返回空数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div name="d1"></div>
		<div name="d2"></div>
	</body>
	<script type="text/javascript">
		console.log(document.getElementsByTagName("div"));
		console.log(document.getElementsByTagName("p"));
	</script>
</html>

运行结果如下:

HTMLCollection(2) [div, div, d1:div, d2:div]
HTMLCollection []

三、根据类名获取元素:getElementsByClassName

语法document.getElementsByClassName(“类样式名字”);

返回值:是一个伪数组,所以页面上没有对应标签时候返回空数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c2"></div>
	</body>
	<script type="text/javascript">
		console.log(document.getElementsByClassName("c1"));
		console.log(document.getElementsByClassName("c2"));
	</script>
</html>

运行结果如下:

HTMLCollection(2) [div.c1, div.c1]
HTMLCollection [div.c2]

四、根据name属性的值获取元素:getElementsByName
语法document.getElementsByName(“name属性的值”);

返回值:是一个伪数组,所以页面上没有对应标签时候返回空数组

这个方法不推荐使用,因为在IE和欧朋浏览器中,通过这个方式会获取到相同的id的元素

五、根据选择器获取元素
1.1 document.querySelector();

语法:document.querySelector(“选择器”);

回文档中匹配指定选择器组的第一个元素

1.2 document.querySelectorAll();

语法:document.querySelectorAll(“选择器”);

回文档中匹配指定选择器组的所有元素
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector(".c1"));
		console.log(document.querySelectorAll(".c1"));
	</script>
</html>

运行结果如下:

<div class="c1"></div>
NodeList(2) [div.c1, div.c1]

原文地址:https://blog.csdn.net/Ass12454548/article/details/128690900

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36710.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注