【常见错误】通过document.getElementsByClassName()获取的dom元素添加监听事件时报错：addEventListener is not a function

最新推荐文章于 2024-06-20 14:42:51 发布
最新推荐文章于 2024-06-20 14:42:51 发布
阅读量3.4w 收藏 10
点赞数 9
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jzsn_Paul/article/details/80864739
版权

今天写了一个表达验证的网页，在给一个输入框添加监听事件的时候，控制台一直报错，报错原因显示

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

通过查资料得知：

这是因为选择器没有正确选择元素对象
document.getElementsByClassName(...)捕捉到的是该类名元素的数组
正确的访问方式应该是：

document.getElementsByClassName(...)[0].addEventListener...


前端蛋卷
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
"getElementsByClassName is not a function" 报错原因
bangpu6497的博客
07-15 4544
element.getElementsByClassName("")： 返回的含有该类的子元素数组，除了子元素以外的后代元素是获取不到的。要遍历使用，或者.element.getElementsByClassName("")[0]; 这样的方式获取元素。 document.getElementsByClassName： 这个才会返回含有该类的后代元素。 见MDN对el...
JavaScript DOM 添加事件
01-19
因为对于支持DOM的浏览器来说，添加事件是用addEventListener()方法来给对象添加事件！ 而对于MSIE来说则是用attachEvent()来给对象添加事件！这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式！这样我们就可以直接调用addEvent()方法来给对象添加事件了！ 这不是更方便？！呵呵…… 让我们来看看吧！ /** * 注册一个监听事件到元素 * @param {Object} node 所要添加事件的对象 * @param {Object} type 事件类型 * @param {Object} listener 事件方法 */ function a
addEventListener is not a function , JavaScript添加监听事件时报错
weixin_65793170的博客
03-21 5191
在写js代码的时候，控制台有时候会遇到这样的报错，addEventListener is not a function，说addEventListener不是一个函数，具体原因是因为侦听事件的事件源不对，事件源应该是一个元素，而非其它
【Web APIs】DOM 文档对象模型 ③ ( 根据类名获取 DOM 元素 - getElementsByClassName 函数 | 代码示例 )
最新发布
qq_44624290的博客
06-20 607
然后通过调用上述 Element 元素的 getElementsByClassName 函数 , 获取元素下的 class 类名为 box 的元素;先通过调用 Document.getElementById 函数 , 获取 元素 id 为 nav 的 DOM 元素;3、代码示例 - 获取 Element 元素下指定类名的 DOM 元素。获取 Element 元素下的所有 指定类名的 DOM 元素 ,2、代码示例 - 获取 文档中 指定类名的 DOM 元素。文档中所有指定类名的 DOM 元素 ,
常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
weixin_44220680的博客
11-29 3630
在进行原生的前端开发的时候遇到的问题:Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function...... 原因: 选择器没有正确选择元素对象 document.getElementsByClassName(…)捕捉到的是该类名元素的数组 解决方法 docum...
react实现滚动分页、前端分页、后端分页
Hzq88888的博客
12-16 3371
一、html结构 <div className="topSearch"> <Input placeholder="患者姓名、病历号" value={textValue} allowClear style={{ width: 312 }} onChange={e => this.setState({ textValue: e.target.value,nums: 1,showData: JSON.parse(JSON.stringify([]
addEventListener is not a function报错
judykang123的博客
07-27 1万+
1、不是id，获取不到唯一一个 给想要监听的那个元素加一个id就可以了 2、js和jq连用 addEventListener是js的写法，如果你在前面写$("#id")的话当然获取不到 可以写成 $("#id")[0] 或者document.getElementById(“id”) ...
js DOM的事件常见操作实例详解
10-15
事件委托是另一种常见的优化策略，通过在父元素上监听事件，利用事件冒泡机制处理子元素的事件。 总之，JavaScript DOM事件是实现网页动态效果和用户交互的关键。理解事件源、事件和事件处理程序的关系，以及如何...
JS判断指定dom元素是否在屏幕内的方法实例
11-28
标题中的“JS判断指定DOM元素是否在屏幕内的方法实例”是指一种JavaScript技术，用于检测DOM元素是否在用户当前查看的浏览器窗口（也称视口）内。这种技术常用于实现滚动交互效果，例如，当元素进入视口时触发动画或...
js-dom-manipulation:通过JS访问和操作DOM
03-28
2. **创建和插入元素**：使用`document.createElement()`可以创建新的DOM元素，然后通过`.appendChild()`, `.insertBefore()`, 或 `.replaceChild()`方法将其添加到已有的元素中。例如，如果要动态创建一个新的段落...
jQuery过期：如何使用普通javascript进行查询，样式，dom，ajax，事件等示例，例如jQuery
02-04
以下将详细讨论如何用普通JavaScript实现jQuery的功能，包括查询元素、操作样式、DOM操作、Ajax请求以及处理事件。 1. **查询元素**： - jQuery中的`$(selector)`可以使用JavaScript的`document.querySelector`或`...
DOM-em-[removed]创建用于通过Java训练DOM中元素，类和样式的操作的脚本
05-26
可以使用`addEventListener`来添加事件监听器，`removeEventListener`来移除监听器。 ```javascript element.addEventListener('click', function() { // 当元素被点击时，执行的代码 }); ``` ### 五、DOM遍历 ...
js中getElementsByClassName和getElementsByTagName无法获取元素
Jclam的博客
03-07 1857
js中getElementsByClassName和getElementsByTagName无法获取元素
如何使用getElementsByClassName方法结合事件监听器，在HTML中实现对点击选中区域赋予新类名的功能。
emmmaha的博客
05-22 741
方法结合事件监听器，在HTML中实现对点击选中区域赋予新类名的功能。的元素，在每个元素上添加点击事件监听器。当点击某个元素时，会移除所有box元素的。通过这种方法，您可以实现对点击选中的区域添加新类名的效果。在上面的示例中，我们首先定义了样式，当一个元素具有。类名时，文字颜色为红色。类名，然后为被点击的元素添加。类名，从而改变其样式。获取所有class为。
dom中监听事件问题（addEventListener）
lgp199881的博客
02-06 978
事件监听的问题
解决ie document.getElementsByClassName失效方法
qq_36736475的博客
11-05 1203
if(!document.getElementsByClassName){ document.getElementsByClassName=function(cls){ var ret=[]; var els=document.getElementsByTagName("*"); for(var i=0;i<els.length;i++){ if(els[i].className==
js报错：TypeError: document.GetElementById is not a function
热门推荐
Coperator
06-18 4万+
今天在页面间串值的时候遇到领导
uniapp真机 document.getElementById报错
qq_26762529的博客
08-11 8148
uniapp真机 document.getElementById报错
getElementsByClassName获取的对象上不能添加动作监听？
lenny_wants的博客
04-22 295
通过var scene = document.getElementsByClassName(“scene”);获取的scene对象上不能添加动作监听？ 因为返回的是NodeList数组，而不是一个个体，通过： var scene = document.getElementsByClassName("scene")[0]; scene.addEventListener("mousemove", function (event) { //保证兼容性 event = event || window.event
``` document.getElementsByClassName ```如何遍历 document.getElementsByClassName 获取的元素
04-18
`document.getElementsByClassName` 是 JavaScript 中的一个方法，用于通过类名获取文档中的元素。它返回一个类数组对象，包含了所有具有指定类名的元素。 要遍历 `document.getElementsByClassName` 获取的元素，可以使用循环来逐个处理每个元素。以下是一个示例代码： ```javascript var elements = document.getElementsByClassName("className"); for (var i = 0; i < elements.length; i++) { // 对每个元素进行处理 console.log(elements[i].textContent); } ``` 在上面的代码中，我们首先使用 `document.getElementsByClassName` 获取具有指定类名的元素，并将它们存储在 `elements` 变量中。然后，我们使用 `for` 循环遍历 `elements` 数组，并对每个元素进行处理。在这个示例中，我们简单地将每个元素的文本内容打印到控制台上。 希望这个回答能够帮到你！如果你还有其他问题，请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值