search
HomeWeb Front-endFront-end Q&AWhat does nodelist mean?

nodelist means node list. It is an object in JavaScript. It is an array-like object used to save a set of ordered nodes; the nodelist object is similar to the HTMLCollection object, and the elements in the object can be passed index to access.

What does nodelist mean?

The operating environment of this article: Windows 10 system, nodejs version 12.19.0, Dell G3 computer.

What does nodelist mean

NodeList is an object in JavaScript, an array-like object used to save a set of ordered nodes

NodeList object

The NodeList object is a node list (collection) obtained from the document.

NodeList object is similar to HTMLCollection object.

Methods in some older browsers (such as getElementsByClassName()) return NodeList objects instead of HTMLCollection objects.

The childNodes property of all browsers returns a NodeList object.

querySelectorAll() of most browsers returns a NodeList object.

Elements in NodeList can be accessed by index (starting at 0).

The node list can keep itself updated. If an element is deleted or added to the node list or XML document, the list is automatically updated.

Note: In a node list, nodes are returned in the same order as they are specified in the XML document.

NodeList object property

length returns the number of nodes in the node list.

NodeList object method

item() returns the node with the specified index number in the node list.

Examples are as follows:

Instance 1:

var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 3

NodeList instance object may be a dynamic collection or a static collection. The so-called dynamic collection is a living collection. If the DOM tree deletes or adds a related node, it will be immediately reflected in the NodeList interface.

In the above code, parent.childNodes returns a NodeList instance object. When the parent node adds a child node, the number of members of the object increases by 1. Node.childNodes returns a dynamic collection.

The document.querySelectorAll method returns a static collection. Changes within the DOM will not be reflected in the return result of this method in real time.

The NodeList interface instance object provides the length attribute and numeric index, so you can use the numeric index to retrieve each node like an array, but it is not an array itself and cannot use array-specific methods such as pop or push. [

Example 2:

//HTML部分代码
//<ul><li>one</li><li>two</li><li>three</li></ul>
//JAVASCRIPT代码
var myNodeList = document.querySelector(&#39;ul&#39;).childNodes;
for(var i=0;i<myNodeList.length;i++){
    console.log(myNodeList[i]);
}
/* <li>one</li>
<li>two</li>
<li>three</li>
*/
console.log(myNodeList.length);// 3
console.log(myNodeList.item(1));//<li>two</li>

In the above code, the numeric index part of myNodeList is traversed through the for loop, and the members corresponding to the 3 indexes are returned, and the length attribute of 3 is correctly returned. .

The second member of the myNodeList instance object is accessed through the item() method. Since numeric indexes start counting from zero, to retrieve the second member, use numeric index 1.

All array-like objects can use the square bracket operator to remove members, so generally, the NodeList[index] method is used instead of the item method.

Recommended learning: "nodejs video tutorial"

The above is the detailed content of What does nodelist mean?. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
node、nvm与npm有什么区别node、nvm与npm有什么区别Jul 04, 2022 pm 04:24 PM

node、nvm与npm的区别:1、nodejs是项目开发时所需要的代码库,nvm是nodejs版本管理工具,npm是nodejs包管理工具;2、nodejs能够使得javascript能够脱离浏览器运行,nvm能够管理nodejs和npm的版本,npm能够管理nodejs的第三方插件。

Vercel是什么?怎么部署Node服务?Vercel是什么?怎么部署Node服务?May 07, 2022 pm 09:34 PM

Vercel是什么?本篇文章带大家了解一下Vercel,并介绍一下在Vercel中部署 Node 服务的方法,希望对大家有所帮助!

node爬取数据实例:聊聊怎么抓取小说章节node爬取数据实例:聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据?下面本篇文章给大家分享一个node爬虫实例,聊聊利用node抓取小说章节的方法,希望对大家有所帮助!

node导出模块有哪两种方式node导出模块有哪两种方式Apr 22, 2022 pm 02:57 PM

node导出模块的两种方式:1、利用exports,该方法可以通过添加属性的方式导出,并且可以导出多个成员;2、利用“module.exports”,该方法可以直接通过为“module.exports”赋值的方式导出模块,只能导出单个成员。

安装node时会自动安装npm吗安装node时会自动安装npm吗Apr 27, 2022 pm 03:51 PM

安装node时会自动安装npm;npm是nodejs平台默认的包管理工具,新版本的nodejs已经集成了npm,所以npm会随同nodejs一起安装,安装完成后可以利用“npm -v”命令查看是否安装成功。

聊聊V8的内存管理与垃圾回收算法聊聊V8的内存管理与垃圾回收算法Apr 27, 2022 pm 08:44 PM

本篇文章带大家了解一下V8引擎的内存管理与垃圾回收算法,希望对大家有所帮助!

node中是否包含dom和bomnode中是否包含dom和bomJul 06, 2022 am 10:19 AM

node中没有包含dom和bom;bom是指浏览器对象模型,bom是指文档对象模型,而node中采用ecmascript进行编码,并且没有浏览器也没有文档,是JavaScript运行在后端的环境平台,因此node中没有包含dom和bom。

聊聊Node.js path模块中的常用工具函数聊聊Node.js path模块中的常用工具函数Jun 08, 2022 pm 05:37 PM

本篇文章带大家聊聊Node.js中的path模块,介绍一下path的常见使用场景、执行机制,以及常用工具函数,希望对大家有所帮助!

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft