无法访问 HTMLCollection 的值

2024-02-23

测试.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script>
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
    // for(var i=0, max=eles.length)
    </script>
</head>
<body>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
</body>

我检查了 else 代表 HTMLCollection。

Here https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection说 HTMLCollection 还通过名称和索引直接将其成员公开为属性。

所以我尝试通过console.log(eles.length)和console.log(eles[0])进行调试。 但不幸的是控制台显示 0 和未定义。(使用 Google Chrome Tool Developer)

我如何访问 eles 的结果? 我想更改样式并向 ClassName 获取的标签添加属性。 另外,我只能使用自然的 Javascript。


问题是您已将脚本放在标头中,该脚本在加载 html 元素之前执行,因此getElementsByClassName()不会返回任何元素。

一种解决方案是等待 html 元素加载然后执行脚本,为此您可以使用窗口对象加载事件

window.addEventListener('load', function () {
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
})

或者您可以将脚本放在底部body元素而不是 inhead这样当脚本被解析并执行时,元素就被加载到 dom 中

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法访问 HTMLCollection 的值 的相关文章

  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 如何延迟加载嵌入在 iframe 上的 YouTube 视频?

    如何将延迟加载应用于iframe嵌入视频 我尝试添加loading eager loading auto and loading lazyload 您可以使用srcdoc你里面的属性iframe标签来加载图像 请参阅以下示例作为参考
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • 将数组排序为第一个最小值、第一个最大值、第二个最小值、第二个最大值等

    编写一个JS程序 返回一个数组 其中第一个元素是第一个最小值 第二个元素是第一个最大值 依此类推 该程序包含一个函数 该函数接受一个参数 一个数组 该函数根据要求返回数组 输入示例 array 2 4 7 1 3 8 9 预期输出 1 9
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 如何在打字稿文件中导入没有定义文件的js库

    随着我们的项目变得越来越大 我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理 然而 我们使用许多库作为 amd 模块 我们不想将其转换为 TypeScript 我们仍然想将它们导入 TypeScript 文件
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 从 Arrays.asList 返回的列表是否保持与原始数组集合相同的顺序?

    我有一个 ArrayList 我对其进行了多次迭代 并且看起来它没有保持迭代的顺序 我更深入地研究 似乎为这次迭代编写的自定义迭代器标记 由其他人 首先获取传入的 ArrayList 并在迭代之前使用 Arrays asList 将其桥接到
  • 如何从内存字节创建“假”dart:io 文件?

    我有一个 blob 的内存字节 但我想要处理这个 blob 的 API 只接受 dart io File 对象 有没有办法创建一个 假 dart io File 简单地包装我的内存字节 以便我可以将这个 假 文件传递给我的API 假设文件系
  • 在 C++ 程序上使用 mpicc 链接失败

    我正在运行 Ubuntu 11 04 64 位 我已经安装了 OpenMPI 我正在尝试构建以下代码 这是 Gropp Lusk Skjellum 所著的 Using MPI 一书中测试问题的片段 include
  • 在java中如何拥有具有唯一键的HashMap?

    在 Java 中如何获得具有唯一键的 HashMap 或者甚至在 HashMap 中拥有唯一的键是否有意义 或者默认情况下键是唯一的 我是新手 谢谢 哈希映射键是唯一的 添加重复的密钥 然后它将被覆盖 HashMap hm new Hash
  • PE文件中的MZ签名有什么用?

    我正在开发一个程序 它将解析 PE 对象以获取各种信息 但阅读规范后 我无法找出为什么存在 MZ 字节 因为我无法在这 2 个字节应该代表的机器类型列表中找到它 谁能澄清一下吗 MZ 签名是 MS DOS 可重定位 16 位 EXE 格式使
  • 即时搜索算法

    哪种类型的算法对于搜索正在搜索的内容最快 我意识到这已经很接近于问谷歌即时搜索是如何工作的了 但我不是算法专家 而且我对它们越来越感兴趣 像这样的搜索是使用后缀树或类似的东西完成的吗 我想我只是对查询小字符串感兴趣 而不是像谷歌那样查询大量
  • 将 HttpClient 与 SOAP 结合使用

    我一直在尝试使用 Net Framework 4 7 中的 HTTPClient 对象来创建简单的 SOAP 请求 我已经使用了 Postman 中的参数 它工作得很好 这是我的代码 string url http webservices
  • 在 Java 中获取“外部”IP 地址

    我不太确定如何获取机器的外部 IP 地址 因为网络外部的计算机会看到它 我的以下 IPAddress 类仅获取计算机的本地 IP 地址 public class IPAddress private InetAddress thisIp pr
  • ASP.NET 健康监控 404 事件

    HealthMonitoring 是否有捕获 404 错误的内置事件 我已尝试设置所有事件 通过使用 webBaseEvent 并且搜索了两天 但我无法找到或触发未找到文件的事件 我可以创建自己的活动 但希望有一个内置的活动 不 事实并非如
  • window.onload 似乎在 DOM 加载之前触发(JavaScript)

    我遇到了问题window onload and document onload事件 我读到的所有内容都告诉我 在 DOM 完全加载所有资源之前 这些不会触发 这似乎不会发生在我身上 我在 Chrome 4 1 249 1036 41514
  • Twitter 引导下拉菜单在点击时禁用了按钮的原始功能

    所以我刚刚开始使用引导程序的下拉菜单 这很方便 但我有一个问题 为了让下拉菜单发挥作用 似乎在添加 html 属性时完全禁用了触发下拉的元素 dropdown toggle 的原始功能data toggle dropdown 这是有道理的
  • 如何找到未记录的 .NET / COM 库函数?

    如何找出从某些 NET 函数返回的 COM 对象的属性和方法 而这些函数似乎没有记录 在我正在查看的特定示例中 我使用以下函数将图片插入 Excel 中 Set NewPic ActiveSheet Pictures Insert File
  • 无法确定主机“github.com(192.30.252.128)”的真实性

    我正在尝试使用 sudo npm install 为用 Node js 编写的应用程序安装所有依赖项 我的操作系统是 Ubuntu 13 04 但是 我不断收到此警告 The authenticity of host github com
  • 为什么将演示文稿保存到类似文件的对象会产生空白演示文稿?

    作为回应这个答案 https stackoverflow com a 46980767 1868136对于我之前的问题 我编写了以下简短的程序来尝试重现该问题 from pptx import Presentation from io im
  • 即使调用“SetWindowPos()”后,“SetWindowLong()”函数也不会更改窗口样式

    我使用以下代码创建静态控件 hWnd CreateWindowExW 0 L STATIC Content c str SS LEFT WS VISIBLE WS CHILD SS SUNKEN 200 120 120 40 hWndPar
  • 如何使用 PyUSB 写入控制端点

    我有一个 USB 设备 其代码如下 import usb core import usb util device usb core find idVendor 0xC251 idProduct 0x2201 print device pro
  • 作为类中的成员“变量”起作用

    我正在考虑如何使用一些先进的技术来改进我的简单计算器 我想问 是否有某种方法可以创建一个具有可以为每个实例定义的函数的类 class Function public Function function Function private fu
  • Android 设备的后退和主页按钮按下事件 (cocos2d-x 3)

    我这样做是为了抓住Home and BackAndroid 设备上的按钮按下事件 被覆盖void Layer onKeyReleased EventKeyboard KeyCode keyCode Event event 像这样的函数 vo
  • 线程优先级和线程精度

    线程优先级会提高准确性吗Thread sleep 50 我们知道 当您调用 sleep 50 毫秒时 线程并不准确 但是它是否会提高准确性呢 如果线程被列为MAX PRIORITY 将感谢任何形式的解释 睡眠的准确性取决于操作系统 如果您想
  • 无法访问 HTMLCollection 的值

    测试 html