JS-获取DOM元素的五种方法

介绍

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

根据id名获取元素：getElementById;
根据标签名获取元素：getElementsByTagName，返回一个数组；
根据类名获取元素：getElementsByClassName，返回一个数组；
根据name属性值获取元素：getElementsByName，返回一个数组；
根据选择器获取元素：
1. querySelector：获取一个元素，推荐使用用法类似写css；
2. querySelectorAll：返回一个元素数组。

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

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

返回值：是一个元素对象，即当前id的对象（获取到元素则返回该元素，如果页面上没有你所获取的id，则返回null）

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="d1">div>
	body>
	<script type="text/javascript">
		console.log(document.getElementById("d1"));
		console.log(document.getElementById("d2"));
	script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行结果如下：
在这里插入图片描述

二、根据标签名获取元素: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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行结果如下：
在这里插入图片描述

三、根据类名获取元素: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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

运行结果如下：
在这里插入图片描述

四、根据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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行效果如下:
在这里插入图片描述

------------- The End -------------

许可协议: 转载请保留原文链接及作者。

相关阅读:
基于单片机的视觉导航小车设计
【go-postgres】在go中，实现自动分表
Python标准库glob模块详解
C++编程案例讲解-基于结构体的控制台通讯录管理系统
Pycharm 远程连接服务器（ssh）运行深度学习代码 | 详细步骤
使用Python构造VARIMA模型
JavaScript constructor&原型&原型继承
计算机毕业设计旅游出行指南系统 Vue+SpringBoot+MySQL
Qt5开发从入门到精通——第十二篇三节（Qt5 事件处理及实例——多线程应用、服务器端编程、客户端编程）
拉格朗日粒子扩散模式FLEXPART，在大气污染溯源中的应用

原文地址：https://blog.csdn.net/weixin_43937466/article/details/126693046