querySelectorAll和getBoundingClientRect兼容吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

前端面试HTML相关（一）

data-src="pic.png"> var imgs = document.querySelectorAll...// clientHeight 代表当前视口的高度 img.getBoundingClientRect().top < document.documentElement.clientHeight; 外加节流实时判断图片位置...控制图片加载同方案一；核心代码 let viewHeight = document.body.clientHeight; const demo = document.querySelectorAll...+ DataSet API 1、判断图片是否出现在当前视口：使用浏览器IntersectionObserver api, 可以监听元素是否与浏览器视口有交叉，也叫交叉观察器；该api存在兼容性...chrom51+以上才能看到效果； 2、控制图片加载同方案一；核心代码 const images = document.querySelectorAll('img');

4082 0

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

答案是：还是不可以，虽然instanceof是通过原型链来判断的，但是对于对象来说，Array也会被转换成Object，而且也不能区分基本类型string和boolean。...直接循环是会报错的： 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，所以做了以上的兼容性处理

1.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

JavaScript实现图片懒加载(lazyload)

我们实现页面懒加载的方案一般有三种方式：获取元素clientHeight等位置信息 Element.getBoundingClientRect() IntersectionObserver 我们先写...let imgList = document.querySelectorAll('#lazyload img') || []; let clientHeight = window.innerHeight...() Element.getBoundingClientRect() 返回一个DOMRect对象，包含了描述元素的位置属性：left，right，top，bottom。...rectObject = object.getBoundingClientRect(); 我们可以使用定时器或者scroll事件，在回调函数调用元素的getBoundingClientRect()方法，...(item.target) } }) } var io = new IntersectionObserver(callback); let imgs = document.querySelectorAll

1.3K2 0

元素中必知重要属性和方法

那么还有什么属性和方法比较重要呢？其又代表什么意思呢？下面我们进入主题。...() append() / remove() querySelector() / querySelectorAll() scroll() mousedown() / mousemove() / mouseup...Element.getBoundingClientRect() getBoundingClientRect() 方法返回元素的top, right, bottom 和 left是相对视口的位置。...(x, y)及其元素的宽度和高度～ 2. append() / remove() 对元素进行追加 append 和移除 remove。...demo.append(p); let oEl = document.getElementById('demoP'); demo.remove(pEl); 3. querySelector() / querySelectorAll

9202 0

单页应用优化--懒加载

最近查阅了一些帖子，发现了一个极其强大的方法，其兼容性有待提高~~（但已有相关的的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 兼容性

2.1K3 1

你可能不知道的 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.7K2 0

彻底玩转图片懒加载及底层实现原理

/img/8.png" alt=""> var imgs = document.querySelectorAll('img'); //...()实现图片懒加载先来了解一下这个API吧： getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。...getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含页面看不见的部分）。...是元素自身的宽高，但是right，bottom和css中的理解有点不一样。...“其实支持程度还不是特别好，我们你的应用对于浏览器兼容性要求比较高的话，建议还是先观望一波～它的使用也非常简单，如标题所示： <img src="example.jpg" loading="lazy"

1.2K3 1

这些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.6K3 1

详细设计一个文章页目录插件

-- 这里是部分文章内容 --> 和$listeners"> 和$listeners..."> $attrs和$listeners <!...这个时候我们就能很容易的获取到所有的标题： let arContentAnchor = document.querySelectorAll('.headerlink') 上面这串代码的结果会返回一个...首先要确定下，目录都包含了哪些部分，如上图所示这里大概是包含了 3 部分：目录条、序号和标题。...所以需要做的就是把和视口高度有关的逻辑抽离出来，统一放到一个函数里，当监听到视口高度变化的时候，再去执行这个函数。

2.7K2 0

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

懒加载的关键是如何判断图片处于浏览器可视范围内，通常有三种方法：方法一通过对比屏幕可视窗口高度和浏览器滚动距离与元素相对文档顶部的距离之间的关系，判断元素是否可见。...() 获取图片相对于浏览器视窗的位置示意图如下： 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...通过这种方式，网站将不需要为了监听两个元素的交集变化而在主线程里面做任何操作，并且浏览器可以帮助我们优化和管理两个元素的交集变化。

3.1K2 0

【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，可以兼容到以下版本： ?

1.4K3 0

抛开插件，你真的懂拖动怎么实现吗？

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如何保持和表格的边框一样的技巧

4981 0

这些不常用的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真的有用吗?

1.1K3 0

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 数组去除重复数据，所以做了以上的兼容性处理。所以当我们做拖拽功能的时候，就可以依赖上以上属性。

2.1K2 0

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

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

8811 0

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

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

1.1K2 0

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

).top 实现以上这四种方式你都了解吗？...我们先看下在 Can I use 中看看这个属性的兼容性： ? 可以看出这个属性的兼容性并不是很好，因为这个 API 还只是实验性的属性。不过这个 API 在 IOS 系统的兼容性还是比较好的。...some code } } } offsetTop 和 getBoundingClientRect() 区别 1. getBoundingClientRect(): 用于获得页面中某个元素的左...，上，右和下分别相对浏览器视窗的位置。...解决方案：还记得第一种方案中的 position:sticky 吗？这个属性在 IOS6 以上的系统中有良好的兼容性，所以我们可以区分 IOS 和 Android 设备做两种处理。

3K6 0

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

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

2.6K3 0

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

从需求出发：在实际的项目开发中，我遇到了一个这样的需求：一个页面模块有很多列表数据展示，每条数据都带有图片，而首次展示的图片只需要不到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 不支持

1.3K1 0

实现图片懒加载

依据就是判断该图片是否在当前窗口的可视区域内，在这里我们封装一个_isShow函数来实现 function _isShow(el) { var coords = el.getBoundingClientRect...如此简单，不妨扩展一下添加一些自定义参数，谁都喜欢自定义，不是吗？支持iScroll, iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。...time, // 延迟载入时间 _selector; // 选择器默认为 .m-lazyload function _isShow(el) { var coords = el.getBoundingClientRect...false); } } ImageLazyload.prototype.getNode = function () { imgList = []; var nodes = document.querySelectorAll

1.8K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭