资讯专栏INFORMATION COLUMN

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

cangck_X / 903人阅读

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

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

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

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

相关文章

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

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

    caoym 评论0 收藏0
  • 原生js替换jQuery各种方法-中文版

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

    lylwyy2016 评论0 收藏0
  • 获取网页指定元素原生方法回顾

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

    URLOS 评论0 收藏0
  • 那些原生JavaScript

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

    fantix 评论0 收藏0
  • 你不需要 jQuery,但你需要一个 DOM

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

    HitenDev 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<