数组转nodelist

在javascript中NodeList和Array的区别及转换方法

随着深入理解javascript 后对于一些小知识的了解慢慢加深,这里说的是关于nodelist和array的区别,相信你一定用过toarray()方法,但是这里通过js 的方法讲解nodelist 转 array的原理! 首先从字面上区分:NodeList节点的集合,array 数组. 在Web前端编程中,我们通常会通过document.getElementsByTagName的方法取出一组相同标签的dom元素. var anchors = document.getElementsByTagN

（一）类数组对象NodeList

NodeList对象的特点: NodeList是一种类数组对象,用于保存一组有序的节点. 可以通过方括号语法来访问NodeList的值,有item方法与length属性. 它并不是Array的实例,没有数组对象的方法. 通过demo简单了解一下NodeList: html: <ul id="box"> <li>节点一</li> <li>节点二</li> <li>节点三</li> </ul>

js中的类数组对象---NodeList

动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是一种特殊类型的对象. DOM Level 3 spec 规范对 HTMLCollection 对象的描述如下: DOM中的 NodeList 和 NamedNodeMap 对象是动态的(live); 也就是说,对底层文档结构的修改会动态地反映到相关的集合NodeList 和 NamedNodeMa

JS nodeList转数组，兼容IE低版本

一.前言 nodeList转数组貌似很少会这样去操作,但我在做图片懒加载时,我获取了所有需要做懒加载的img元素,也就是一个NodeList对象,打个比方: 对这些元素进行src修改后,我想将此项从NodeList中删除掉,毕竟是操作dom的行为,我不想每次加载完成还在反复操作这堆dom节点. //这样加载完成scroll再怎么执行都不会再触发 function replaceUrl() { if(nodeList.len){ nodeList.forEach(function (self, i

js获取或判断任意数据类类型的通用方法(getDataType)和将NodeList转为数组（NodeListToArray）

function getDataType(any){ /* (1) Object.prototype.toString.call 方法判断类型: 优点:通用,返回"[object String]" 具体object的类型缺点:不能返回继承的类型 (2)typeof x 缺点:对object类型不能细分: 优点:对空null的判断 'undefined'的应用; 返回类型有:'undefined' “string” 'number' 'boolean' 'function' 'obje

NodeList类数组对象: HTMLCollection , NamedNodeMap，两套API（childNodes , children）

快捷键:leishuzuduixiang(类数组对象) bianlijiedian(遍历节点) jiedian(节点) htmlcollection , namednodemap , nodelist. nodeList类数组对象的特点1,nodeList是一种类数组对象,用于保存一组有序的节点.2,通过方括号来访问nodeList的值,有item方法与length属性.3,它并不是Array的实例,没有数组对象的方法<!DOCTYPE html><html lang="

JavaScript：数组大全

栈/队列数组es3: pop删除最后一项(栈) shift删除第一项(队列) push增加到最后(栈) unshift增加到最前(队列) reverse翻转 join转字符串 slice截取(切片)slice splice剪接 concat数组合并 sort排序本质详解数组es5: isArray indexOf取索引 lastIndexOf some常用 every常用 filter reduce详解 reduceRight forEach map 兼容低版本IE扩展的Array 类数组:

ES6 数组的扩展

1. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回. 下面是一个类数组 let arr = { '0':'a', '1':'b', '2':'c', length:3 }; ES5我们可能都会这样写: var arr1=[].slice.call(arr); ES6可以把一个类数组转化为一个真正的数组 var arr2=Array.from(arr) 实际应用中,常见的类似数组的对象是DOM操作返回NodeList集合,以及

es6学习笔记--字符串&数值&数组&函数&对象的扩展

这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.includes(str1, n) 返回布尔值,表示是否找到了参数字符串 params: 第一个参数str1 必选, 要匹配的字符第二个参数n 可选表示开始搜索的索引位置第n个开始搜索到结束 let str = 'hello world' let str1 = 'hello' console.

JavaScript：我总结的数组API

栈/队列数组es3: pop删除最后一项(栈) shift删除第一项(队列) push增加到最后(栈) unshift增加到最前(队列) reverse翻转 join转字符串 slice截取(切片)slice splice剪接 concat数组合并 sort排序本质详解数组es5: isArray indexOf取索引 lastIndexOf some常用 every常用 filter reduce详解 reduceRight forEach map 兼容低版本IE扩展的Array 类数组:

NodeList、HTMLCollection和NamedNodeMap

上篇文章以arguments为例讲到了类数组对象,这篇我们讨论更多的类数组对象NodeList.HTMLCollection和NamedNodeMap.既然是类数组对象,这3种对象也都能应用上篇文章中提到的类数组对象的可用方法,下面主要讲讲这3种对象的应用及区别. HTMLCollection 可以从字面上理解,也就是HTML元素的集合,是一个类数组对象.一般包括getElementsByTagName().getElementsByClassName().getElementsByName()

ES6的新特性（8）——数组的扩展

数组的扩展扩展运算符含义扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符主要用于函数调用. functio

ES6 数组扩展

1....扩展运算符该运算符将一个数组,变为参数序列. 作用:(1)代替aplly 'use strict'; Math.max(...[2,5,8]) (2)将字符串转为数组 2.Array.from object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map). 实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象.Array.from都可以将它们转为真正的数组. // NodeList

ES6学习笔记（六）数组的扩展

1.扩展运算符 1.1含义扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 相当于对数组进行了遍历.该运算符主要用于函数

NodeList对象的特点

nodeList对象的特点1,nodeList是一种类数组对象,用于保存一组有序的节点.2,通过方括号来访问nodeList的值,有item方法与length属性.3,它并不是Array的实例,没有数组对象的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>

ES6数组的拓展

扩展运算符扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符主要用于函数调用. function push(ar

ES6(阮一峰) 数组的扩展

1.扩展运算符扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 该运算符主要用于函数调用. function add(x, y) { return x + y; } const numbers = [4, 38]; add(...numbers) 替代函数的apply方法 // ES5 的写法 Math.max.apply(null, [1

《ES6标准入门》(阮一峰)--9.数组的扩展

1.扩展运算符含义扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符主要用于函数调用. function pu

脚本化CSS类-HTML5 classList属性

HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设置和清除元素的className属性来为元素添加或移除attention类 function grabAttention(e){e.className="attention";} function releaseAttention(e){e.className="";}

深入理解DOM节点关系

× 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不同的信息及标记.每个节点都拥有各自的特点.数据和方法,也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.本文将详细描述DOM间的节点关系节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱.接下来,将把DOM节点关系分为属性

深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

× 目录 [1]方法 [2]非实时 [3]缺陷前面的话尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器.除了前面已经介绍过的getElementsByClassName()方法外,DOM拓展了querySelectorAll().querySelector()和matchesSelector()这3种方法,通过CSS选择符查询DOM文档取得元素的引用的

数组转nodelist

热门专题