JavaScript自学笔记【2】javascript获取元素的两种方法（getElementById、querySelector）

最新推荐文章于 2024-01-31 18:30:38 发布
最新推荐文章于 2024-01-31 18:30:38 发布
阅读量730 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59154522/article/details/118737057
版权

文章目录

一、主要方法

  • getElementById()
  • querySelector()

二、两种方法的区别

一、主要方法：

1.getElementById()

代码如下（示例）：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				border: 0;
				padding: 0;
			}
			#box {
				height: 200px;
				width: 200px;
				background-color: #FFA500;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">这是一个盒子</div>
		<script type="text/javascript">
		       document.getElementById('box')
		</script>
	</body>
</html>

最低0.47元/天 解锁文章
FrontendTom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js querySelector和getElementById通过id获取元素的区别
10-28
是sina同事xiaoniu发现的，querySelector和getElementById通过id获取元素的区别
javascript高级选择器querySelector和querySelectorAll全面解析
10-22
下面小编就为大家带来一篇javascript高级选择器querySelector和querySelectorAll全面解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
热门推荐
CYK_byte的博客
11-04 1万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
Element.querySelector() Element.querySelectorAll() document.querySelector() Document.querySelectorAl
doiido的专栏
11-21 265
Element.querySelector() Element.querySelectorAll() document.querySelector() Document.querySelectorAl（）
JavaScript中的元素搜索getElement*，querySelector*
爱蹦跶的全栈大A阿
01-25 1172
在我们的日常生活中，JavaScript已经成为了一种无处不在的编程语言。它的应用范围从简单的网页动画，到复杂的前端框架，再到后端的Node.js，甚至还包括物联网设备。然而，JavaScript并非一成不变，它一直在发展，一直在添加新的特性和功能。今天，我们将探讨JavaScript中的一个重要的概念：元素搜索。在这篇文章中，我们将详细介绍元素搜索，包括它的定义、使用方法，以及如何在不支持元素搜索的浏览器中进行polyfill。​。
JS获取元素getElementById、节点选择器querySelector与querySelectorAll区别及用法
林中明月间丶
07-10 1981
&lt;body&gt; &lt;div id="test"&gt; &lt;p class="text"&gt;1&lt;/p&gt; &lt;p class="text"&gt;2&lt;/p&gt; &amp
JavaScript中getElementById 和querySelector的区别
weixin_43814775的博客
09-23 784
JavaScript中getElementById 和querySelector的区别
querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？
08-12 926
1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。 2. 浏览器兼容 querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。 getElementsBy 系
JavaScript笔记22_queryselector获取元素
qqq777_的博客
12-14 376
JS querySelector()方法
weixin_45971638的博客
10-06 1842
querySelector()方法是H5新增的一个方法，如果不考虑兼容性，这个方法无疑是现在最好用的方法之一，它只获取第一个元素，可以获取ID值，也可以获取Class值， var box = docum.querySelector(".box");//获取class box 的值 var box2 = docum.querySelector("#box");//获取id box2 的值 ...
JavaScript获取DOM元素的11种方法总结
01-21
令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）： 1. 通过顶层document节点获取： （1） document.getElementById(elementId)：该方法通过...
JavaScript获取指定元素位置的方法
01-19
本文实例讲述了JavaScript获取指定元素位置的方法。分享给大家供大家参考。具体如下： 代码如下:function showpane() {  var self = document.getElementById(“eID”);  var left = self.getBoundingClientRect...
利用JavaScript阻止表单提交的两种方法
01-21
在JavaScript中，阻止表单默认提交行为的方法有两种，分别是： （1） return false 示例代码 <form name=loginForm action=login.aspx method=post> <button type=submit value=Submit id=submit>...
javascript 获取iframe里页面中元素值的方法
12-10
IE方法：document.frames[‘myFrame’].document.getElementById(‘test’).value; 火狐方法：document.getElementById(‘myFrame’).contentWindow.document.getElementById(‘test’).value; IE、火狐方法： 代码...
js中的getElementById和querySelector
mm_hello11的博客
10-04 560
querySelector()      返回匹配指定选择器的第一个元素。 querySelectorAll()  返回所有的节点元素 语法 document.querySelector(CSS selectors)      getElementsByTagName()   //返回的是所有的节点，是一个类数组对象 getElementById(id)   // 返回某个节点对象 语...
querySelector 与 getElementById
doiido的专栏
10-24 2150
因此在浏览器中，querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象。NodeList 是一个静态的 NodeList 类型的对象。提示: 可使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后遍历所有元素，从而获取想要的信息；提示： 可使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
document.getElementById() &document.querySelector()
最新发布
cmHuney的博客
01-31 742
1.在html元素上添加id属性并设置值作为id选择器2.在css中使用设置的id选择器给对应的html元素添加样式，(在css中，id选择器以#开头，如#box)document.querySelector('#id选择器');document.getElementById('id选择器');
getElementById和querySelector方法的区别
diaolanbeng0962的博客
05-03 314
习惯了用jQ查找元素，有时候我们不妨试试js原生的DOM选择符，getElementById()、getElementsByTagName()、querySelector()、querySelectorAll()。说不定一不小心就发现彩蛋了。 那么我们来说说上面那几个方法。 "querySelector 属于 W3C 中的 Selectors API 规范 。而 getE...
getElementBy系列
12-20 270
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签 1、getElementById()getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。比如说有一个DIV...
javascript学习笔记--查看html元素和改变html的内容
06-01
2. 通过 `document.querySelector()` 方法获取 HTML 元素，该方法接受一个参数，即需要获取的元素的 CSS 选择器。例如： ``` let elem = document.querySelector(".my-class"); ``` 3. 通过 `innerHTML` 属性获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值