javascript 选择器querySelector

最新推荐文章于 2022-10-05 19:05:57 发布
最新推荐文章于 2022-10-05 19:05:57 发布
阅读量323 收藏
点赞数
分类专栏： javascript 文章标签： javascript ViewUI 
javascript函数querySelector介绍


  querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。很像jquery的选择器。不过只能返回一个子孙元素，但是jquery选择器的话，可以返回一组元素集合。下面的代码示例：

<body>

        <div id="query">id</div>

        <div class="query">class</div>

</body>

<script>

   var htmlStr= document.querySelector("body #query").innerHTML，//id

   htmlStr=document.querySelector("body div").innerHTML,//只返回第一个子孙元素

   htmlStr=document.querySelector( "body .query).innerHTML //class

</script>   

 这个函数适用 IE8+，chrome，firefox

 

sfSam
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS基础】querySelector()、querySelectorAll()--DOM方法
Milk~每天分享一点点，技术进步一点点
08-04 445
DOM querySelector() 方法 例子 获取文档中id="demo"的元素： document.querySelector("#demo"); 定义和用法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素 **参数：**CSS选择器 DOM querySelectorAll() 方法 例子 获取文档中class="example"的所有元素： var x = document.qu
querySelector() 方法
weixin_34396902的博客
03-31 3万+
返回文档中匹配指定 CSS 选择器的一个元素。 虽然IE8中没有getElementsByClassName()但可以用querySelector()代替 注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 querySelector 获取文档中 class="example" ...
querySelector
liubangbo的专栏
07-12 1081
返回文档中匹配指定 CSS 选择器的一个元素。 还是有个例子来说明，一目了然。 <div id="div1"> <div id="div2"> </div> </div> var elm = document.querySelector("#div1"); console.log("elm: " + elm); ...
querySelector()方法
weixin_34402408的博客
06-20 653
标签: querySelector JavaScrit 顶[10] 分享到 发表评论(0) 编辑词条  querySelector()方法接受一个CSS查询并返回匹配该模式的第一个子孙元素，如果没有匹配的元素则返回null。请看下面例子： //获取body元素 var body = document.querySelector("body"); //获取ID为myDiv的元素...
querySelector选择器
weixin_34327223的博客
09-13 258
querySelector选择器可以通过document和element来调用他们 用来代替getElementById var body=document.querySelector("body");//取到body body.appendChild(document.createTextNode("ffff")); ...
javascript高级选择器querySelector和querySelectorAll全面解析
10-22
下面小编就为大家带来一篇javascript高级选择器querySelector和querySelectorAll全面解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原生的强大DOM选择器querySelector.pdf
08-16
querySelector和querySelectorAll是JavaScript DOM操作的重要工具，它们让开发者能够以CSS选择器的方式选取DOM元素，大大提高了代码的可读性和简洁性。理解这两个方法的用法和区别，对于编写高效、易维护的DOM操作...
jQuery选择器querySelector的使用指南
11-26
在JavaScript的世界里，jQuery选择器一直以来都是开发人员的得力工具，它们提供了简便的方式来选取DOM元素。然而，随着HTML5的出现，原生JavaScript也获得了类似的功能，这就是`document.querySelector`和`document....
了解JavaScript中的选择器
10-16
5. `querySelector()`: 这个方法接收一个CSS选择器字符串，然后返回文档中第一个匹配该选择器的元素。如果找不到匹配的元素，它将返回`null`。`querySelector`返回的是一个Node对象，即找到的第一个元素。 6. `...
querySelector和querySelectorAll
yangyang的专栏
04-07 1万+
它们俩是有区别的： 1.querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素（nodelist）； 2.在都没有满足条件的元素情况下：querySelector返回null，而querySelectorAll返回空的数组[]。 1.querySelector 返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹...
querySelector()和querySelectorAll()
wf592523813的博客
10-12 2134
在做百度前端任务二的时候，用到querySelector（），特地去查了一下用法。 querySelector()和querySelectorAll()是两个原生的选择符。 querySelector()用于接收一个css选择符，返回与该模式匹配的第一个元素；querySelectorAll()返回所匹配到的所有元素。大家会问已经有getElementById（）和getElementsByTa
你不了解的querySelector
进击的前端小白
07-13 1万+
1.API介绍先看看MDN上怎么介绍这个API的：概述返回当前文档中匹配一个特定选择器的所有的元素(使用深度优先，前序遍历规则这样的规则遍历所有文档节点) .返回的对象类型是 NodeList.语法elementList = document.querySelectorAll(selectors); elementList 是一个non-live的 NodeList 类型的对象.selectors...
JavaScript选择器函数querySelector和querySelectorAll
热门推荐
小天空的博客
07-13 5万+
选择器是非常强大的功能，早先一般是通过和来获取页面元素，在一些场景下就很不方便。后来DOM扩展出了标准，其中包含了和两个方法，可以通过Css选择器匹配页面元素。用于查询页面中第一个符合规则的元素，可以在实例和实例上调用，接收一个选择器字符串参数，如果查找到则返回 对象，否则返回。语法格式如下：123实例调用是获取整个页面匹配的元素。简单示例如下：12345678910111213141516171819202122232425实例调用是获取该元素子树内匹配的元素。简单示例：12345678910111213
selectors选择器_Selectors API：querySelector和querySelectorAll
cuk0051的博客
08-30 159
selectors选择器Introduction 介绍 The Selectors API 选择器API Basic jQuery to DOM API examples 从jQuery到DOM API的基本示例 Select by id 按id选择 Select by class 按class选择 Select by tag name 按标签名称选择 Basic jQuery to DOM...
querySelector的用法
zww学习笔记
08-14 7204
在js中可以通过标签选择器获取标签，现在发现还有querySelector可以实现选择器的功能。js的用法：<label>hhh22</label><label id="la">hhh</label><script> alert(document.getElementById('la').innerHTML); </script>querySelector的用法：<label>hhh22<
HTML DOM querySelector() 方法
ssisse的博客
05-06 903
本文转自：http://www.runoob.com/jsref/met-document-queryselector.html 实例 获取文档中 id="demo" 的第一个元素： document.querySelector("#demo"); 定义和用法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意：
JavaScript- DOM 原生 API 学习（querySelector，querySelectorAll，操作和修改表单属性，操作节点）
dodamce的博客
10-05 2396
对于在浏览器上运行JS程序，最核心的库就是DOM API 库DOM可以看作文档对象模型，HTML中会把每个html标签看作成一个JS中可操作的对象。操作这个对象，就可以影响界面的显示。其中获取网页元素是DOM的基础。当一个网页加载好后，会自动生成一个全局变量，叫做document，这其中有些方法和属性，让我们来操作网页内容。 在JS中的很多代码都是通过事件来触发。eg：鼠标点击页面，会产生鼠标点击事件等等。事件的三要素： 获取操作元素的内容 通过对象内的属性 innerHTML来实现。 需要注意，input
JavaScript querySelector()、querySelectorAll()方法介绍
路虽远，行则必至！
06-26 4万+
一、getElementsByClassName()方法不足之处 在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。 在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握...
queryselector选择器
最新发布
07-27
querySelector是DOM中的一个方法，用于通过CSS选择器选择页面中的元素。它返回匹配选择器的第一个元素。如果要选择所有符合条件的元素，可以使用querySelectorAll方法。在选择器中，特殊字符需要进行转义。例如，如果要选择class为"a.b"的元素，选择器应该为".a.b"。如果要通过id选择元素，需要在选择器中加上#符号，如：document.querySelector("#abc")。如果要通过name选择元素，需要在选择器中加上\[name="value"\]格式的属性选择器，如：document.querySelector('\[name="abc"\]')。\[1\]\[2\] #### 引用[.reference_title] - *1* [JavaScript中选择器函数querySelector和querySelectorAll](https://blog.csdn.net/chenjiebin/article/details/121435910)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [js querySelector() 说明](https://blog.csdn.net/sleep_i_like/article/details/129811554)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [JavaScript选择器函数querySelector和querySelectorAll](https://blog.csdn.net/a18339063397/article/details/125762065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值