"document.getElementsByClassName" 找到元素但无法访问

Question

我有一个非常棘手的问题，我在互联网上找不到任何解决方案

我用 document.getElementsByClassName 访问了一个 HTML Element by It's class, 我的元素是 filterRow of dxDataGrid:

 var filterRowElement = document.getElementsByClassName("dx-datagrid-filter-row");
                console.log(filterRowElement);
                console.log(filterRowElement.length);

我的问题是：第一个 console.log return HTMLCollection 长度 = 1 但第二个 return 0（我试图获取长度以访问 filterRowElement[0]).

我试过 console.log(filterRowElement[0]) 也得到了 undefined

这是屏幕截图：

不知道为什么，第一次遇到这个问题

请多多指教。谢谢！

谢谢，我认为我的问题是 DXGRID FILTERROW ELEMENT 连续更改，所以我无法访问旧元素

更新

我不知道为什么，但使用 Jquery 拯救我（可能并不总是如此）

setTimeout(function () {
                    var getfilterRowElement = $(".dx-datagrid-filter-row");
                    console.log(getfilterRowElement[0]);
                }, 3000);

结果：

非常感谢

Answer 1

更新：第二行可能有 0 而第一行有 1 的一个原因是： 你打印出 filterRowElement.length，而且当时确实是0。当您的事件周期结束时，您的框架（React、Angular 等）会更新页面（在您的操作之后或在下一个事件周期中的操作之前）。现在 console.log 打印出整个结构，当您在调试器中查看它时，现在它是 1.

为了解决这个问题，我之前不得不这样做：

setTimeout(() => {  

  doSomething();

}, 0);

所以现在您正在等待下一个事件周期，以便您的页面是 "constructed" 或 "updated"。

如果它是一个静态页面，我在这两种情况下都能得到 1 并且能够访问它：

你是说

console.log(filterRowElement);

给了你一个 length 为 1 的对象，然后

console.log(filterRowElement.length);

给了你 0?

以下作品：

arr = document.getElementsByClassName("foo-bar");

console.log(arr);
console.log(arr.length);
arr[0].innerHTML = "hello world";

arr[0].style.background = "orange";
arr[0].style.display = "inline-block";
arr[0].style.padding = "1.2em";
arr[0].style.borderRadius = "6px";

<div class="foo-bar"></div>

getElementsByClassName 已上线...您的页面是否同时更改？请尝试 document.querySelectorAll(".foo-bar")：

arr = document.querySelectorAll(".foo-bar");

console.log(arr);
console.log(arr.length);
arr[0].innerHTML = "hello world";

arr[0].style.background = "orange";
arr[0].style.display = "inline-block";
arr[0].style.padding = "1.2em";
arr[0].style.borderRadius = "6px";

<div class="foo-bar"></div>

"document.getElementsByClassName" 找到元素但无法访问

"document.getElementsByClassName" found elements but can not access

javascript

jquery

getelementsbyclassname