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

caoym 发布于2019-08-02 14:30 / 2169人阅读

摘要：原生获取元素替代替代很长一段时间以来，除了的选择器之外，我一直在用下面这几个方法获取元素后来才发现这个方法，这个方法跟的获取元素方法是一样的。例子关于选择器，参阅比如，现在需要获取所有以开头的元素，也就是说包含等元素，就这样写

原生 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-"]")

云服务器 GPU云服务器原生js获取元素 dom获取元素 js原生dom事件原生js查找元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53843.html

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

摘要：原生获取元素替代替代很长一段时间以来，除了的选择器之外，我一直在用下面这几个方法获取元素后来才发现这个方法，这个方法跟的获取元素方法是一样的。例子关于选择器，参阅比如，现在需要获取所有以开头的元素，也就是说包含等元素，就这样写原生 js 获取 dom 元素 querySelector() 替代 getElementById() 替代 getElementById() 很长一段时间以来...

cangck_X 2019-08-26 13:35 评论0 收藏0
原生js替换jQuery各种方法-中文版

摘要：本项目总结了大部分替代的方法，暂时只支持以上浏览器。返回指定元素及其后代的文本内容。从服务器读取数据并替换匹配元素的内容。用它自己的方式处理，原生遵循标准实现了最小来处理。当全部被解决时返回，当任一被拒绝时拒绝。是创建的一种方式。原文https://github.com/nefe/You-D... You Dont Need jQuery showImg(https://segmen...

lylwyy2016 2019-08-23 12:14 评论0 收藏0
获取网页指定元素的原生方法回顾

摘要：浏览器原生提供的几个找到元素的方法为网页全局唯一。匹配包含的元素匹配包含和的元素级联用法和相似返回一个。以上返回数组的方法，返回的都是的。那是个夜黑风高的夜晚，我遇到了一个按钮：搜索嗯，我要选中它，我敲下了一行代码： const submitButton = document.querySelector(button[type=submit]); 这对于精通 document.q...

URLOS 2019-08-21 17:02 评论0 收藏0
那些原生JavaScript

摘要：最近在用写页面，当然了在移动里引入或这些框架，肯定是极不理性的。原生挺简单，为何需要的成功当时是因为这些浏览器不兼容，让开发者崩溃，而且上浏览器性能好，跨平台兼容也不影响性能。但根本就不是为手机设计的。最近在用mui写页面，当然了在移动App里引入jq或zepto这些框架，肯定是极不理性的。原生JS挺简单，为何需要jq？jq的成功当时是因为ie6、7、8、9、10、chrome、ff...

fantix 2019-08-26 11:29 评论0 收藏0
你不需要 jQuery，但你需要一个 DOM 库

摘要：对于复杂的业务需求仍然需要一些操作。使用方式很简单，但是你需要创建一个独立文件，重新挂载需要的方法到命名空间上，这在编写插件时非常有用。正如前文所说，的操作在我看来依然是最好用的，所以，你不需要，但你需要一个库。 showImg(https://segmentfault.com/img/bVbuPEH?w=750&h=375); 写这篇文章的目的，一方面是介绍一下自己编写的模块化 DO...

HitenDev 2019-08-23 16:23 评论0 收藏0