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

最新推荐文章于 2024-06-17 19:17:52 发布
最新推荐文章于 2024-06-17 19:17:52 发布
阅读量1.4k 收藏 1
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50708827/article/details/129938505
版权

一、根据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>

二、根据标签名获取元素: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>

三、根据类名获取元素: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.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>

qq_50708827
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM获取元素的方法
2201_75397635的博客
04-23 2145
document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定选择器的所有元素对象集合。document.getElementById('id')方法，是由document对象提供的用于查找元素的方法。返回的集合是一个类数组对象，它可以像数组一样用索引来访问元素，但不能使用push()等方法。(1)该方法返回的是拥有指定id的元素；
原生JS-DOM操作获取元素的四种方法
世界和我们都不该止步于此
04-14 6524
目录 一.getElementById获取元素 二.getElementsByTagName()获取元素 三.HTML5新增方法获取元素 四.获取body、html元素 一.getElementById获取元素 这个方法需要根据ID来获取，使用getElementById()可以获取到带有ID属性的元素对象 我们来举一个例子： <div id='hello-JS'>你好JS</div> 这是一段HTML代码，有这样一个带有ID属性的div元素，我们通过get.
【Web APIs】DOM 文档对象模型 ① ( DOM 相关概念 - DOM 文档、DOM 树、DOM 节点 | 根据元素 ID 获取 DOM 元素 - getElementById 函数 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-17 2156
一、DOM 相关概念 1、DOM 简介 2、DOM 相关概念 - DOM 文档、DOM 树、DOM 节点 二、获取 DOM 元素 1、获取 DOM 元素的常用方法 2、根据元素 ID 获取 DOM 元素 - getElementById 函数 3、标签和 JavaScript 脚本书写顺序 4、console.dir 函数打印对象属性列表
JavaScript脚本语言 - DOM入门，以及DOM获取元素四种方式
qq_39123467的博客
01-20 1233
DOM入门，以及获取元素四种方式细节统计
直接用id获取dom元素
qq_45803168的博客
08-21 292
如果dom元素的id名称不和js内置属性或全局变量重名的话，该名称自动成为window对象的属性，属性值指向表示文档元素的HTMLElement元素
JS_事件和BOM文档
weixin_43214978的博客
08-02 207
JS_事件和BOM文档系统对话框窗口的打开和关闭时间函数history 对象的属性：location 对象的属性节点的类型获取节点的方法和设置属性 系统对话框 alert() 弹出一个带提示信息和确认按钮的弹出框 prompt() 输入框 参数一：显示的文本信息 参数二：文本框默认显示的文本 例: var uname = window.prompt("请输入用户名","xxx"); confir...
JavaScript获取DOM元素的11种方法总结
10-24
本文总结了11种常见的JavaScript获取DOM元素的方法，并将它们分为四大类。这些方法可以帮助开发者高效准确地选取DOM元素。 首先，我们可以根据顶层document节点来获取元素。这类方法通常用于直接根据元素的某些属性...
在vue中获取dom元素内容的方法
08-30
在 Vue 中获取 DOM 元素内容是开发者经常遇到的问题，而解决这个问题的方法很多，今天我们就来讨论其中的一种，即使用 ref 属性来获取 DOM 元素内容。 使用 ref 属性获取 DOM 元素内容是 Vue 中最常用的方法，这种...
详解JS获取HTML DOM元素的8种方法
12-07
文档对象模型（Document Object Model），是W3...JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClass
JS获取DOM元素的方法
m0_51152244的博客
08-03 899
JS获取DOM元素的方法
原生JS的DOM操作汇总
Daivon_Up的博客
09-01 1258
JavaScript的DOM操作也是面试中的常见问题，尤其是当你需要回答jQuery的性能问题时，便需要再次回到JavaScript DOM API。 本文便总结一下常见的JavaScript DOM操作方法
js之获取元素（获取DOM节点），定义变量
weixin_43465508的博客
04-10 1892
2、querySelector只能获取到页面中首次出现的元素，可以使用选择器，比如类名要加点。3、querySelectorAll能获取到页面中的多个元素，可以使用选择器，比如类名要加点。4、getElementsByClassName能获取到页面中的多个元素，比如类名不加点。5、getElementsByTagName能获取到页面中的多个元素，比如类名不加点。上述的两种元素的获取方式，只能获取一个元素，注意两者之间的区别。通过id获取到的元素是唯一的，id的名字是不能重复的。变量就是存储值的一个容器。
javascript getElementById 使用方法及用法
09-20 2088
顾明思义，get-Element-By-Id，就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单就是给每个标签分配一个ID号 document.getElementById("link").href; do
JS获取DOM元素的八种方法(含代码,简单易懂)
m0_74577714的博客
09-16 4664
六种获取元素的方法
html有趣行为——直接通过id操作dom
qq_39217871的博客
09-17 476
分享一个有趣的经验 最近在学习中，偶然发现一个有趣情况：在html文档中可以在未定义变量的情况下直接通过html标签上的id值获取到dom元素并进行操作。 可以先看看如下的情况： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
JavaScript 可以直接通过ID来操作dom元素，不用进行获取
柠檬人的博客
11-17 4699
写代码时发现；JavaScript没有获取id，但却依然能够使用这个id节点进行操作，并且也能正常打印。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
js操作获取dom元素使用
qq_46617584的博客
03-06 237
js操作获取dom元素使用
DOM编程
ZiXiaweb的博客
08-30 482
DOM的理解 1.D当创建了一个网页并把它加载到Web浏览器中时，DOM就生成了，它将我们编写的网页文档转换成一个文档对象。 2.O：“对象”是一种自足的数据集合，相关联的变量称为这个对象的属性，只能通过这个对象调用的函数称为这个对象的方法。 JS中的对象可以分为三种类型： A、用户定义对象：程序员自行创建的对象。 B、内建对象：Array、Math、Date C、宿主对象：由浏览器提供的对象。 JS最初版本中，非常重要的一些宿主对象就可以使用了，最基础的对象是Window对象。Window对象对应着浏览器
2020-09-27
m0_49986452的博客
09-27 198
### 代码 e.target 触发事件的节点 .mouseenter 事件类型:鼠标悬浮上时(hover) .click 事件类型:点击 .addEventListener(事件类型,事件处理函数,Boolean) 例 arEle.addEventListener("click", function () {},
js中获取dom元素的方法
09-13
在JavaScript中，有多种方法可以获取DOM元素。以下是其中一些常用的方法： 1. 通过ID获取元素：使用`getElementById`方法可以根据元素的ID属性获取一个元素。例如：`document.getElementById('id')`。 2. 通过name属性获取元素：使用`getElementsByName`方法可以根据元素的name属性获取一组元素。 3. 通过标签名获取元素：使用`getElementsByTagName`方法可以根据元素的标签名获取一组元素。 注意，这个方法返回的是一个类数组，而不是一个真正的数组。 4. 通过类名获取元素：使用`getElementsByClassName`方法可以根据元素的类名获取一组元素。 需要注意的是，这个方法不兼容IE7，并且返回的结果也是一个类数组。 5. 获取整个HTML元素：使用`document.documentElement`可以获取整个HTML元素。 6. 获取body元素：使用`document.body`可以获取body元素。 7. 通过选择器获取一个元素：使用`querySelector`方法可以根据CSS选择器获取一个元素。 8. 通过选择器获取一组元素：使用`querySelectorAll`方法可以根据CSS选择器获取一组元素。 需要注意的是，有些方法只能在`document`上使用，而有些方法既可以在`document`上使用，也可以在元素上使用。 这是因为一些方法在`Document`类的原型上，同时也在`Element`类的原型上定义了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值