"document.getElementsByClassName" найдены элементы, но не могут получить доступ - PullRequest
Новая
       16

"document.getElementsByClassName" найдены элементы, но не могут получить доступ

0 голосов
/ 13 января 2020

У меня очень сложная проблема, и я не смог найти никакого решения в Inte rnet

Я использовал document.getElementsByClassName для доступа к одному HTML Element по классу, мой элемент filterRow из dxDataGrid: 

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

Моя проблема заключается в следующем: первый console.log возврат HTMLCollection с длиной = 1, а второй возврат 0 (я пытался получить длину для доступа к filterRowElement[0]).

Я пробовал console.log(filterRowElement[0]) и получил undefined тоже

Это снимок экрана: enter image description here

Я не знаю почему, я впервые столкнулся с этой проблемой

Пожалуйста, дайте мне совет. Спасибо!

СПАСИБО, Я ДУМАЮ, ЧТО МОЯ ПРОБЛЕМА DXGRID FILTERROW ELEMENT ПОСТОЯННО ИЗМЕНИТСЯ, ЧТО Я НЕ МОГУ ДОСТУПАТЬ СТАРЫМ ЭЛЕМЕНТОМ

ОБНОВЛЕНИЕ

Не знаю почему, но Использование Jquery спасет Меня (может быть, не всегда так) 

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

Результат:

enter image description here

Большое вам спасибо

1 Ответ

0 голосов
/ 13 января 2020

Обновлено: одна из причин, по которой вы можете получить 0 для второй строки и 1 для первой строки: вы распечатываете filterRowElement.length, и это правда в то время , это было 0. Когда ваш цикл событий закончен, ваша структура (React, Angular, et c) обновила страницу (либо после ваших действий, либо до ваших действий в следующем цикле событий). Теперь console.log распечатывает всю структуру, и, когда вы смотрите на нее в отладчике, теперь она равна 1.

. Чтобы решить эту проблему, я должен был сделать что-то подобное раньше: 

setTimeout(() => {  

  doSomething();

}, 0);

Итак, теперь вы ждете следующего цикла событий, чтобы ваша страница была "построена" или "обновлена".

Если это страница c, я смог получить 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>
...