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

最新推荐文章于 2024-08-26 17:50:05 发布
最新推荐文章于 2024-08-26 17:50:05 发布
阅读量4k 收藏 3
点赞数 5
文章标签： javascript 前端 html css 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ass12454548/article/details/128690900
版权
本文详细介绍了JavaScript中获取DOM元素的五种常见方法：getElementById、getElementsByTagName、getElementsByClassName、getElementsByName以及通过querySelector和querySelectorAll使用CSS选择器来获取元素。每种方法的语法和返回值类型都有所阐述，并通过示例代码展示了其使用效果。
摘要由CSDN通过智能技术生成

简介

本文主要介绍通过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>
		<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>

运行结果如下：

<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]

小鱼·
关注
获取dom对象(页面元素)的几种方法。
m0_48541096的博客
05-02 610
1.获取dom对象(页面元素) // 1）querySelector...选择方法 // var li1 = document.querySelector("li:nth-child(3)"); // var li1 = document.querySelector(".li1"); // var lis = document.querySelectorAll("li"); // con...
JavaScript获取dom元素（8种）
dhr11111_的博客
09-14 217
2、根据name属性（返回类数组）3、根据标签名称（返回类数组）4、根据类名（返回类数组）获取一组元素（返回类数组）7、获取html标签。8、获取body标签。
document对象获取元素，创建元素
最新发布
m0_70325779的博客
08-26 1052
但是，调用这三个方法创建的三个对象是各自独立存在的，当我们需要将它们组合在一起形成一个完整的标签时，就需要调用 appendChild 方法和 setAttributeNode 方法，此方法可以将节点文本对象和属性对象加入到标签之内从而形成一个完整的标签；该方法返回指定Id属性值的元素节点，由于各个Id值唯一，所以该方法返回值也只有一个，即指定的某个标签，而不会是多个，此外，该方法参数区分大小写。此外该方法返回匹配到的单个节点元素，如果匹配到多个，只会返回第一个，如果没有匹配到，则返回null；
JS获取DOM元素的方法
热门推荐
万伏小太阳
01-25 2万+
什么是HTML DOM 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。 这篇文章不做深入研究，只把各种用法和坑做一个总结。 JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElem
JS-获取DOM元素的五种方法
weixin_43937466的博客
09-04 1万+
根据id名获取元素：getElementById;根据标签名获取元素：getElementsByTagName，返回一个数组；根据类名获取元素：getElementsByClassName，返回一个数组；根据name属性值获取元素：getElementsByName，返回一个数组；根据选择器获取元素：querySelector：获取一个元素，推荐使用 用法类似写css；querySelectorAll：返回一个元素数组。more。
获取DOM对象的五种方式
微风的博客
08-15 2687
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
JavaScript获取DOM对象的几种方式
weixin_30530339的博客
11-14 172
1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 2.getElementsByName() 方法可返回带有指定名称的对象的集合 3.getElementsByTagName() 方法可返回带有指定标签名的对象的集合 4.getElementsByClassName() 方法可返回带有指定类名的对象的集合 5.document.querySel...
JS获取DOM元素的八种方法(含代码,简单易懂)
m0_74577714的博客
09-16 5095
六种获取元素的方法
JavaScript获取DOM元素的11种方法总结
10-24
本文总结了11种常见的JavaScript获取DOM元素的方法，并将它们分为四大类。这些方法可以帮助开发者高效准确地选取DOM元素。 首先，我们可以根据顶层document节点来获取元素。这类方法通常用于直接根据元素的某些属性...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
JavaScript实现获取dom中class的方法
12-09
总的来说，JavaScript获取DOM元素中class的方法主要分为以下步骤： 1. 检查DOM元素是否支持`getElementsByClassName`方法。 2. 如果支持，直接调用此方法获取元素集合。 3. 如果不支持，遍历元素的子节点，通过`...
vue获取DOM元素并设置属性的两种实现方法
08-29
首先，通过id获取DOM元素是最传统也是最常见的一种方法。在HTML中给需要操作的元素添加一个唯一的id，然后使用JavaScript的document.getElementById()方法来获取该元素。一旦元素被获取，我们就可以对其进行各种操作...
JS中选择DOM元素的方法集锦
aa110412的博客
03-18 278
各种选取元素的方法的速度，用原生的方法比jQuery要快差不多8倍，IE8是最慢的，IE9的速度差不多是IE8的3倍，Chrome的表现最好，其次是Firefox 选取文档元素的方法： 1、通过ID选取元素（getElementById） 1）使用方法：document.getElementById("domId") 其中，domId为要选取元素的id属性值...
获取DOM对象的方法
weixin_45766103的博客
11-26 606
1.通过id查找对象，返回一个对象 document.getElementById('id名') 2.通过标签名查找对象集合，即使返回0个或者1个，也是返回一个对象集合 document.getElementByTagName('标签名') 3.通过类名查找对象集合，即使返回0个或者1个，也是返回一个对象集合 document.getElementByClassName('类名') ...
js 获取dom元素的八种方法
技术的搬运工
03-28 1万+
1、通过css选择器获取一个元素（querySelector）2、通过选择器获取一组元素（querySelectorAll）方法一样，只是可以获取css选择器匹配的。如果你需要返回所有的元素，请使用。方法仅仅返回匹配指定选择器的。
获取dom页面文档对象的5种方法~js篇
qq_64970126的博客
04-17 2425
1、通过ID获取： document.getElementById( ‘ID名’); 2、通过标签名获取：getElementsByTagName(‘指定的标签’）； 3、通过标签名获取某个标签准确的子元素：’明确的变量‘.getElenentsTagName(‘指定的标签’); 4、h5新增获取元素方法 5、获取特殊元素( body , html )获取body元素
javascript三种获取dom对象的方法
yuzuodeyunwcj的专栏
01-22 766
1、getElementById() getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 function getValue() { var x=document.getElementById("myHeader") alert(x.innerHTML) } This is a header Click on the h
DOM快速入门——DOM获取元素对象的6种方式
Potry Code的博客
08-02 1万+
目录：一、为什么要获取页面元素？二、获取元素的5种方式：1.根据id获取元素2.根据标签名获取元素3.根据name获取元素4.根据类名获取元素5.根据选择器获取元素三、总结： 一、为什么要获取页面元素？ 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。 二、获取元素的5种方式： 1.根据id获取元素 document.getElementById...
js获取当周 第一天 和 最后一天
淮右布衣的博客
06-23 2322
/** * 获取当周 第一天 和 最后 一天 */ function getCurrWeek(){ var d = new Date(); var year = d.getFullYear(); var month = parseInt(d.getMonth())+1; //获取周一 var beginWhereTheTime = GetMondayAndSunday(d); va.
JavaScript获取DOM元素的方法与探讨
"本文主要探讨了JavaScript中获取HTML元素的各种方法，特别强调了DOM操作在前端开发中的重要性。文章提到了DOM作为HTML和XML文档的编程接口，允许通过编程方式访问和修改文档结构。文中列举了包括getElementById()、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小鱼·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值