通过使用的新的浏览器API过滤多余节点

最新推荐文章于 2024-08-27 15:07:14 发布
最新推荐文章于 2024-08-27 15:07:14 发布
阅读量404 收藏
点赞数
分类专栏： js备忘 文章标签： javascript dom

DOM属性诸如childNodes，firstChild和nextSibling不区分元素节点和其他类型节点，比如注释和文本节点（通常只是两个节点间的空格）。很多情况下只需要访问元素节点，因此在循环中需要检查返回节点的的类型并过滤掉非元素节点。这些类型检查都是不必要的DOM操作。

许多现代的浏览器提供的API可以只返回元素节点。如果可用的话推荐使用这些API，因为它们的执行效率比自己在JavaScript代码中过滤的效率要更高。下表列出了这些便利的DOM属性。


属性名被替换的属性
childrenchildNodes
childElementCountchildeNodes.length
firstElementChildfirstChild
lastElementChildlastChild
nextElementSiblingnextSibling
previousElementSiblingpreniousSibling

【兼容性】

  • 表中所有属性都被FF3.5、Safari4、Chrome2及Opera9.62支持
  • IE6、7、8只支持children属性

【总结】
使用children替代childNodes会更快，因为集合项更少。HTML源码中的空白实际是文本节点，而且它并不包含在children集合中。

quake_walk
关注
专栏目录
为什么Java8中的StreamAPI不如Scala快？
AI天才研究院
07-29 1070
1997年，Sun公司发布了Java1.0版本，这个版本在语法上和功能实现上都非常先进。到目前为止，已有两版Java1.x版本已经出现，并且随着时间的推移，Java的功能也在不断完善和更新。而1.8版本带来的Stream API，就是Java编程的一个重要里程碑。2014年，Oracle宣布将Java8正式命名为Java SE 8。很多开发者纷纷表示，由于java8提供的Stream API功能强大、方便，代码更加优雅易读，所以java8正在改变软件开发的方向，使编程更加高效、简洁。
Kubernetes 集群的异常处理手段，包括集群自愈、集群监控、日志收集、集群规模扩容、节点问题处理、Pod问题定位、网络故障诊断、应用性能瓶颈分析、应用访问失效问题排查等方面知识
AI天才研究院
08-05 1624
随着容器技术的普及和应用，容器集群已经成为云计算领域中一个重要的基础设施，用来提供快速、可扩展、高可用和弹性的服务。Kubernetes（简称K8s）是最具代表性的开源容器编排引擎之一，通过自动化部署、管理和调度容器ized application，极大的促进了容器集群管理的便利性和效率。因此，掌握Kubernetes的相关知识对于架构师、工程师等从事容器技术开发工作的人员来说尤其重要。
javascript以浏览器为例，它提供的额外API可以分为三大类。
qq_43143902的博客
10-08 539
导语：javascript想要实现其他复杂的操作和效果，都要依靠宿主环境提供API。目前已经嵌入javascript的宿主环境有多种。最常见的环境就是浏览器，另外还有服务器环境。以浏览器为例，它提供的额外API可以分为三大类。 ...
浏览器原生的JavaScript API-汇总
weixin_39273589的博客
10-13 982
`navigator.serviceWorker.register('payment-handler.js', { type: 'payment-handler' })`：注册支付处理程序。- `var db = openDatabase('mydb', '1.0', 'My database', 2 * 1024 * 1024)`：打开数据库。- `navigator.getBattery().then(function(battery) {...})`：获取设备电池对象。
【整理】浏览器API概览及使用示例一百条
最新发布
七月
08-27 881
后面会把一些不常用的API以单篇文章的形式详细说明用法以及延申用途如果文章对您有所帮助，请帮我点个免费的赞，拒绝白嫖从我做起，我是七月、期待您的关注。
运行环境-浏览器API
lovepink527的博客
11-08 838
1.浏览器提供的符合W3C标准的DOM操作API、浏览器差异、兼容性 2.浏览器提供的浏览器对象模型 (BOM)提供的所有全局API、浏览器差异、兼容性 3.大量DOM操作、海量数据的性能优化(合并操作、Diff、requestAnimationFrame等) 4.浏览器海量数据存储、操作性能优化 5.DOM事件流的具体实现机制、不同浏览器的差异、事件代理 6.前端发起网络请求的几种方式及其底层实现、可以手写原生ajax、fetch、可以熟练使用第三方库 7.浏览器的同源策略，如何避免同源策略，几种方式的异
40、浏览器API（小实验）：动手整理全部API
所学所思
02-14 1365
今天我们来讲讲浏览器API。浏览器的API数目繁多，我们在之前的课程中，已经一起学习了其中几个比较有体系的部分：比如之前讲到过的DOM和CSSOM等等。但是，如果你留意过，会发现我们讲到的API仍然是标准中非常小的一部分。这里，我们不可能把课程变成一本厚厚的API参考手册，所以这一节课，我设计了一个实验，我们一起来给API分分类。我们按照每个API所在的标准来分类。所以，我们用代码来反射浏览器环境中全局对象的属性，然后我们用JavaScript的filter方法来逐步过滤掉已知的属性。接下来，我们整理API
JavaScript可视化图表库D3.js API中文参考
10-24
D3的核心部分提供了各种API以供使用： 1. 选择集（Selections）操作： - d3.select: 从当前文档中选择一系列元素，例如单个元素或节点。 - d3.selectAll: 从当前文档中选择多项元素，可以是多个元素或节点。 - ...
【浏览器】浏览器原理及常见考点
zhaohb2016的博客
09-06 740
当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。协议、端口号、域名必须一致。
HDFS如何检测并删除多余副本块
热门推荐
走在前往架构师的路上
02-29 1万+
前言 在HDFS中,每时每刻都在进行着大量block块的创建和删除操作,这些庞大的block块构建起了这套复杂的分布式系统.普通block的读写删除操作一般人都或多或少了解过一些,但是过量的副本清理机制是否有人知道呢,就是overReplicatedBlock的处理,针对过量的副本块,HDFS怎么处理,何时处理,处理的策略机制如何,本文就给大家分享HDFS在这方面的知识. 过量副本块以
浏览器对象模型以及常见API
窄门狭路的博客
04-30 375
浏览器对象模型常见API 及用法 什么是浏览器对象模型 BOM ：Browser Object Model（浏览器对象模型）,浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的 API 其主要对象有： window 对象——BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的 Global 对象 location 对象：提供当前窗口中的加载的文档有关的信息和一些导航功能。既是 window 对象属 性，也是 document 的对象属性 navigation 对象
浏览器存储(webStorage)常用API以及简单使用
见证自己学习,成长的记录
12-03 1496
最近正值世纪杯期间，不知道大家心目中的球队成绩如何，在此期间我学了浏览器存储(webStorage)以及API,下面就分享给大家存储内容不是Vue团队打造的，原本的js中就有，所以可以不适用脚手架编译，可以写在HTML中 webStorage又分为localStorage和sessionStorage，浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 存储内容大小一般支持5MB左右（不同浏览器可能还不一样），它的键值对都是字符串
chrome 控制台network请求过多，过滤一些不需要的接口
hap1994的博客
03-15 1870
控制台network中查看接口调用信息，会显示很多的css和js文件，过滤掉一些不需要的文件只显示我们需要的接口。在filter输入框中输入-.s3mb -.css -.json （中间是空格）即可过滤掉 s3mb，js，css后缀文件。
常用浏览器API整理
05-06 1107
面向对象编程,目前还是主流,个人也比较喜欢细化组件、切割对象.这样看起来比较清晰、每个对象职责单一,不会混淆造成混乱. 前端经常会和浏览器打交道,在处理一些与浏览器相关的逻辑时,就会调用浏览器API,
浏览器开发者工具之Network抓包请求过滤详解
博客
03-17 1884
浏览器开发者工具对于搞爬虫的人来绝对是必备知识，其中Network面板使用就最是频繁了（只用Fiddler、charles等抓包工具的除外），分析接口查看请求都是在这个面板中看的，而今天主要讲的就是筛选器的使用，相信大家都遇过在某个场景下，虽然只选定了自己想看的请求类型，但是最终发现还是有好多无关的请求显示，一般的情况就是通过筛选器来筛选出某一个关键请求，但是如果我同时看好几个关键请求怎么弄呢？
谷歌浏览器F12抓包如何过滤只显示接口请求不显示图片、js那些请求
他的博客
12-31 9535
谷歌浏览器F12抓包如何过滤只显示接口请求不显示图 片、js那些请求
浏览器路由 API 详解
weixin_34137799的博客
04-22 628
最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API的。本着追根溯源的初心，于是就想着将浏览器原生的路由 API 整体梳理一遍，以便更加顺畅的理解 Vue-Router 和 React-Router 的相关实现和原理。 背景 浏览器的主要功能就是根据输入的 URL 在窗口加载对应的文档，与此同时，浏览器会记录一个 tab ...
PostMan 进行接口测试---拦截chrome浏览器请求、postmanAPP抓取
DeepBing的博客
09-30 2759
PostMan 进行接口测试---拦截chrome浏览器请求，进行快速编辑接口信息 安装和更新 Postman可作为适用于Mac，Windows（32位/ 64位）和Linux（32位/ 64位）操作系统的本机桌面应用程序使用，也可通过go.postman.co/build上的Web来获得。 要获取最新版本的Postman桌面应用程序，请访问下载页面，然后针对您的平台单击“下载”。 内容 在桌面上安装Postman 苹果电脑 视窗window Linux 在网...
JavaScript Web API 学习笔记：掌握浏览器API与交互
通过DOM API，开发者可以查找、遍历、修改甚至创建新的节点，实现动态网页交互。例如，`document.getElementById()`用于根据ID获取元素，`element.appendChild()`用于在元素末尾添加新子节点。 为了熟练掌握这些Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值