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.mzph.cn/news/129045.shtml

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

相关文章

ts 简易封装 axios,统一 API

文章目录 为什么要封装目标文件结构封装通用请求方法获得类型提示http 方法文件上传使用示例实例化post 请求类型提示文件上传 总结完整代码&#xff1a; 为什么要封装 axios 本身已经很好用了&#xff0c;看似多次一举的封装则是为了让 axios 与项目解耦。比如想要将网络请求…

视频增强和修复工具 Topaz Video AI mac中文版功能

Topaz Video AI mac是一款使用人工智能技术对视频进行增强和修复的软件。它可以自动降噪、去除锐化、减少压缩失真、提高清晰度等等。Topaz Video AI可以处理各种类型的视频&#xff0c;包括低分辨率视频、老旧影片、手机录制的视频等。 使用Topaz Video AI非常简单&#xff0c…

突破防火墙的一种方法

当Linux防火墙阻止来自某个ip的数据时&#xff0c;它应该是根据ip数据报里“源IP地址”字段取得的对方ip吧&#xff0c;那对方就不能通过篡改“源IP地址”来绕过防火墙吗&#xff1f;NAT模式下的路由器就修改了这个字段。 但这样的话&#xff0c;攻击者是收不到服务器返回的数…

PHP获取域名地址,$_SERVER[]用法

一、PHP获取域名地址 $host $_SERVER[HTTP_HOST];二、PHP获取域名后面的所有字符 $host $_SERVER[REQUEST_URI];//https://www.baidu.com/md/?articleId134157878//输出 /md/?articleId134157878三、PHP获取服务器的IP $serverIP $_SERVER[SERVER_ADDR]; echo "服务…

学 Java 怎么进外企?

作者&#xff1a;**苍何&#xff0c;CSDN 2023 年 实力新星&#xff0c;前大厂高级 Java 工程师&#xff0c;阿里云专家博主&#xff0c;土木转码&#xff0c;现任部门技术 leader&#xff0c;专注于互联网技术分享&#xff0c;职场经验分享。 &#x1f525;热门文章推荐&#…

麒麟KYLINIOS软件仓库搭建01-新创建软件仓库服务器

原文链接&#xff1a;麒麟KYLINIOS软件仓库搭建01-新创建软件仓库服务器 hello&#xff0c;大家好啊&#xff0c;今天给大家带来麒麟桌面操作系统软件仓库搭建的文章01-新创建软件仓库服务器&#xff0c;本篇文章主要给大家介绍了如何在麒麟桌面操作系统2203-x86版本上搭建内网…

docker 下安装mysql8.0

在docker中查询mysql镜像 PS C:\Users\admin> docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql MySQL is a widely used, open-source relation……

使用java代码操作Redis

一、Java连接Redis 二、Java操作Redis的常见类型数据存储 三、Redis中的项目应用

YOLOV8最简图像分类检测推理代码

安装YOLOV8 首先要去YOLOV8的官网安装库 YOLOV8官方网站 # Install the ultralytics package from PyPI pip install ultralytics安装opencv pip install opencv-pythonimport cv2 from ultralytics import YOLO# Load the YOLOv8 model model YOLO(yolov8n.pt)# Open the …

【Python_GraphicsView 学习笔记(一)】Graphics View框架的基本介绍

【Python_GraphicsView 学习笔记&#xff08;一&#xff09;】Graphics View框架的基本介绍 前言正文1、Graphics View框架简介2、Graphics View框架与QPainter类的区别3、Graphics View框架的三个组成部分4、场景QGraphicsScene类5、视图QGraphicsView类6、图形项QGraphicsIte…

深度学习_3 数据操作之线代,微分

线代基础 标量 只有一个元素的张量。可以通过 x torch.tensor(3.0) 方式创建。 向量 由多个标量组成的列表&#xff08;一维张量&#xff09;。比如 x torch.arange(4) 就是创建了一个1*4的向量。可以通过下标获取特定元素&#xff08;x[3]&#xff09;&#xff0c;可以通…

Vue3入门指南:零基础小白也能轻松理解的学习笔记

文章目录 创建项目开发环境项目目录模板语法属性绑定条件渲染列表渲染事件处理内联事件处理器方法事件处理器&#xff08;常用&#xff09; 事件参数获取 event 事件事件传参 事件修饰符阻止默认事件阻止事件冒泡 数组变化侦测变更方法替换一个数组 计算属性class 绑定单对象绑…

野火霸天虎 STM32F407 学习笔记_1 stm32介绍;调试方法介绍

STM32入门——基于野火 F407 霸天虎课程学习 前言 博主开始探索嵌入式以来&#xff0c;其实很早就开始玩 stm32 了。但是学了一段时间之后总是感觉还是很没有头绪&#xff0c;不知道在学什么。前前后后分别尝试了江协科技、正点原子、野火霸天虎三次 stm32 的课程学习。江协科…

多模态 多引擎 超融合 新生态!2023亚信科技AntDB数据库8.0产品发布

9月20日&#xff0c;以“多模态 多引擎 超融合 新生态”为主题的亚信科技AntDB数据库8.0产品发布会成功举办&#xff0c;从技术和生态两个角度全方位展示了AntDB数据库第8次大型能力升级和生态建设成果。浙江移动、用友、麒麟软件、华录高诚、金云智联等行业伙伴及业界专家共同…

本地部署 lama-cleaner

本地部署 lama-cleaner 什么是 lama-cleanerGithub 地址部署 lama-cleaner启动 lama-cleaner什么是 lama-cleaner lama-cleaner 是一款由 SOTA AI 模型提供支持的免费开源修复工具。 从照片中删除任何不需要的物体、缺陷、人物,或擦除并替换(由稳定扩散驱动)照片上的任何东…

如何做好网页配色,分享一些配色方案和方法

很多网页设计师在选择网页配色方案时&#xff0c;会纠结于用什么网页UI配色方案来吸引客户的注意力&#xff0c;传达信息。选择正确的颜色是网页设计不可或缺的一部分。本指南将从色彩理论和色彩心理学入手&#xff0c;分享三个网页UI配色的简单步骤。 网页UI配色方法有很多&a…

关于msvcp120.dll丢失的解决方法详解,快速解决dll丢失问题

在计算机使用过程中&#xff0c;经常会遇到“msvcp120.dll丢失”的错误提示。这个错误提示通常出现在运行某些程序或游戏时&#xff0c;造成相关应用程序可能无法正常启动或运行。那么&#xff0c;究竟是什么原因导致了msvcp120.dll文件的丢失呢&#xff1f;本文将详细解析msvc…

pytorch笔记:split

torch.split 是 PyTorch 中的一个函数&#xff0c;用于将张量按指定的大小或张量数量进行分割 1 基本使用方法 torch.split(tensor, split_size_or_sections, dim0)tensor要分割的输入张量split_size_or_sections以是整数或整数列表。 如果是整数&#xff0c;那么它表示每个分…

在 Linux 中更改 echo 的输出颜色

文章目录 前言一、快速入门二、基本使用2.1 对于常规的输出2.2 对于字体加粗的输出2.3 对于字体斜体的输出2.4 对于带下划线的输出2.5 对于闪烁效果的输出 三、小结 前言 在计算机编程世界中&#xff0c;颜色不仅仅是一种视觉效果&#xff0c;它也是一种信息传递的工具。特别是…

打印实心平行四边形和空心平行四边形

public class test3 {public static void main(String[]args){/*##########* ##########* ##########* ##########* ##########*/System.out.println("-------实心平行四边形----------");int i,a,b,c;for(i0;i<5;i){ai;while(a!0){System.out.print(&q…