内容简介:替代很长一段时间以来,除了 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选择器字符串 ) // 获取所有匹配元素
效果如图:
其获取元素的方式跟 jquery 很像,但取到的元素并不一样,jquery 取得的是 jquery 元素,而 querySelector()
获取的是 dom 对象。
例子
关于选择器,参阅: http://www.w3school.com.cn/cs...
比如,现在需要获取 所有 class 以 text-
开头的元素,也就是说包含 text-success
, text-danger
, text-warning
等元素,就这样写:
document.querySelectorAll("[class^='text-']")
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Postwoman 替代 Postman
- JSX的替代品[译]
- [译]JSX的替代品
- fetch使用,ajax替代方案
- sharedata 的替代品:datasheet
- 替代 Docker 的五种容器选择
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。