原生 js 获取 dom 元素 querySelector() 替代 getElementById()

栏目: jQuery · 发布时间: 5年前

内容简介:替代很长一段时间以来,除了 jQuery 的选择器之外,我一直在用下面这几个方法获取 dom 元素后来才发现

原生 js 获取 dom 元素 querySelector() 替代 getElementById()

替代 getElementById()

很长一段时间以来,除了 jQuery 的选择器之外,我一直在用下面这几个方法获取 dom 元素

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()

后来才发现 querySelector() 这个方法,这个方法跟 jquery 的获取元素方法是一样的。里面填写的是 css 选择器。

比如,下面这几个获取的元素是一样的:

// getElementById() 方式
document.getElementById('username');

// querySelector() 方式
document.querySelector('#username');

// jquery 方式
$('#username')[0] // 不理解这个可以百度 `jquery 与 dom 相互转换`

querySelector() 有两种方式

querySelector( css选择器字符串 )     // 获取第一个匹配元素
querySelectorAll( css选择器字符串 )  // 获取所有匹配元素

效果如图:

原生 js 获取 dom 元素 querySelector() 替代 getElementById()

其获取元素的方式跟 jquery 很像,但取到的元素并不一样,jquery 取得的是 jquery 元素,而 querySelector() 获取的是 dom 对象。

例子

关于选择器,参阅: http://www.w3school.com.cn/cs...

比如,现在需要获取 所有 class 以 text- 开头的元素,也就是说包含 text-success , text-danger , text-warning 等元素,就这样写:

document.querySelectorAll("[class^='text-']")

原生 js 获取 dom 元素 querySelector() 替代 getElementById()


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

京东平台运营攻略(全彩)

京东平台运营攻略(全彩)

京东商学院 / 电子工业出版社 / 2015-5 / 69.00元

2014 年年末,京东POP 开放平台的入驻商家已超过6 万,京东平台被广泛关注和认可的同时,在电商江湖中仍颇具神秘色彩。面对碎片化的信息,京东的店铺经营者及希望入驻京东的准商家们,对于在京东如何利用丰富的各类平台资源,搭建并运营京东店铺,一直很难找到全面而系统的资料。 《京东平台运营攻略(全彩)》由京东官方出品,动员了京东内部涉及第三方店铺业务线的众多部门,由多位业务精英参与撰写,保证了内......一起来看看 《京东平台运营攻略(全彩)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具