像数组一样使用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:一个对象组合的有效用法 的相关文章

  • C++的使用小教程7——类的静态成员

    C 的使用小教程7 类的静态成员 1 什么是静态成员 2 类的静态数据实例 3 类的静态函数实例 学习好幸苦 1 什么是静态成员 当我们声明一个类的成员为静态时 无论创建多少个类的对象 静态成员是共享的 我们可以在类的外部对静态成员进行初始
  • JavaScript第二个分水岭——对象

    个人简介 个人主页 微风洋洋 博客领域 编程基础 后端 写作风格 干货 干货 还是tmd的干货 精选专栏 JavaScript 支持洋锅 点赞 收藏 留言 好久不见 甚是想念 大家好 我是微风洋洋 芜湖 起飞 上次情人节 我帮没有对象的大兄
  • java自学笔记1:java中的类

    一 1 类的重要性 所有java程序都以class为组织单元 2 什么是类 类是模子 确定对象将会y拥有的特征 属性 和行为 方法 3 类的组成 属性和方法 4 定义一个类的步骤 a 定义类名 b 编写类的属性 c 编写类的方法 publi
  • MySQL8 EXPLAIN 命令输出的都是什么东西?这篇超详细!

    引子 小扎刚毕业不久 在一家互联网公司工作 由于是新人 做的也都是简单的CRUD 刚来的时候还有点不适应 做了几个月之后 就变成了熟练工了 左复制 右粘贴 然后改改就是自己的代码了 生活真美好 有一天 领导说他做的有个列表页面速度很慢 半天
  • 类中包含几种成员,分别是什么?

    类中有两种成员 成员变量以及成员函数 其中成员变量分为静态的成员变量以及非静态的成员变量 成员函数分为静态的成员函数以及非静态的成员函数
  • IntelliJ IDEA更新Maven远程仓库索引index(pom文件终于有快速的自动提示了)

    IntelliJ IDEA更新Maven远程仓库索引 因为某些原因 在 IDEA 下载 Maven 索引总是特别慢 有时候等待它下载好几个小时 然后突然抽风下载失败 再下载又要重新下了 所以这里介绍从远程下载索引到本地更新的方法 本文默认你
  • JavaScript的OO思想(一)

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

    undefined的是声明了但是没有赋值 javascript在使用该变量是不会报错 undeclared 是未声明也未赋值的变量 JavaScript访问会报错 Null 只有一个null undefined 是由null派生处理的 因此
  • Mysql优化4-合适的索引

    四中索引 普通索引 主键索引 唯一索引 全文索引 一 索引的CURD 1 添加 1 1 主键索引添加 把一张表的一个字段设置为主键 该字段就位主键索引 id int unsigned primary key auto increment u
  • 数据库开发考试复习

    文章目录 B树索引结构 B树索引的结构和使用方式 B树索引的使用 什么时候使用B树索引 为什么为外键建立索引是普遍的要求 上面一个问题的例外情况 IOT 大概率不考 B树索引练习 索引 系统生成键 含有索引但未使用的几种情况 位图索引 哈希
  • 微信小程序富文本标签rich-text的使用

    wxml 接收对象数组
  • (已上岸)记一次Java后台实习面试问题——附答案

    2020年6月5日 某互联网公司的 Java开发实习生 技术面二面 面试官 自我介绍 项目提了一嘴 JDK 1 8 集合源码 TCP细节 HTTP和HTTPS redis数据结构和常用方法 消息队列基础 Spring SpringCloud
  • 记一次关于MySQL分页查询的优化方案(聚集索引与非聚集索引)

    最近在工作中 有一段逻辑需要从一张大约70W数据的表中分页查询 最开始写的SQL是 SELECT FROM table name WHERE 1 1 ORDER BY time column DESC LIMIT 600000 10 查询时
  • elasticsearch 为“非查询字段”不建索引 index store

    官方文档 index 简章翻译 文末附原文 索引index 这个参数可以控制字段应该怎样建索引 怎样查询 它有以下三个可用值 no 不把此字段添加到索引中 也就是不建索引 此字段不可查询 not analyzed 将字段的原始值放入索引中
  • iOS UITabBartroller作为根视图

    RootViewController m UITabBarCOntrollerDemo Created by Dubai on 14 10 4 Copyright c 2015年 DUbai All rights reserved impo
  • 分块查找算法思路、示例和实现

    分块查找 索引表 22 44 74 数组 22 12 13 9 8 33 42 44 38 24 48 60 58 74 47 算法步骤 通过索引表线性查找确定在数组的哪一 块 通过数组里所在 块 的线性查找确定是否存在 在哪个位置 算法代
  • 多线程系列之——事件内核对象

    所有内核对象里面事件内核对象是最简单的一个 它包括一个使用计数 还有两个布尔值 一个布尔值用来表示事件是手动重置事件还是自动重置事件 另一个布尔值表示当前是否处于触发状态 当一个手动重置事件被触发的时候 所有等待该事件的线程都能变成调度状态
  • MYSQL中索引与主键的区别

    MYSQL中索引与主键的区别 索引 索引好比是一本书的目录 可以快速的通过页码找到你需要的那一页 惟一地标识一行 主键 做为数据库表唯一行标识 作为一个可以被外键有效引用的对象 索引是一种特殊的文件 InnoDB数据表上的索引是表空间的一个
  • 蓝牙之四-Handler

    Handler机制 Handler允许用户发送和处理Message以及线程MessageQueue相关的可运行对象 每个Handler实例都对应一个单线程以及该线程的MessageQueue 当创建新的Handler时 该Handler将被
  • Elasticsearch之映射(mapping)。

    索引中每个文档都有一个类型 type 每个类型拥有自己的映射 mapping 或者模式定义 schema definition 一个映射定义了字段类型 每个字段的数据类型 以及字段被Elasticsearch处理的方式 映射还用于设置关联到

随机推荐

  • [小技巧] 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