nodelist 与 HTMLCollection 的区别

原地址 https://cloud.tencent.com/developer/article/2013289

节点与元素

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

以下示例

<div id="user"><p id="demo" class="text-info">Hello</p>
</div>

每个 HTML 元素是元素节点,所以<div>是一个元素节点,<p>也是元素节点。 <p class="text-info">Hello</p>元素有属性和文本,所以class="text-info"id="demo"是属性节点,Hello是文本节点。 从上面例子可以看出,节点包含了元素,元素是属于节点的一种。

element 元素对象

节点都是单个对象,有时会需要一种数据结构,能够容纳多个节点。DOM提供两种集合对象,用于实现这种节点的集合:NodeList和HTMLCollection。

  • HTMLCollection 是表示 HTML 元素的集合。
  • NodeList 对象代表一个有顺序的节点列表

以下方法获取的为element 元素对象

  • document.getElementById(“id属性”)
  • document.querySelector(‘css选择器’)

示例

// getElementById返回元素
element1 = document.getElementById('user');
console.log(element1) // 返回整个div 元素<div id="user"><p id="demo" class="text-info">Hello</p></div>
element2 = document.getElementById('demo');
console.log(element2) // <p id="demo" class="text-info">Hello</p>
// querySelector返回元素
element1 = document.querySelector('#user');
console.log(element1) // 返回整个div 元素<div id="user"><p id="demo" class="text-info">Hello</p></div>
element2 = document.querySelector('#demo');
console.log(element2) // <p id="demo" class="text-info">Hello</p>
element3 = document.querySelector('p');
console.log(element3) // <p id="demo" class="text-info">Hello</p>
element4 = document.querySelector('.text-info');
console.log(element4) // <p id="demo" class="text-info">Hello</p>
element5 = document.querySelector('p.text-info');
console.log(element5) // <p 

HTMLCollection 对象

HTMLCollection只能包含 元素节点(ElementNode)类型的节点, 以下方法返回HTMLCollection对象

  • document.getElementsByClassName(“className”)
  • document.getElementsByTagName(“tag名称”)
  • document.forms  // 对象选择器查找 HTML 对象
    <div id="user"><p id="demo" class="text-info">Hello</p><p>Hello</p></div>

使用示例

elements = document.getElementsByClassName("text-info");
console.log(elements);  // HTMLCollection
console.log(elements.length); // 获取个数
// 索引取值
console.log(elements[0]); // 下标取值 <p id="demo" class="text-info">Hello</p>
// item 根据下标取值
console.log(elements.item(0));
// namedItem 根据id 或name属性取值
console.log(elements.namedItem('demo'));

HTMLCollection 对象中的属性和方法:

属性 / 方法

参数

描述

length

返回 HTMLCollection 中元素的数量。

item()

索引 number类型

返回 HTMLCollection 中指定索引的元素。

namedItem()

字符串,传元素的id或name名称,如果id找不到就找name

返回 HTMLCollection 中指定 ID 或 name 属性的元素。

namedItem() 方法返回 HTMLCollection 对象中指定 ID 或 name 的元素。

HTMLCollection.namedItem(name)
或
HTMLCollection[name]

使用示例,以下两种方法都可以

// namedItem 根据id 或name属性取值
console.log(elements.namedItem('demo'));
// 也可以直接中括号里面传id或name属性
console.log(elements['demo']);

NodeList 对象

NodeList 是表示节点的集合。

NodeList 对象中的属性和方法: | 属性 / 方法 | 参数    | 描述                                     | | ————   |————— | ——————————————————— | | length     | 无    | 返回 NodeList 中的数量。             | | item()     | 索引 number类型   | 返回 NodeList 中指定索引的节点。           |

以下方法获取的为NodeList对象

  • document.getElementsByName(“name名称”)
  • document.querySelectorAll(“css选择器”)
  • element.childNodes  // 获取元素的子节点
    <form id="form-user"><label for="user-id">用户名</label><input id="user-id" name="username" value="yoyo"></form><div id="user"><p id="demo" class="text-info">Hello</p><p>Hello</p></div>

使用示例

nodes = document.getElementsByName('username');
console.log(nodes)  // NodeList [input#user-id]
// length 属性
console.log(nodes.length)  //1
// 索引取值
console.log(nodes[0]) // <input id="user-id" name="username" value="yoyo">
// item索引取值
console.log(nodes.item(0))  // <input id="user-id" name="username" value="yoyo">

document.querySelectorAll()也一样

nodes = document.querySelectorAll('#user');
console.log(nodes);  // NodeList [div#user]
console.log(nodes.length);  // 1
// 索引取值
console.log(nodes[0]) // <input id="user-id" name="username" value="yoyo">
// item索引取值
console.log(nodes.item(0))  // <input id="user-id" name="username" value="yoyo">

element.childNodes 是获取元素的子节点

element = document.getElementById('user');
// childNodes 所有的子节点
console.log(element.childNodes);
console.log(element.childNodes.length);  // 5

HTMLCollection与NodeList区别

HTMLCollection 是表示 HTML 元素的集合,元素也是节点的一种,也就是元素节点,NodeList 是表示节点的集合 我们可以理解为 HTMLCollection 是 Nodelist 集合的一种。

差异

HTMLCollection

NodeList

length

item()

namedItem

forEach

索引取值

可以

可以

节点类型

元素节点

任意节点:文本节点、元素节点、属性节点、注释节点

HTMLCollection 不是一个数组!HTMLCollection 看起来可能是一个数组,但其实不是。 你可以像数组一样,使用索引来获取元素。 HTMLCollection 无法使用数组的方法:valueOf(), pop(), push(), 或 join()

NodeList节点列表不是一个数组!NodeList节点列表看起来可能是一个数组,但其实不是。 你可以像数组一样,使用索引来获取元素。 节点列表无法使用数组的方法:valueOf(), pop(), push(), 或 join() 。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/178712.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES-初识ES

文章目录 介绍ElasticSearchElasticSearch的主要功能ElasticSearch的主要特性ElasticSearch的家族成员LogStashKibanaBeats ELK&#xff08;ElasticSearch LogStash Kibana&#xff09;的应用场景与数据库集成指标采集/日志分析 安装和配置ElasticSearch一、安装1、下载ES安装…

SOME/IP 协议介绍(一)

1. 引言和功能概述 本文档规定了可扩展面向服务基于IP的中间件&#xff08;SOME/IP&#xff09;——一种用于汽车/嵌入式RPC机制和底层序列化/传输格式的示例&#xff0c;作为由RTE调用的序列化器。 唯一有效的缩写是SOME/IP。其他缩写&#xff08;例如Some/IP&#xff09;是…

什么是Babel?它的主要作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

【51单片机】LED与独立按键(学习笔记)

一、点亮一个LED 1、LED介绍 LED&#xff1a;发光二极管 补&#xff1a;电阻读数 102 > 10 00 1k 473 > 47 000 2、Keil的使用 1、新建工程&#xff1a;Project > New Project Ctrl Shift N &#xff1a;新建文件夹 2、选型号&#xff1a;Atmel-AT89C52 3、xxx…

VBA之正则表达式(44)-- 拆分商品和规格

实例需求&#xff1a;商品组清单保存在A列中&#xff0c;现需要将其拆分为商品名称&#xff0c;保存在从B列开始的后续单元格中&#xff0c;部分商品包含规格&#xff0c;并且多种规格属性使用了逗号分隔&#xff0c;因此无法直接使用Excel分列功能完成数据拆分。 示例代码如下…

【错误解决方案】ModuleNotFoundError: No module named ‘torchvision.models.utils‘

1. 错误提示 在python程序&#xff0c;尝试导入一个名为torchvision.models.utils的模块&#xff0c;但Python提示找不到这个模块。 错误提示&#xff1a;ModuleNotFoundError: No module named torchvision.models.utils 2. 解决方案 1&#xff09;这可能是因为你还没有安装…

利用云计算和微服务架构开发可扩展的同城外卖APP

如今&#xff0c;同城外卖APP已经成为了人们点餐的主要方式之一。然而&#xff0c;要构建一款成功的同城外卖APP&#xff0c;不仅需要满足用户的需求&#xff0c;还需要具备可扩展性&#xff0c;以适应快速增长的用户和订单量。 一、了解同城外卖APP的需求 在着手开发同城外卖…

centos 7 kafka2.6单机安装及动态认证SASL SCRAM配置

目录 1.kfaka安装篇 1.1 安装jdk 1.2安装kafka 2.安全篇 2.1 kafka安全涉及3部份&#xff1a; 2.2 Kafka权限控制认证方式 2.3 SASL/SCRAM-SHA-256 配置实例 2.3.1 创建用户 2.3.2 创建 JAAS 文件及配置 3.测试 3.1 创建测试用户 3.2 配置JAAS 文件 3.2.1 生产者配…

C++归并排序算法的应用:计算右侧小于当前元素的个数

题目 给你一个整数数组 nums &#xff0c;按要求返回一个新数组 counts 。数组 counts 有该性质&#xff1a; counts[i] 的值是 nums[i] 右侧小于 nums[i] 的元素的数量。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,6,1] 输出&#xff1a;[2,1,1,0] 解释&#xff1a; 5 …

酒店预订订房小程序源码系统 带完整搭建教程

酒店预订订房小程序源码系统是一种基于互联网技术的线上预订平台&#xff0c;旨在为用户提供方便快捷的酒店预订服务。该系统通常包括前端用户界面、后端服务器和数据库三个部分&#xff0c;其中前端界面主要展示酒店信息、订房需求信息、订单信息等&#xff0c;后端服务器负责…

当函数参数为一级指针,二级指针

当函数参数为一级指针&#xff0c;二级指针 在讲述内容之前&#xff0c;先讲四点重要知识 1.当传入参数时&#xff0c;函数形参会立即申请形参的内存空间&#xff0c;函数执行完毕后&#xff0c;形参的内存空间立即释放掉。 1.指针是存放其他变量地址的变量。指针有自己的内…

Spring Boot Web MVC

文章目录 一、Spring Boot Web MVC 概念二、状态码三、其他注解四、响应操作 一、Spring Boot Web MVC 概念 Spring Web MVC 是⼀个 Web 框架&#xff0c;一开始就包含在Spring 框架里。 1. MVC 定义 软件⼯程中的⼀种软件架构设计模式&#xff0c;它把软件系统分为模型、视…

uniapp实现路线规划

UniApp是一个基于Vue.js框架开发的跨平台应用开发框架&#xff0c;可以同时构建iOS、Android、H5等多个平台的应用。它使用了基于前端技术栈的Web开发方式&#xff0c;通过编写一套代码&#xff0c;即可在不同平台上运行和发布应用。 UniApp具有以下特点&#xff1a; 跨平台开…

【设计模式】第8节:结构型模式之“适配器模式”

一、简介 适配器模式是用来做适配的&#xff0c;它将不兼容的接口转换为可兼容的接口&#xff0c;让原本由于接口不兼容而不能一起工作的类可以一起工作。 适配器模式角色&#xff1a; 请求者client&#xff1a;调用服务的角色目标Target&#xff1a;定义了Client要使用的功…

Window下coturn服务器的搭建

Window下搭建coturn服务器&#xff1a; 准备材料&#xff1a; 1、安装Cygwin&#xff0c;地址&#xff1a;https://cygwin.com/install.html 由于Window无法直接部署coturn&#xff0c;因此需要下载安装Cygwin在Window上部署Linux虚拟环境。 在安装的时候需要安装几下packe…

Azure机器学习 - 使用与Azure集成的Visual Studio Code实战教程

本文介绍如何启动远程连接到 Azure 机器学习计算实例的 Visual Studio Code。 借助 Azure 机器学习资源的强大功能&#xff0c;使用 VS Code 作为集成开发环境 (IDE)。 在VS Code中将计算实例设置为远程 Jupyter Notebook 服务器。 关注TechLead&#xff0c;分享AI全维度知识。…

目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉 工业表盘自动识别&#xff08;指针型和数值型&#xff09;智能水尺识别电梯中电动车识别&#xff0c;人数统计缺陷检测&#xff08;半导体&#xff0c;电子元器件等&#xff09;没带头盔检测基于dlib的人脸识别抽烟检测和睡岗检测/驾驶疲…

Java选择与循环

1.选择 前言&#xff1a;什么是选择呢&#xff1f;在我们的人生中处处面临着选择&#xff0c;比如说在学校你可以选择玩&#xff0c;摆烂&#xff0c;当然也可以选择努力写代码&#xff0c;刷题。什么样的选择就会面临什么样的结果。 其实程序和人生一样&#xff1a;顺序中夹杂…

大数据技术之集群数据迁移

文章目录 数据治理之集群迁移数据 数据治理之集群迁移数据 准备两套集群&#xff0c;我这使用apache集群和CDH集群。 启动集群 启动完毕后&#xff0c;将apache集群中&#xff0c;hive库里dwd,dws,ads三个库的数据迁移到CDH集群 在apache集群里hosts加上CDH Namenode对应域名并…

IPv4首部格式

IPv4首部格式 IPv4数据报的首部格式及其内容是实现IPv4协议各种功能的基础。 在TCPIP标准中&#xff0c;各种数据格式常常以32比特(即4字节)为单位来描述。 IPv4首部格式图 ## IPv4数据报的组成 主要由固定部分(20字节)可变部分(最大40字节) - 固定部分是指每个IPv4数据报都必…