html5 新选择器 querySelector querySelectorAll

最新推荐文章于 2022-03-03 12:00:46 发布
最新推荐文章于 2022-03-03 12:00:46 发布
阅读量168 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xxx91hx/p/4720227.html
本文详细介绍了querySelector方法的使用实例，包括如何通过ID和类名查询元素，以及返回单个元素或元素集合的方法。文章还展示了在不同浏览器中的兼容性情况，并提供了测试代码以确保正确使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 querySelector 返回满足条件的单个元素

使用实例

HTML

<div id="main">主体布局</div>

JS

var main =document.querySelector('#main');

console.log(main)

这时候结果返回的就是 整个元素 <div id="main">主体布局</div>

返回一个查询元素

测试谷歌 IE11 IE10 IE9  火狐  可以正常使用

PS： 如果接受多个查询参数 只返回第一个查询结果

上面的比如这样查询 document.querySelector('#main,.footer')

只返回<div id="main">主体布局</div>

截图

querySelectorAll 返回满足条件的所有元素集合

HTML

<div class="footer">底部1</div>

<div class="footer">底部2</div>

JS

var footer = document.querySelectorAll('.footer');

console.log(footer);

结果是一个数组 选择其中的一个就要用footer[0] footer[1]

结果

footer[0] 返回<div class="footer">底部1</div>
footer[1] 返回<div class="footer">底部2</div>

PS：可以接受多个参数 都返回到数组里

document.querySelectorAll('#main,.footer')

返回的是三个 

直接看截图

转载于:https://www.cnblogs.com/xxx91hx/p/4720227.html

query获取整个节点html,JavaScript中querySelector()获取HTML元素的方法介绍
weixin_31720623的博客
06-07 1741
QuerySelector()是一种可以从JavaScript 检测和获取任意HTML元素的方法，虽然JavaScript从开始就有可以获得HTML元素的getElemenById()和getElemetnsByClasNamo()等方法，但是，如果使用querySelector()，则可以在jQuery意义上有选择地指定HTML元素，而无需了解id属性值，class属性值等。简而言之，就是可以使...
SelectAll全选
07-13
删除之类操作需要全选功能，方便选择 public class MainActivity extends Activity { private ListView lv; private MyAdapter mAdapter; private ArrayList list; private Button bt_selectall; // private Button bt_cancel; // private Button bt_deselectall; private int checkNum; // 记录选中的条目数量 private TextView tv_show;// 用于显示选中的条目数量 /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* 实例化各个控件 */ lv = (ListView) findViewById(R.id.lv); bt_selectall = (Button) findViewById(R.id.bt_selectall); // bt_cancel = (Button) findViewById(R.id.bt_cancelselectall); // bt_deselectall = (Button) findViewById(R.id.bt_deselectall); tv_show = (TextView) findViewById(R.id.tv); list = new ArrayList(); // 为Adapter准备数据 initDate(); // 实例化自定义的MyAdapter mAdapter = new MyAdapter(list, this); // 绑定Adapter lv.setAdapter(mAdapter); // 全选按钮的回调接口 bt_selectall.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 遍历list的长度，将MyAdapter中的map值全部设为true for (int i = 0; i < list.size(); i++) { MyAdapter.getIsSelected().put(i, true); } // 数量设为list的长度 checkNum = list.size(); // 刷新listview和TextView的显示 dataChanged(); } }); // 反选按钮的回调接口 // bt_cancel.setOnClickListener(new OnClickListener() { // @Override // public void onClick(View v) { // // 遍历list的长度，将已选的设为未选，未选的设为已选 // for (int i = 0; i < list.siz
html querySelector与querySelectorAll
东隅已逝，桑榆非晚。
11-16 1153
querySelector 与 querySelectorAll 方法是定义在 W3C Selectors API 的方法。根据 CSS 选择器的语法选择 dom 元素。 querySelector 用法：document.querySelector(selectors) 或者 element.querySelector(selector)； <html> <head> <title>
HTML DOM querySelector() 方法
weixin_30674525的博客
06-19 161
HTML DOMquerySelector()方法 Document 对象 实例 获取文档中 id="demo" 的元素： document.querySelector("#demo"); 尝试一下 » 定义和用法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意：querySelector() 方法仅仅返回匹配指定选择器的第一个...
HTML DOM querySelector() 方法的使用与示例
debugtoday的博客
03-03 2565
HTML DOM querySelector() 方法的使用与示例
HTML5中的 querySelector
我的英文站点：https://iorilan.medium.com/
10-08 4252
原文地址： http://www.cnblogs.com/lingyibin/articles/2135120.html   Selectors API Example .green{backg
javascript高级选择器querySelector和querySelectorAll全面解析
11-27
他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 querySelector 和 querySelectorAll 在规范中定义了如下...
jQuery选择器querySelector的使用指南
11-26
然而，随着HTML5的出现，原生JavaScript也获得了类似的功能，这就是`document.querySelector`和`document.querySelectorAll`。这两个API让开发者无需依赖jQuery库也能实现高效、灵活的元素选取。 `document....
再谈querySelector和querySelectorAll的区别与联系
09-05
`querySelector` 和 `querySelectorAll` 是在Web开发中用于选取HTML或XML文档中特定元素的JavaScript API，它们都基于CSS选择器。这两个方法都定义在DOM接口中，可以在任何支持这些方法的DOM节点上使用。 **...
javascript之querySelector和querySelectorAll使用介绍
10-28
当开发者习惯于使用jQuery选择器后，可能会自然而然地将jQuery的选择器语法规则与querySelector和querySelectorAll进行比较。然而，尽管两者在功能上相似，但它们在一些细节上存在差异，例如在DOM查询范围（jQuery...
html选择器selector,html5 新选择器 querySelector querySelectorAll
weixin_39552204的博客
06-03 148
querySelector 返回满足条件的单个元素使用实例HTML主体布局JSvar main =document.querySelector(‘#main‘);console.log(main)这时候结果返回的就是 整个元素主体布局返回一个查询元素测试谷歌 IE11 IE10 IE9 火狐 可以正常使用PS： 如果接受多个查询参数 只返回第一个查询结果上面的比如这样查询 document....
使用xpath实现document.querySelector样式选择器进行html解析（一）：将html转成xml
weixin_34055910的博客
06-26 541
使用xpath实现document.querySelector样式选择器进行html解析（一）：将html转成xml 使用xpath实现document.querySelector样式选择器进行html解析（二）：扩展一下xpath以便支持正则 使用xpath实现document.querySelector样式选择器进行html解析（三）：实现样式选择...
HTML5 JavaScript中获取元素，筛选选择器(querySelector)
houyanhua1的专栏
03-20 7713
querySelector: 只能筛选出符合条件的第一个元素querySelectorAll: 获取符合条件的所有元素,返回数组类型。demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/
html选择器selector,html5 中高级选择器 querySelector
weixin_36225384的博客
06-03 712
简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法，其中，querySelector返回满足条件的单个DOM元素，按照深度院线和先序遍历的原则使用参数提供的css选择器在DOM中...
JS原生的DOM选择器querySelector
weixin_30827565的博客
03-14 311
在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySel...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值