DOM提供的原生获取元素方法 无法使用forEach方法

最新推荐文章于 2023-04-19 21:05:41 发布
最新推荐文章于 2023-04-19 21:05:41 发布
阅读量664 收藏 4
点赞数 1
分类专栏： html标签类 文章标签： 前端 服务器 vscode js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lei2021_type/article/details/125413324
版权
本文探讨了DOM操作中原始的getElementsClassName和getElementsByTagName等方法与H5新引入的querySelector和querySelectorAll的区别。原生DOM方法获取的元素集合是伪数组，不支持数组方法如forEach。而通过H5新方法获取的元素可以直接使用数组方法。转换或直接使用H5方法能更高效地处理元素集合。
摘要由CSDN通过智能技术生成

在获取元素中分为原生方法和h5新方法:

  1. dom原生方法:getElementsClassName、getElementsByTagName等
  2. h5提供新方法:querySelector、querySelectorAll等

dom原生获取到的数组元素 无法使用数组方法 forEach、map等 这是因为,dom原生获得的是伪数组

 

打印展示的红框中可以看出 他是一个对象 内部方法中就没有 forEach等 数组方法

但 当你使用数组方法 将他转换成真正的数组后。就可以使用forEach等方法了.

或者 可以直接使用h5新增方法获取元素 得到的将是数组形式 可以直接使用forEach等方法

 

 

虚心的小白菜
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
DOM获取/修改节点笔记
A081127的博客
03-03 944
获取 DOM 节点 获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法： element.getElementById element.getElementByName element.getElementsByTagName element.getElementsByClassName element.querySelector element.querySelectorAll ...
为什么getElementsBayTagName获取的dom元素不能遍历而且foreach报错
weixin_39897287的博客
07-28 707
dom元素遍历报错
vue中 dom元素的数组无法执行for循环或者forEach、map循环
hzxOnlineOk的博客
01-23 3883
vue中 dom元素的数组无法执行for循环或者forEach、map循环，什么样的dom元素数组？ 如下：ulDom <ul class="ulDom">       <li>a</li>       <li>b</li>       <li>c</li> </ul
解决querySelectorAll获取的元素集合不能在forEach函数中使用函数
ssigin的博客
04-19 470
NodeList 对象是节点的集合，通常是由属性，如Node.childNodes 和 方法，如document.querySelectorAll 返回的。你可以用 Array.prototype.forEach()你还可以使用 Array.from()不过，有些浏览器较为过时，没有实现。不是一个数组，但是可以使用。，是一个类似数组的对象 (
为什么不能用for或foreach遍历list删除元素？
做好自己
08-22 1279
1、用for或foreach遍历list删除元素，为什么会抛出ConcurrentModificationException异常，一定会抛出ConcurrentModificationException异常吗？ 1）为什么会抛出ConcurrentModificationException异常 2）一定会抛出ConcurrentModificationException异常吗 使用for或foreach方式遍历list删除元素时，当且仅当删除list的倒数第二个元素时不会报ConcurrentModific
关于forEach遍历DOM
dutong0321 -- 追寻计算机中的神灵
04-17 1756
好久都木有写博客了，前面一堆坑在等着填，自己也有项目需要等着去完成，然而依旧每天都在浪，对自己表示无语。 这次记录的是在JS中forEach遍历DOM节点遇到的问题。 先写一个简单的网页; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title...
原生js实现trigger方法示例代码
10-16
例如，当调用trigger方法时，如果使用了querySelectorAll()，那么无法直接调用trigger方法，因为querySelectorAll()返回的是NodeList实例，而不是Element实例。 以下是一段具体的示例代码，该代码展示了如何在原生...
JavaScript获取页面上被选中文字的方法技巧
11-30
JavaScript 提供了一种便捷的方式来实现这一需求，主要通过 `window.getSelection()` API。这个API允许开发者访问和操作用户当前在网页上选择的文本。 首先，`window.getSelection()` 方法返回一个 `Selection` ...
原生JS取代一些JQuery方法的简单实现
10-21
原生JavaScript也可以像jQuery那样，通过DOM结构直接获取元素的上一个或者下一个兄弟元素。 ```javascript // 原生JavaScript获取上一个/下一个元素 document.querySelector('.el').previousElementSibling; // ...
foreach.js低版本IE数组和HTMLCollection元素集合不兼容forEach循环遍历的处理方法
12-11
原生JavaScript通过name获取dom元素得到的是 HTMLCollection元素集合 要想循环遍历可以用forEach，但是在低于ie9的版本下不兼容 var list= document.getElementsByName("name"); for (var i = 0; i ; i++) { ...
JavaScript遍历DOM元素的常见方式示例
12-12
`querySelectorAll`方法允许我们根据CSS选择器获取元素集合，然后通过迭代器遍历这些元素。这种方式非常适合处理复杂的筛选需求。 ```javascript var elements = document.querySelectorAll('#list *'); for (var i...
forEach循环dom元素
weixin_30294295的博客
03-21 270
//让ie8支持foreach if (typeof Array.prototype.forEach != 'function') { Array.prototype.forEach = function(callback){ for (var i = 0; i < this.lengt...
JavaScript 然后遍历dom时报错 forEach is not a function
不积跬步，无以至千里；不积小流，无以成江海。
12-05 898
2. 解决办法： 加上一行代码 list = Array.from(list); Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 将类数组对象转换为真正数组
Vue2兼容低版本浏览器
txl910514的专栏
02-28 3234
注意：因为 @vitejs/plugin-legacy 只在 build 模式下生效，这也意味着 dev 模式下不经过 @vitejs/plugin-legacy 处理，所以 dev 模式下无法在低版本浏览器上运行。温馨提示：现在 Vue2 也可以使用组合式 api 了，具体参考：https://www.npmjs.com/package/@vue/composition-api。注意：必须使用新的 @vitejs/plugin-vue2 插件，否则 将无法正常使用！
vue项目安装项目出现* core-js相关的报错
NarcissuLyh的博客
02-11 5108
在网上找了一个vue gantt的项目https://github.com/jeremyjone/jz-gantt.gitclone到centos上之后发现起不来 各种报错 最后发现执行npm installcore-js@3.8.1就可以了 47 verbose exit [ 1, true ] 46 error Could not install from "core-js/modules/es.array.concat.js" as it does not contain a packa...
vite兼容chrome48的方法
大赚万万亿
02-03 1374
chrome48不支持async await语法，但有些桌面客户端的内嵌浏览器就是chrome48,如下操作即可兼容当前环境：2023-2-3使用npm create vite@latest创建。
循环遍历HTML DOM对象
天空源的博客
03-25 1752
//Call code var htmlStr = '<style type="text/css"> .rdp_banner_wrapper { border: 1px solid #CECFCE; padding: 12px; margin:4px 0px; } .rdp_main_text_wrapper { margin-bottom: 10px; } .rdp_main_te...
利用forEach循环Dom元素…
weixin_30352645的博客
10-09 416
大家都知道forEach是循环数组用的，而且很方便，可以丢掉for循环了，但是它不能循环Dom元素。其实我们可以利用call来完成forEach循环Dom; 假设有这样的HTML结构： <ul class="box"> <li>1</li> <li>2</li> <li>3</li> &lt...
TreeSet中获取元素的方法
最新发布
06-10
4. 使用TreeSet的lower()、higher()、floor()和ceiling()方法获取集合中小于、大于、小于等于、大于等于指定元素的元素。 5. 使用TreeSet的headSet()、tailSet()和subSet()方法获取集合中指定范围的元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值