首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

querySelectorAll和getBoundingClientRect兼容吗?

querySelectorAll和getBoundingClientRect是两个不同的方法,分别用于在DOM中选择元素和获取元素的位置信息。它们之间没有直接的兼容性关系。

querySelectorAll是Document对象的方法,用于返回与指定选择器组匹配的所有元素列表。它可以通过CSS选择器、类名、标签名等方式来选择元素。这个方法在各个现代浏览器中都有良好的兼容性,可以广泛应用于前端开发中。

getBoundingClientRect是Element对象的方法,用于获取元素的大小及其相对于视口的位置。它返回一个DOMRect对象,包含了元素的位置、宽度、高度等信息。这个方法同样在各个现代浏览器中有良好的兼容性,可以用于实现一些与元素位置相关的功能,比如元素的拖拽、碰撞检测等。

综上所述,querySelectorAll和getBoundingClientRect是互不相关的两个方法,它们在各个现代浏览器中都有良好的兼容性,可以放心使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 5 个提升你 JS 编码水平的实例

    答案是:还是不可以,虽然instanceof是通过原型链来判断的,但是对于对象来说,Array也会被转换成Object,而且也不能区分基本类型stringboolean。...直接循环是会报错的: document.querySelectorAll("div").map(e => e); // Uncaught TypeError: document.querySelectorAll...array : Array.prototype[type]["call"](array, fn); }; 使用方法如下: var divs = document.querySelectorAll("div...getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象,是与该元素相关的 CSS 边框集合 。...然后就是document.body.scrollTop 跟 document.documentElement.scrollTop这两个是一个功能,只不过在不同的浏览器下会有一个始终为 0,所以做了以上的兼容性处理

    1K20

    单页应用优化--懒加载

    最近查阅了一些帖子,发现了一个极其强大的方法,其兼容性有待提高~~(但已有相关的的Polyfill方式) 按需加载 // 全部加载 import 'ccharts' // 按需加载 只加载需要使用的组件...防止重复:使用 CommonsChunkPlugin 去重分离 chunk。 动态导入:通过模块的内联函数调用来分离代码。...document.documentElement.clientHeight // 可视区域的高度 function $(selector) { return Array.from(document.querySelectorAll...该API 是异步的(降低了昂贵的DOM样式查询开销、以及CPU、GPU能源成本),不随着目标元素的滚动同步触发,对于理解元素的可见性以及实现DOM内容的预加载延迟加载非常有用。...io.observe(element) }) 实例地址:https://github.com/381510688/practice/blob/master/javascript_test/lazyLoad.html 兼容

    1.6K31

    你可能不知道的 21 个 Web API

    本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。...01 方法列表 querySelector(元素向下查询,返回一个) querySelectorAll(元素向下查询,返回多个) closest(元素向上查询) dataset(获取元素以"data-"...notification(桌面通知) fullScreen(全屏) orientation(屏幕方向) 02 逐个击破 - querySelector 都9102年了,还在用getElementById?...获取指定元素中匹配css选择器的所有元素: let list = document.querySelectorAll("li"); // NodeList(2) [li, li] 这里假设返回2个...因为这个通知时独立于浏览器的,是系统的一个原生控件: const notice = new Notification("前端宇宙情报局", { body: "这20个不常用的Web API真的有用?

    1.4K20

    这些Web API真的有用?别问,问就是有用

    本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。...01 方法列表 querySelector(元素向下查询,返回一个) querySelectorAll(元素向下查询,返回多个) closest(元素向上查询) dataset(获取元素以"data-"...notification(桌面通知) fullScreen(全屏) orientation(屏幕方向) 02 逐个击破 - querySelector 都9102年了,还在用getElementById?...获取指定元素中匹配css选择器的所有元素: let list = document.querySelectorAll("li"); // NodeList(2) [li, li] 这里假设返回2个...因为这个通知时独立于浏览器的,是系统的一个原生控件: const notice = new Notification("前端宇宙情报局", { body: "这20个不常用的Web API真的有用?

    1.2K31

    图片懒加载的几种实现方式

    懒加载的关键是如何判断图片处于浏览器可视范围内,通常有三种方法: 方法一 通过对比屏幕可视窗口高度浏览器滚动距离与元素相对文档顶部的距离之间的关系,判断元素是否可见。...() 获取图片相对于浏览器视窗的位置 示意图如下: getBoundingClientRect() 方法返回一个 ClientRect 对象,里面包含元素的位置大小的信息 ClientRect {...el.onerror = () => io.unobserve(el) } }) function checkImgs() { const imgs = Array.from(document.querySelectorAll...兼容性 Chrome 51+(发布于 2016-05-25) Android 5+ (Chrome 56 发布于 2017-02-06) Edge 15 (2017-04-11) iOS 不支持 Polyfill...通过这种方式,网站将不需要为了监听两个元素的交集变化而在主线程里面做任何操作,并且浏览器可以帮助我们优化管理两个元素的交集变化。

    2.6K20

    【JS】322- 手把手教你实现前端惰性加载

    从需求出发: 在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来?...oTop = el.offsetTop; return sTop + oHeight > oTop; } function checkImgs() { var imgs = document.querySelectorAll...包含边框的只读属性 left、 top、 right bottom,单位为像素。除了 width height外的属性都是相对于视口的左上角位置而言的。 ?...当数据达到一定量的时候,事件绑定循环位置计算会消耗大量的性能,每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ,可能给你的网站造成相当大的闪烁。...,WICG 提供了一个polyfill,可以兼容到以下版本: ?

    96030

    这些不常用的Web API真的有用? 别问,问就是有用🈶

    本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。...以下案例能配动图的我尽量去配了,以免内容枯草乏味,但是如果内容有误,也请大家亲喷或者纠正 方法列表 querySelector(元素向下查询,返回一个) querySelectorAll(元素向下查询,...notification(桌面通知) fullScreen(全屏) orientation(屏幕方向) 逐个击破 1. querySelector 都9102年了,还在用getElementById...获取指定元素中匹配css选择器的所有元素: let list = document.querySelectorAll("li"); // NodeList(2) [li, li] 这里假设返回2个...因为这个通知时独立于浏览器的,是系统的一个原生控件; const notice = new Notification("前端宇宙情报局", { body: "这20个不常用的Web API真的有用?

    89830

    js 数组去除重复数据-5 个提升你 JS 编码水平的实例

    答案是:还是不可以,虽然是通过原型链来判断的,但是对于对象来说,Array也会被转换成Object,而且也不能区分基本类型string。...直接循环是会报错的: document.querySelectorAll("div").map(e => e); // Uncaught TypeError: document.querySelectorAll...我们先来看看例子: var getOffset = function(el) {` var scrollTop = el.getBoundingClientRect().top + document.body.scrollTop...+ document.documentElement.scrollTop; var scrollLeft = el.getBoundingClientRect().left + document.body.scrollLeft...然后就是.body.跟..这两个是一个功能,只不过在不同的浏览器下会有一个始终为 0js 数组去除重复数据,所以做了以上的兼容性处理。所以当我们做拖拽功能的时候,就可以依赖上以上属性。

    1.6K20

    抛开插件,你真的懂拖动怎么实现

    z-index: 999; } 上面列出了所有样式,对照着看看就行,样式不是重点,但是其中值得关注的是动态创建的列表,它的 border 是如何变成表格的一样...因为稍微缺失一个格子的边框,可能就会造成列表原表格不重合,容易露馅,这点你可以仔细琢磨一下。...document.createElement('div'); item.classList.add('draggable'); // 子项是一个只有单列的表格,这就是上面样式中提到的列表的border如何保持表格的边框一样的技巧...// 因为是flex布局,不用设置高度也可以 placeholder.style.width = draggingElement.offsetWidth + 'px'; } // 元素拖动的过程一样...document.createElement('div'); item.classList.add('draggable'); // 子项是一个只有一行的表格,这就是上面样式中提到的列表的border如何保持表格的边框一样的技巧

    6610

    【前端词典】4 (+1)种滚动吸顶实现方式的比较

    ).top 实现 性能优化篇 以上这四种方式你都了解?...我们先看下在 Can I use 中看看这个属性的兼容性: ? 可以看出这个属性的兼容性并不是很好,因为这个 API 还只是实验性的属性。不过这个 API 在 IOS 系统的兼容性还是比较好的。...some code } } } offsetTop getBoundingClientRect() 区别 1. getBoundingClientRect(): 用于获得页面中某个元素的左...解决方案: 还记得第一种方案中的 position:sticky ?这个属性在 IOS6 以上的系统中有良好的兼容性,所以我们可以区分 IOS Android 设备做两种处理。...有的朋友或许会说这个我知道,可是这滚动吸顶有什么关系呢? 不急,你是否还记得滚动吸顶使用了 offsetTop 或者 getBoundingClientRect().top 来获取响应的偏移量呢?

    2.1K30

    兼容 EVM 是所有公链的必要选择

    兼容虚拟机已成为锐不可当的趋势,在公链领域尤其如此。...从目前来看,在排名靠前的公链中兼容 EVM 的已经大约占到了70%;但在这个大多数公链都拥抱 EVM 的时代,依然有30%的公链并没有兼容 EVM,坚守自己的虚拟机,比如 Solana Terra。...由此,我们产生了一个新问题:兼容 EVM 会是所有公链的必要选择?回答这个问题之前,首先需要了解智能合约虚拟机板块的现状。...*图源:Coingape 我们正处在一个公链(智能合约平台)大爆发的时代,围绕着扩容、跨链、更低 Gas 费的竞争方案层出不穷,当然也就存在关于虚拟机的竞争。...兼容 EVM 的平台能降低开发者的迁移成本,吸引更多应用迁移至平台拓展生态; 吸引 EVM 生态的主流开发者团队来平台部署创建应用; 兼容 EVM 后,可以无缝连接以太坊生态,并受益于整个生态系统。

    68510

    2023 年你还在兼容旧版浏览器

    如此多的新功能这么快的推出,我们跟得上?我们怎么判定能不能在生产环境中使用这些功能呢? 在以前浏览器更新缓慢的时候,开发者会依赖最老的浏览器作为基准。总有一个浏览器不会消失,我们必须基于它提供支持。...解释兼容性依然艰难 虽然如此,我们仍需要解释浏览器的兼容性。我们需要告诉团队哪些特性可以使用,确保利益相关者能够理哪些功能在各个浏览器版本中能不能用。...因为一个这样的倡议,下面一些功能在所有浏览器中都得了兼容:dialog 元素、内置拥有无障碍特性的模态非模态对话框、新的兼容移动端 UI 的视口单位、CSS 级联层等等,这解决了开发者挣扎了多年的难题...关于单个功能 API 的兼容性信息也确实是存在的,但是开发者必须逐个检查每个功能甚至功能的组合,才能确保某些特性是可以跨浏览器工作的。...一个新特性只有在可兼容并可安全使用时才能进入基准,开发者也可以很开心的产品运营等同学去分享,我们的网站所有的功能都处于基线之中,不用再去兼容什么 IE6 了,只需要把基线内的功能兼容好就可以了。

    67720

    手把手教你实现前端惰性加载

    从需求出发: 在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来?...var oTop = el.offsetTop;  return sTop + oHeight > oTop;}function checkImgs() {  var imgs = document.querySelectorAll...包含边框的只读属性 left、 top、 right bottom,单位为像素。除了 width height外的属性都是相对于视口的左上角位置而言的。...当数据达到一定量的时候,事件绑定循环位置计算会消耗大量的性能,每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ,可能给你的网站造成相当大的闪烁。...它兼容性有限, Chrome 51+(发布于 2016-05-25) Android 5+ (Chrome 56 发布于 2017-02-06) Edge 15 (2017-04-11) iOS 不支持

    95810
    领券