javascript 使用 NodeList需要注意的问题

当我们在使用JavaScript的DOM操作时,常常会遇到返回NodeList类型的情况,例如使用querySelectorAll()方法、通过节点对象的childNodes属性或parentElement.children属性来获取子节点等等。但是NodeList与数组有着相似的使用方法,却存在一些需要注意的问题。

NodeList不是数组

NodeList并不是数组类型,虽然使用方式与数组类似,但是不能直接使用数组方法,例如forEach()map()等操作。同样也没有数组的一些内置方法或属性,例如push()pop()slice()等。

如果想要使用数组方法,需要将NodeList转换为数组,可以使用Array.from()方法或直接使用展开操作符(spread operator)。

// 复制为数组形式
const list = Array.from(document.querySelectorAll('li'));
// 或者使用展开操作符
const list = [...document.querySelectorAll('li')];

NodeList是动态的

尽管NodeList不是数组,但是却是动态的。也就是说当文档中的节点发生变化时,返回的NodeList也会发生变化。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<button onclick="addNode()">添加节点</button>

<script>
function addNode() {
  const ul = document.querySelector('ul');
  const li = document.createElement('li');
  li.textContent = '4';
  ul.appendChild(li);
}

const list = document.querySelectorAll('li');
console.log(list.length); // 输出 3

addNode();
console.log(list.length); // 输出 4
</script>

上面的例子中,当页面加载完成之后,获取了三个li元素,但是当我们通过点击按钮添加了一个新的li元素之后,再次打印list时,它的长度变成了4。这说明NodeList与页面上的 DOM元素存在强关联性,并且 Node List内容随之动态变化。

总结

需要注意的是,NodeList并不是标准的JavaScript数据结构,但是由于与DOM操作密不可分,因此我们在日常开发中会经常接触到它。了解它的特点和使用方式,有助于我们更加深入地理解DOM操作的本质,提高代码质量和效率。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 使用 NodeList需要注意的问题 - Python技术站

(0)
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • Centos7 中 Node.js安装简单方法

    下面是详细的“Centos7 中 Node.js安装简单方法”的完整攻略: 简介 Node.js是一种基于Chrome JavaScript Runtime建立的一个平台,用于方便地构建快速、可扩展的网络应用程序。本文旨在介绍Centos7上安装Node.js的简单方法。 步骤一:下载Node.js二进制包 打开终端,输入以下命令下载Node.js最新版本的…

    node js 2023年6月8日
    00
  • NodeJs form-data格式传输文件的方法

    下面我将详细讲解“NodeJs form-data格式传输文件的方法”的完整攻略。 什么是form-data格式? form-data格式是用于将表单数据以及文件上传到远程服务器的一种数据传输格式,其格式如下: ——WebKitFormBoundary********** Content-Disposition: form-data; name=&q…

    node js 2023年6月8日
    00
  • Nodejs技巧之Exceljs表格操作用法示例

    Nodejs技巧之Exceljs表格操作用法示例 什么是Exceljs? Exceljs是一个使用Node.js编写的JavaScript库,它可以让你在浏览器或Node.js环境下将数据写入Excel中,同时也能从Excel中读取数据。使用它,你可以通过JavaScript来读取、修改和创建Excel文件。 如何安装Exceljs? 可以使用npm命令在线…

    node js 2023年6月8日
    00
  • npm ERR!Cannot read properties of null(reading ‘pickAlgorithm’)报错问题解决

    当你在使用npm包管理器或执行npm命令时,有时候你会遇到“npm ERR!Cannot read properties of null(reading ‘pickAlgorithm’)”这个错误提示,这是一个常见的npm错误。 这个错误提示通常说明你在使用npm包管理器时,执行了某个npm命令,但是在执行这个命令的过程中,出现了问题,可能是由于某些npm配…

    node js 2023年6月8日
    00
  • Ajax 高级功能之ajax向服务器发送数据

    下面我将为您详细讲解“Ajax 高级功能之ajax向服务器发送数据”的完整攻略。 什么是 Ajax? Ajax(Asynchronous Javascript And XML)是一种浏览器与服务器交互的技术,主要用于局部刷新页面,避免页面全局刷新,提升用户体验,同时也能够实现异步数据加载和前后端分离的技术需求。 Ajax向服务器发送数据的原理 在 Ajax …

    node js 2023年6月8日
    00
  • JavaScript中实现键值对应的字典与哈希表结构的示例

    在JavaScript中可以实现键值对应的字典或哈希表结构,可以使用对象(Object)或Map来实现。下面分别介绍两种方式的实现方法。 使用对象实现字典和哈希表 JavaScript中的对象是一种拥有键值对应关系的数据类型,可以使用对象模拟字典和哈希表结构。下面是一个示例: // 创建字典 const dict = { ‘key1’: ‘value1’, …

    node js 2023年6月8日
    00
  • 使用node.js 制作网站前台后台

    使用Node.js制作网站前台后台是非常流行的Web开发技术,它可以帮助我们简化网站开发过程,提高开发效率和用户体验。下面是具体步骤: 确定网站开发需求与预期 在开始开发Node.js的网站前台后台之前,需要认真考虑网站的开发需求和预期。确定这些需求和预期可以帮助我们更好的规划开发流程,从而避免在后期开发过程中浪费时间和精力。 确定后端技术框架 如果要使用N…

    node js 2023年6月8日
    00
  • node.js中 redis 的安装和基本操作示例

    下面就为大家介绍一下Node.js中Redis的安装和基本操作。 Redis的安装 在Node.js中使用Redis需要先安装Redis,下面就给大家介绍两种不同的安装方式。 1. 通过官网下载Redis Redis官网的下载地址为:https://redis.io/download,直接进入该网页即可看到Redis的各个版本,我们选择最新的稳定版本进行下载…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部