JavaScript获取dom元素querySelector()替代getElementById()的方法

本篇文章给大家带来的内容是关于Javascript获取dom元素querySelector()替代getElementById()的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

替代 getElementById()

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

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

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

比如，下面这几个获取的元素是一样的：

// getElementById() 方式
document.getElementById(&＃39;username&＃39;);

// querySelector() 方式
document.querySelector(&＃39;#username&＃39;);

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

querySelector() 有两种方式

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

效果如图：

以上就是Javascript获取dom元素querySelector()替代getElementById()的方法的详细内容，更多请关注 第一PHP社区 其它相关文章！