[].forEach.call

最新推荐文章于 2024-05-03 22:03:54 发布
原创 最新推荐文章于 2024-05-03 22:03:54 发布 · 846 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#[].forEach.call

本文介绍了一种使用JavaScript操作DOM的方法，通过继承数组的方法来遍历NodeList，实现对页面元素的操作，如添加随机颜色边框及计算高度进行分页等功能。

曾看到过一行非常有意思的代码：

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

放到浏览器里执行之后，页面上的所有元素都会加上一个随机颜色的边框。
执行效果
而这行代码的原理便是先选取页面上所有的元素，然后通过继承数组的foreach方法，遍历所有的Dom节点，从而使得每个dom节点都加上了边框。

前几天在项目中刚好遇到了类似的需求，我需要拿到页面中所有的元素，然后通过计算高度，对他们进行分页。由于通过childNodes获取到的NodeList不仅包含Dom，还包含文本注释及其他内容，而list本身并不具备数组的相关方法。
List
所以想要对NodeList进行筛选，就用到了这样的一个函数：

getHtmlNode(html) {
  return [].find.call(html.childNodes, node => node.nodeType === 1);
},

也是通过继承数组的find方法，找寻到第一个我需要的Dom节点。

至于nodeType的类型，可以参考：HTML DOM nodeType 属性

节点类型描述子节点
1Element代表元素Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2Attr代表属性Text, EntityReference
3Text代表元素或属性中的文本内容。None
4CDATASection代表文档中的 CDATA 部分（不会由解析器解析的文本）。None
5EntityReference代表实体引用。Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6Entity代表实体。Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7ProcessingInstruction代表处理指令。None
8Comment代表注释。None
9Document代表整个文档（DOM 树的根节点）。Element, ProcessingInstruction, Comment, DocumentType
10DocumentType向为文档定义的实体提供接口None
11DocumentFragment代表轻量级的 Document 对象，能够容纳文档的某个部分Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12Notation代表 DTD 中声明的符号。None
【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）
JZevin的博客
08-12 761
文章目录一. 引用数据类型中的数组1.1 概述1.2 初始化1.2.1 字面量1.2.2 构造函数模式1.3 访问1.4 length属性1.5 数组遍历1.6 类数组对象1.6.1 四种典型的类数组对象1.6.2 类数组对象转化成真数组的方法二. Array对象2.1 Array静态方法Array.isArray()Array.from()Array.of()三. Array.prototype.*3.1 对象通用实例方法Array.prototype.valueOf()Array.prototype.t
理解JavaScript里的 [].forEach.call() 写法
qq_26847293的博客
03-09 5549
因为document.querySelectorAll()返回的并不是我们想当然的数组，而是NodeList，对NodeList，它里面没有.forEach方法，我们使用了这样的方法进行循环：var divs = document.querySelectorAll('div');[].forEach.call(divs, function(div) { // do whatever div.
理解[].forEach.call()
weixin_33895475的博客
01-05 229
例子： let cols = document.querySelectorAll('ul li') [].forEach.call(cols, function (col, index) { // TODO } 分析： ① []是一个空数组，无论这个数组里的最初值是什么，它们都不会被使用到； ② forEach方法是一个数组方法，只有数组才能调用；完整写法：Array.pro...
详细解析[].forEach.call($$(“*“),function(a){})
qq_45802211的博客
11-19 623
菜鸡互啄题1： [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 解释上面代码的含义： 首先，这段代码出现了[].forEach.call写法，我们先从这里入手。 先看一个例子： var h2s = document.querySelectorAll('h2'); [].forEach.call(h2s,function(
关于[].forEach.call()的理解
jijioeoiq的博客
11-22 1165
关于[].forEach.call()的理解 .forEach() 方法是数组的一种方法； <body> <div class="wrap"> <span></span> <span></span> <span></span> <span></span...
理解 JS 中的 [].forEach.call() 写法
qq_36437172的博客
10-29 802
因为 documtent.querySelectorAll() 返回的并不是我们想当然的数组，而是 NodeList，对 NodeList，它里面没有 forEach 方法，我们使用了这样的方法进行循环遍历，代码如下： var divs = document.querySelectorAll('div'); [].forEach.call(divs, function(div) { // do whatever div.style.color = "red"; }); 初次看到 [].for
array.prototype.foreach.call
03-16
array.prototype.foreach.call是JavaScript中的一个函数调用，它的作用是将一个数组对象的forEach方法应用到另一个对象上。具体来说，它会将数组对象的forEach方法作为一个函数来调用，然后将另一个对象作为它的上...
nodes.forEach(node => {报错nodes.forEach is not a function
07-01
若 `nodes` 是类数组对象（如通过 `document.querySelectorAll()` 获取的 DOM 元素集合），可以通过 `Array.prototype.forEach.call(nodes, callback)` 的方式模拟数组遍历操作，从而避免类型错误[^3]。 ```...
function getLeafNodeIds(nodes) { let ids = []; nodes.forEach(node => {报错nodes.forEach is not a function
07-01
当处理 DOM 元素集合（如 `NodeList`）时，可以使用 `Array.from()` 或 `Array.prototype.forEach.call()` 来模拟数组行为并安全地遍历： ```javascript const nodes = document.querySelectorAll('div'); Array....
js array.foreach怎么写？
最新发布
11-19
这里使用了完整的 `Array.prototype.forEach.call()` 写法来调用 `forEach` 方法，`[]` 是为了访问数组相关方法的简写，完整写法可用于一些特殊情况，比如对类数组对象使用 `forEach` 方法[^2]。
理解[].forEach.call()并说明为什么要使用[].forEach.call()
seetoyou的博客
07-13 491
[].forEach.call(elems, callback) 相当于: Array.prototype.forEach.call(elems, callback) 又相当于: function(elems, callback) { if([].forEach) { [].forEach.call(elems, callback); } else { for(var i = 0; i < elems.length; i++) { callback(elems[
[].forEach.call() 方法
99的博客
01-11 3206
初次看到[].forEach.call()这样的代码，我觉得这种写法很有趣，为什么要这样写？为什么要用空数值引申出的方法？于是研究了一下。 []就是个数组，而且是用不到的空数组。用来就是为了访问它的数组相关方法，比如.forEach。这是一种简写，完整的写法应该是这样： Array.prototype.forEach.call(...); 很显然，简写更方便。 至于forEach 方法
FOREACH语句与CALL{}子查询
马超的博客
06-14 501
FOREACH语句与CALL{}子查询FOREACH语句与CALL{}子查询一、邻接表数据样例二、使用FOREACH2.1 创建数据2.2 输出统计值三、使用CALL{} Here’s the table of contents: FOREACH语句与CALL{}子查询 需要从邻接表中生成一些数据，可以分别使用FOREACH和CALL{}子查询【Neo4j-4.x中新增的功能】实现从邻接表创建数据。 一、邻接表数据样例 邻接表是实现图算法时常用的一种数据结构。 二、使用FOREACH FOREA
[].forEach.call()的含义和用法
weixin_30257433的博客
09-28 262
前些天领导给写了一个不太熟悉的函数： var phonenum = document.querySelectorAll(".phonenum");//手机号码 [].forEach.call(phonenum, function(item, index) { 　　item.addEventListener('blur', function(event) { 　　　　phoneCheck(p...
每日一题（四一）[].forEach.call($$(*)function(a){a.style.outline=1px solid #+(~~(Math.random()*(1 24))).toS
MFWSCQ的博客
05-29 818
解释下这段代码的意思，以及用到的技术点 [].forEach.call($$('*'),function(a){ a.style.outline = "1px solid #"+(~~(Math.random()*(1<<24))).toString(16); }) 答案： 直观...
JavaScript 数组之every
weixin_54012475的博客
03-18 5066
文章目录
js中every用法_详解JavaScript中的every()方法
weixin_28951585的博客
01-17 4074
JavaScript 数组中的每个方法测试数组中的所有元素是否经过所提供的函数来实现测试。语法array.every(callback[, thisObject]);下面是参数的详细信息：callback : 函数用来测试每个元素thisObject : 对象作为该执行回调时使用返回值:返回true，如果此数组中的每个元素满足所提供的测试函数。兼容性：这种方法是一个JavaScript扩展到ECM...
什么是every()方法,以及[].every()为什么永远是true?
fury的博客
05-03 826
方法用于检测数组中的所有元素是否都符合指定条件。它会对数组中的每个元素执行指定的回调函数，直到有一个元素不符合条件或者遍历完所有元素为止。如果所有元素都符合条件，则返回。在这个例子中，由于数组中的某些元素不大于 10，所以。下面是一个示例，演示如何使用。every怎么使用?在JavaScript中，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值