像数组一样使用NodeList:一个对象组合的有效用法

2023-11-18

场景

我是用querySelectorAll()查询了一些标记,并收到了一个NodeList响应。

问题

节点列表类似于数组。(比如:他们都有一个长度属性,它们都在括号中的索引访问它们的属性或者子元素:NodeList[0])尝试使用.map,.filter或者.forEach中的任意一个方法。

方法

各不相同的选项。从循环遍历到数组填充还可以使用更简单的es6方法:

var elements = [... nodelist]
var elements = Array.from(nodelist)

然而,它们都有问题…它们工作的太好了。你现在有了一个数组,而不是节点列表。(现在已经不是一个NodeList了)。当然,它有来自NodeList的所有数据,但它不再被识别为NodeList。

有什么问题吗?

Try:

nodeElementInTheArray.compareDocumentPosition(anotherNodeElementInTheArray)

这将出错,因为参数不是一个真正的NodeListItem。

让我们重新构建我们的需求

我们不需要我们的NodeList来做一个数组,我们只需要数组的属性。这是一个完美的对象组合的地方。

解决办法

Object.assign(*NODELIST*, Object.Array)

我们的节点仍然是节点列表,和它获取我们需要而不修改其原型这些阵列特征。
我没有看到此解决方案在任何地方发表过,也有可能,因为它是永远不会想要的东西。
所以问,如何做NodeList成为数组,问如何能得到 NodeList 像数组,
而答案可能会 ‘Object Composition
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

像数组一样使用NodeList:一个对象组合的有效用法 的相关文章

  • 【数据库】B树、B+树、索引

    B树 B 树 索引 二叉树是二分树 多分树是二叉树的推广 多分树主要适用于静态的索引数据文件 在插入和删除的时候需要把插入位置之后的每个记录都要向后移动 从而导致增加新的索引项和索引页块 需要对外存上的页块进行大量的调整 因此对于经常需要插
  • C++的使用小教程7——类的静态成员

    C 的使用小教程7 类的静态成员 1 什么是静态成员 2 类的静态数据实例 3 类的静态函数实例 学习好幸苦 1 什么是静态成员 当我们声明一个类的成员为静态时 无论创建多少个类的对象 静态成员是共享的 我们可以在类的外部对静态成员进行初始
  • 为mysql数据库建立索引;mysql索引总结----mysql 索引类型以及创建;mysql_建立索引的优缺点

    因为欣赏所以转载 http www cnblogs com cy163 archive 2008 10 27 1320798 html http www cnblogs com lihuiyong p 5623191 html http w
  • Java中 判断集合中的元素相等的依据 详细解析

    我们经常使用的集合如ArrayList LinkedList Vector 你在调用contains 方法的时候 或者是你在根据对象移除元素 remove Object o 你知道他们是如何判断集合中的元素是否 是相等的吗 接下来我们跟着源
  • 【JVM】内存管理

    目录 引言 1 内存分配 1 0 创建一个对象涉及的内存 1 1 方法区 1 2 堆 1 2 1 对象 堆里的存储单元 2 1 3 虚拟机栈 2 垃圾回收GC 2 1 垃圾回收的目标区域 2 2 垃圾回收算法 2 2 0 标记算法 2 2
  • Python数据分析之:pandas 的索引方式 data.loc[], data[][]

    文章目录 1 data loc index column 2 data column index 1 data loc index column 使用 loc 第一个参数是行索引 第二个参数是列索引 import pandas as pd
  • Oracle 索引

    1 索引介绍 索引是用于加速数据存取的数据对象 是对数据表中一个或多个列进行排序的结构 合理的使用索引可以大大降低I O次数 从而提高数据访问性能 2 问题 为什么需要索引 Select from scott emp where empno
  • java自学笔记1:java中的类

    一 1 类的重要性 所有java程序都以class为组织单元 2 什么是类 类是模子 确定对象将会y拥有的特征 属性 和行为 方法 3 类的组成 属性和方法 4 定义一个类的步骤 a 定义类名 b 编写类的属性 c 编写类的方法 publi
  • MongoDB—索引的建立与维护

    一 索引基础 MongoDB的索引几乎与传统的关系型数据库一模一样 这其中也包括一些基本的优化技巧 下面是创建索引的命令 gt db test ensureIndex username 1 可以通过下面的名称查看索引是否已经成功建立 gt
  • MySql索引原理与使用大全

    林炳文Evankaka原创作品 转载请注明出处http blog csdn net evankaka 一 索引介绍 索引是对数据库表中一列或多列的值进行排序的一种结构 在关系数据库中 索引是一种与表有关的数据库结构 它可以使对应于表的SQL
  • MySQL8 EXPLAIN 命令输出的都是什么东西?这篇超详细!

    引子 小扎刚毕业不久 在一家互联网公司工作 由于是新人 做的也都是简单的CRUD 刚来的时候还有点不适应 做了几个月之后 就变成了熟练工了 左复制 右粘贴 然后改改就是自己的代码了 生活真美好 有一天 领导说他做的有个列表页面速度很慢 半天
  • mongodb 关于 整数类型 和 字符串类型 索引的比较

    想看看到底是 整数类型的索引快呢 还是字符串类型的索引快 到底快多少呢 内存分别占多少呢 今天就来测试一下 配置 华硕飞行堡垒6 500G 的 SSD 准备数据 a 是 for 循环的变量 id a name abcdefg a 2千万的数
  • Dictionary字典的用法及用途原理

    Dictionary 实例化Dictionary private Dictionary
  • MySQL存储引擎MyISAM和InnoDB底层索引结构

    目录 一 存储引擎作用于什么对象 二 MyISAM和InnoDB对索引和数据的存储在磁盘上是如何体现的 三 MyISAM主键索引与辅助索引的结构 1 主键索引 2 辅助 非主键 索引 四 InnoDB主键索引与辅助索引的结构 1 主键索引
  • js判断object里面是否包含某一字段

  • JavaScript的OO思想(一)

    类class是Object Oriented面向对象的语言有一个标志 通过类我们可以创建任意多个具有相同属性和方法的对象 JavaScript中没有类的概念 但它也是面向对象的 只是实现方法会有所不同 创建单个对象有两种基本方法 1 使用O
  • MySQL 索引原理

    MySQL索引深入剖析 官方定义是 索引 Index 是帮助MySQL高效获取数据的数据结构 简单来说 索引是一种数据结构 以协助快速查询 更新数据库表中数据 索引的基本原理 把创建索引列的内容进行排序 对排序的结果生成倒排表 在倒排表内容
  • 微信小程序富文本标签rich-text的使用

    wxml 接收对象数组
  • feignclient发送get请求,传递参数为对象。

    feignclient发送get请求 传递参数为对象 此时不能使用在地址栏传递参数的方式 需要将参数放到请求体中 第一步 修改application yml中配置feign发送请求使用apache httpclient 而不是默认的jdk
  • numpy索引与切片

    一 整数索引 作用 要获取数组的单个元素 指定元素的索引即可 例子 x np array 1 2 3 4 5 6 7 8 print x 2 3 x np array 11 12 13 14 15 16 17 18 19 20 21 22

随机推荐

  • [小技巧] git: Your branch and 'origin/master' have diverged

    本文参考 http stackoverflow com questions 19864934 git your branch and origin master have diverged how to throw away local c
  • mac os x excel 单元格换行

    参考 http jingyan baidu com article 0f5fb09911cb366d8334ea07 html Windows 下是 alt 回车 mac os x 下变成 alt ctrl 回车
  • Vue3通透教程【十四】TS其他类型详解(一)

    文章目录 写在前面 对象类型 函数结构类型 数组类型 元组 枚举 类型别名 写在最后 写在前面 专栏介绍 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章 应粉丝要求开始更新 Vue3 的相关技术文章 Vue 框架目前的地位大家应该
  • 毕业设计 STM32的智能WIFI视频人脸追踪监控系统

    0 前言 这两年开始毕业设计和毕业答辩的要求和难度不断提升 传统的毕设题目缺少创新和亮点 往往达不到毕业答辩的要求 这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求 为了大家能够顺利以及最少的精力通过毕设 学长分享优质毕业设计项
  • 函数内变量的提升(function hoisting)

    1 函数内外有重名的变量时 局部变量会覆盖全局变量 原因是函数域优先于全局域 2 当js执行进入函数时 函数内部声明过的所有变量会被提到最前 但同时对变量的赋值等操作不会被提升 例 var a 123 function test alert
  • 12帧跑步动画分解图_今天给大家分享一个跑步动画教程和注意事项!希望有所帮助!...

    跑步的动画的制作 一 跑步的基本原理 前面介绍了走路的动画的制作 跑步的制作方式和走路的方式是一样的 但是我们怎样来区别这两个动作的不同呢 虽然跑步在日常生活中经常看见 但是我们可能从来没有仔细的分析每一个动作 现在我们再来简单的说一下走路
  • upload labs第二关

    从上往下 首先定义两个变量 其中一个为空 在点击提交按钮后 前提文件路径可以找到 开始看文件类型是否为jpeg png gif格式 is upload false msg null if isset POST submit if file
  • Docker搭建zookeeper

    问题背景 前言 本文参考自 docker compose快速搭建Zookeeper集群 熬到凌晨三点多验证部署成功 网上有很多文章已经无法正确部署了 因为有些东西版本升级了 版本跟不上就会报错 还有一种更加详细更加全面的部署方式 Docke
  • 新人如何快速高效的学习Java?

    如果是新人 不想通过培训班 想学java 那么我可以很认真的告诉你 如果你是因为兴趣学学 那么你怎么学都可以 建议你找一些零基础入门的视频来学习 先看一遍 认识一下Java是个什么东西 如果是想转行学习 靠这个来工作 那么你就要好好的制定一
  • 一台计算机要两个内网,局域网如何在一台电脑上设置两个IP地址

    由于工作原因 有时需要连接两个局域网 除了频繁地更换不同局域网的网线 还要不停地设置不同局域网的IP地址 真是很麻烦 下面是学习啦小编收集整理的局域网如何在一台电脑上设置两个IP地址 希望对大家有帮助 局域网在一台电脑上设置两个IP地址的方
  • STM32F4单片机ADC采样及ARM-DSP库的FFT

    模拟信号经过ADC采样后变成数字信号 数字信号可以进行FFT运算 在频域中更容易分析信号的特征 本文将介绍如何用STM32F4的进行ADC采样 并利用ARMDSP库里的FFT算法对ADC采样值进行快速傅里叶变换 我使用的是STM32F407
  • CUDA编程中内存管理机制

    GPU设备端存储器的主要分类和特点 大小 全局 Global 和纹理 Texture 内存 大小受RAM大小的限制 本地 local 内存 每个线程限制在16KB
  • windows平台中使用vscode远程连接linux进行c++开发配置教程(内容详细适合小白)-2021-3-30

    文章目录 一 简要介绍 二 软件安装步骤 1 linux系统安装 2 vscode安装 3 ssh安装 4 配置Remote SSH 5 安装远程插件 6 简单小测试 三 配置vscode开发环境 1 默认设置 用户设置 远程设置和工作区设
  • Qt 开发环境搭建

    Qt开发环境搭建 Qt下载 Qt安装 Windows平台 离线安装 在线安装 Qt安装目录 VS2019搭建Qt开发环境 安装扩展插件 Qt VS Tools Qt Versions配置 问题 VS2019双击编辑UI时闪退 qt显示中文乱
  • 区块链物品溯源系统

    文章目录 前言 一 区块链有哪些特点 二 区块链能给品牌或者行业带来什么 1 信任度 2 小程序展示 总结 前言 区块链是一个典型的分布式协同系统 多方共同维护一个不断增长的分布式数据记录 这些数据通过密码学技术保护内容和时序 使得任何一方
  • Qt multiple definition of (function)

    前景 做项目代码优化 将原来的代码按简单工厂模式进行重新组合编写 对整个模块的文件夹进行分类 归纳 中途 出现这一问题 问题详述 某一类中的全部函数都有error multiple definition of function name 解
  • Linux 下刷 TWRP

    安装 adb 和 fastboot apt install android tools adb android tools fastboot 下载需要的 TWRP https dl twrp me flo 开机状态下进入 bootloade
  • async_await用法

    async作为修饰关键字修饰在函数前 表示该函数是一个异步函数 await的使用必须有async关键字 await等待的必须是一个promise对象 async返回的是一个promise对象 asyn function A return 星
  • pthread_cond_destroy()函数的使用

    NAME pthread cond destroy pthread cond init destroy and initialize condition variables SYNOPSIS THR include
  • 像数组一样使用NodeList:一个对象组合的有效用法

    场景 我是用querySelectorAll 查询了一些标记 并收到了一个NodeList响应 问题 节点列表类似于数组 比如 他们都有一个长度属性 它们都在括号中的索引访问它们的属性或者子元素 NodeList 0 尝试使用 map fi