遍历htmlcollection_htmlcollection遍历_htmlcollection 遍历 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

详解NodeList 和 HTMLCollection 和 Array

Array，NodeList， HTMLCollection这三个概念和它们之间的关系有很多做了几年前端的同学都搞不清楚，经常遇到但是又感觉很陌生，剪不断理还乱的感觉。今天咱们就来理清这三个东西。

04

JavaScript HTML DOM 集合(Collection)

getElementsByTagName() 方法返回 HTMLCollection 对象。

02

您找到你想要的搜索结果了吗？

是的

没有找到

JavaScript HTML DOM 节点列表

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

01

JavaScript选择器

JS选择器常用的有getElementById()、getElementsByClassName()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll()。

02

面试题：HTML标签的相关操作判断题目

在DOM中根据标签去获取元素的原生api是 getElementsByTagName()，它返回的是一个包含所有给定标签名称的元素 HTML集合HTMLCollection[1], 整个文件结构都会被搜索，包括根节点。

03

JS魔法堂：那些困扰你的DOM集合类型

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　大家先看看下面的js，猜猜结果会怎样吧！　　可选答案：　　①. 获取id属性值为id的节点元素　　②. 抛namedItem is undefined的异常 var nodes = document.getElementsByName('dummyName'); var node = nodes.namedItem('id'); 　　答案是两种都有可能哦！document.getElementsByName在Chrome

09

【春节日更】小技巧 — 如何将类数组转成数组

常见的类数组有 arguments 和 HTMLCollection、NodeList ，《javascript权威指南》里面给出了一个鉴别对象是否是类数组的函数：

01

通过几个事例，就可以说明 for...of 循环在 JS 是不可或缺

JavaScript 中的for...of语句就是这种情况，可从ES2015开始使用。

05

JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)

前言我们平常说的查找元素和节点到底有什么区别？为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和 NodeList 的区别又是什么？带着这些问题进入本篇的学习。节点与元素根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点以下示例

02

DOM中历史遗留的那些天坑 ...

即时到了DOM3.0时代, 为了同时满足浏览器的向下兼容和ES6的最新街口, DOM还是保留了很多古老的,极易和新类型引起混淆的类比如HTMLCollection vs. NodeList, 这篇文章

06

JavaScript离别之作——HTML元素操作

document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。

03

左右移动元素及省市联动案例

在线演示：https://gethtml.cn/project/2020/04/18/index.html

01

获取DOM节点的方法汇总

我们都知道，当获得所有节点（如：getElementsByTagName）或者获得所有子元素（如：element.childNodes）时，实际上返回的是包含一些DOM节点的集合，这个集合要么是 HTMLCollection，要么是 NodeList，两者其实都是类数组的对象。

01

Dom的高级应用

sectionRowIndex 返回该表格行在其所在元素(,等元素)的索引值

03

DOM Clobbering 的原理及应用

做为一个前端程序猿，肯定应该知道很多与前端相关的知识，像是 HTML 或是 JS 相关的东西，但这些通常都与“使用”有关。例如说我知道写 HTML 的时候要语义化，要使用正确的标签；我知道 JS 应该要怎么用。可是有些知识虽然也跟网页有关，却不是前端程序员经常接触的。

02

JavaScript 学习-27.查找HTML DOM节点(元素)

前言如何查找和访问 HTML 页面中的节点元素？也就是我们经常说的定位元素的一些方法。查询 HTML 节点(元素)一些方法查找 html 页面上的元素，可以用以下方法方法节点类型 getElementById() 通过 id 查找 HTML 元素 getElementsByClassName() 通过标 class 属性查找 HTML 元素 getElementsByName() 通过标 name 属性查找 HTML 元素 getElementsByTagName() 通过标 tag 标签查找 H

02

读 Zepto 源码之集合元素查找

00

09Document对象

什么是Document对象 document对象在DOM中代表了HTML页面 document也是DOM解析HTML页面的入口。定位页面元素定位页面元素常用的方法：方法名参数传入作用返回类型示例 getElementById() ID名通过页面元素的id属性值定位元素单个节点，既是Node也是Element类型 getElementById('p1') getElementsByName() name 通过页面元素的name属性值定位元素 NodeList getEleme

03

JavaScript合集

JavaScript 学习-1.注释与 var 变量声明 JavaScript 学习-2.数据类型 JavaScript 学习-3.Array数组对象基本操作 JavaScript 学习-4.Array数组遍历的几种方式 JavaScript 学习-5.对象（object）的创建 JavaScript 学习-6.对象（object）的序列化和反序列化 JavaScript 学习-7.函数定义的几种方式 JavaScript 学习-8.JavaScript 箭头函数的使用 JavaScript

04

前端基础-文档对象模型 (DOM)

DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。

01

JS魔法堂：追忆那些原始的选择器

一、前言首先这里说的原始选择器是指除 querySelector 、 querySelectorAll 外的其他选择器。从前我只使用 getElementById 获取元素并没有觉得有什么问题，但随着参与项目的前端规模逐步扩大，踩的坑就越来越多，于是将踩过的和学习过的经验教训记录在这里，供以后好查阅。二、

07

Document对象

Document接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM树。DOM树包含了像<body>、

这样的元素，以及大量其他元素。Document对象向网页文档本身提供了全局操作功能，接口描述了任何类型的文档的通用属性与方法，根据不同的文档类型(例如HTML、XML、SVG、...)能够使用更多API，此外使用text/html作为内容类型content type的HTML文档，还实现了HTMLDocument接口，而XML和SVG文档则额外实现了XMLDocument接口。

01

伪数组

HTML5学堂：熟悉JavaScript的人对document.getElementsByTagName再熟悉不过，对arguments也多有耳闻，我们时常针对其进行遍历，通过数组下标进行访问，但是它们却是数组中的“冒牌货”，一起来看今天要说的“伪数组”。何为伪数组伪数组（类数组）：无法直接调用数组方法，也无法使用length属性实现什么特殊的行为，但是！可以使用真正数组遍历的方法（for循环配合数组下标）来遍历它们。说的浅显一些，就是：存在着length属性，可以通过数组下标的方式进行每个元素的访问

04

DOM Clobbering Attack学习记录.md

之前在文章《前端中存在的变量劫持漏洞》中对id已经有了一些认识，我们知道有如下知识：

04

document.all的详细解释(document.all基本上所有浏览器可用！)

document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的娄组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如html注释等等。在document.all数组里面，元素不分层次，是按照其在文档中出现的先后顺序，平行地罗列的。所以可以用数字索引来引用到任何一个元素。但比较常用的是用对象id来引用一个特定的对象，比如document.all[“element”]这样。 document.layers是Netscape 4.x专有的属性，是一个代表所有由储如

<layer>等定位了的元素的数组。通常也是用

或<layer>对象的id属性来引用的，但是这里面不包含除此以外的其它元素。其实这两个属性没什么可比性，大概你经常看到他们同时出时，这有一个历史原因。在第四代浏览器出现的时候，标准相当混乱，Netscape和微软分别推出了它们的Navigator 4.x和IE 4.0，这两个浏览器的巨大差异，也使开发者面临了一个使网页跨浏览器兼容的噩梦。而document.layer和document.all分别是两者一个最显著的标志，为了确定浏览者使用的什么浏览器，通常用是否存在document.layers和document.all来判断。新的统一的标准用document.getElementById等系列方法来引用DOM对象，而且Netscape 6.0以后放弃了layers特征，虽然IE继续保留了document.all，但这最终没有成为DOM标准的一部分。希望document.layers和document.all能够早日作古，让标准早日深入人心！

02

《JavaScript 高级程序设计》阅读笔记 1：最佳实践

可维护性可维护性包括：可理解性、直观性、可适应性、可扩展性和可调试性代码约定：可读性（缩进、注释）；变量和函数命名（有意义的命名）；变量类型透明（var a =null var a = iSpeed）松散耦合： HTML 或者 CSS 与 JavaScript 的解耦（如 CSS 仍然保留样式信息，通过改变类名来改变样式）；事件监听器和应用逻辑的解耦（监听器只发挥监听作用，而将应用逻辑独立成可以复用的函数）编程实践：尊重对象所有权（尽量不要改动原生对象）；尽量避免创建全局变量和函数；

01

DOM节点和元素之间的区别是什么？

文档对象模型（DOM）是将 HTML 或 XML 文档视为树结构的接口，其中每个节点（node）都是文档的对象。DOM 还提供了一组用于查询树、修改结构和样式的方法。

02

Dom 节点和元素有啥区别？好家伙，我弄懂了！

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

02

【JS】723- 前端如何优雅的处理类数组对象？

Leo 部门最近来了位前端实习生 Robin，作为师傅，Leo 认真的为 Robin 介绍了公司业务、部门工作等情况，还有前端的新人学习地图。

03

总结一些前端的知识点 (一)

一、W3C 标准盒模型和 IE 盒模型区别： 1. W3C 标准盒模型：盒子的高宽是由盒子的内容区仅由 width, height 决定的，不包含边框，内外边距。 2. IE 盒模型：在 IE

07

DOM 元素的循环遍历

get 方式获取的 dom 元素，仅可使用==for-in、for-of、for==循环

06

前端如何优雅处理类数组对象？

Leo 部门最近来了位前端实习生 Robin，作为师傅，Leo 认真的为 Robin 介绍了公司业务、部门工作等情况，还有前端的新人学习地图。

03

介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。

02

文档对象模型

DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构以及查询提供了接口。但是要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。

04

Js DOM

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

01

JS框架设计之对象数组化一种子模块

类数组对象是一个很好的存储结构,但是功能太弱了,为了享受纯数组的哪些便捷的方法,使用前可以做下转换,通常可以使用$.slice.call()方法做转换,但是旧版本的IE下的HTMLCollection、NodeList不是Object的子类,如果采用[].slice.call()方法可能会导致异常,下面是各大库是怎么处理的: 1、jQuery的makeArray <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

05

DOM编程

一切能够通过html操作的，也能够用js来实现，这个就是jsDOM编程的魅力。DOM操作其实很直观，我们直接看代码。

03

通过 DOM Clobbering 发现 GMail AMP4Email 的 XSS 漏洞

原文：https://research.securitum.com/xss-in-amp4email-dom-clobbering/

02

DOM操作

1.概述 1.1DOM DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理

06

JavaScript 高级程序设计（第 4 版）- DOM

scrollIntoView()方法存在于所有HTML元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口。参数如下：

03

Element对象

Element是一个通用性非常强的基类，所有Document对象下的对象都继承自它，这个对象描述了所有相同种类的元素所普遍具有的方法和属性，一些接口继承自Element并且增加了一些额外功能的接口描述了具体的行为，例如HTMLElement接口是所有HTML元素的基本接口，而SVGElement接口是所有SVG元素的基础，大多数功能是在这个类的更深层级的接口中被进一步制定的。

04

DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次变化的节点树，允许开发人员添加、移除和修改页面的某一部分。

02

JavaScript 设计模式学习第二十二篇－迭代器模式

迭代器模式（Iterator Pattern）用于顺序地访问聚合对象内部的元素，又无需知道对象内部结构。使用了迭代器之后，使用者不需要关心对象的内部构造，就可以按序访问其中的每个元素。

01

typeof的一些兼容性问题

typeof存在一些兼容性的问题，在IE6,7,8中的DOM和BOM元素及其对象上的方法的判定会出现误差，在safari上对NodeList实例的判定，对ExpReg实例的判断（早期的chrome，safari会对ExpReg实例认定为‘function’）。分析：　　之所以会在IE6,7,8对DOM和BOM元素及其方法判定错误，主要是因为在这3个版本的IE中，js引擎JScript并没有集成到IE浏览器内核　　中，通过COM组件链接JScript和IE内核，浏览器实现的BOM对象或者DOM对象及其

前端温习(二)： Javascriput 核心对象 Document 对象

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

02

JavaScript DOM操作表格及样式

一．操作表格

标签是HTML中结构最为复杂的一个，可以通过DOM来创建生成它（比较麻烦），或者HTML DOM来操作它。 //需要操作的table

querySelector和getElementById方法的区别

这两个新添加的 API 与 getElementById() / getElementsByTagName() 有什么区别呢？

01

JavaScript 数组 API 全解析

在编程世界中，数组是指元素的集合。数组将数据作为元素进行存储，并在需要时将其取出。

02

前端优化

2）css、js、img等静态资源合并压缩（vue的项目有压缩css和js）

02

day021: 函数的arguments为什么不是数组？如何转化成数组？

因为argument是一个对象，只不过它的属性从0开始排，依次为0，1，2...最后还有callee和length属性。我们也把这样的对象称为类数组。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭

人员表
姓名	性别	年龄
汤高	男	20