Не находится элемент на странице
Здравствуйте. Ситуация такая: на странице есть кнопка, по нажатию на которую в html добавляется несколько новых тегов span с текстом (теги появляются, я проверял). Потом делаю поиск тегов span
let elem = document.querySelectorAll(tag); Старые теги находит, а новые нет. Что за фигня? |
До нажатия
<div class="styled__SelectStyled-sc-15n6gx6-0 HHVbn uikit-select"><div class="styled__SelectInputBox-sc-15n6gx6-1 csquon uikit-select_box"><div class="styled__SelectInputValue-sc-15n6gx6-4 htsPlN"><span class="styled__SelectInputSearch-sc-15n6gx6-2 bOjFHH"><input autocomplete="off" readonly="" placeholder="Выберите шаблон" class="styled__SelectInput-sc-15n6gx6-5 onyxk" value=""></span><span title="" class="styled__SelectInputItem-sc-15n6gx6-3 RkdSN uikit-select-inputItem"></span></div><div class="styled__ControlIconStyled-sc-r7tvgm-0 icGPJJ uikit-flatList_control-icon"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg></div></div><div tabindex="-1" role="list" class="styled__SelectList-sc-15n6gx6-6 fFVLly uikit-select_list"></div></div> После нажатия <div class="styled__SelectStyled-sc-15n6gx6-0 HHVbn uikit-select"><div class="styled__SelectInputBox-sc-15n6gx6-1 htxrpz uikit-select_box"><div class="styled__SelectInputValue-sc-15n6gx6-4 htsPlN"><span class="styled__SelectInputSearch-sc-15n6gx6-2 bOjFHH"><input autocomplete="off" readonly="" placeholder="Выберите шаблон" class="styled__SelectInput-sc-15n6gx6-5 onyxk" value=""></span><span title="" class="styled__SelectInputItem-sc-15n6gx6-3 RkdSN uikit-select-inputItem"></span></div><div class="styled__ControlIconStyled-sc-r7tvgm-0 icGPJJ uikit-flatList_control-icon"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg></div></div><div tabindex="-1" role="list" class="styled__SelectList-sc-15n6gx6-6 creHhJ uikit-select_list"><div data-label="текст какой-то" data-value="230697" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 kOyKQH select-dropdown-option" role="option"><span>текст какой-то</span></div><div data-label="Завтра могу сделать." data-value="102846" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>Завтра могу сделать.</span></div><div data-label="текст какой-то" data-value="15439" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div><div data-label="текст какой-то" data-value="76256" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div><div data-label="текст какой-то" data-value="15296" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div><div data-label="текст какой-то" data-value="230702" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div><div data-label="текст какой-то" data-value="256641" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div><div data-label="текст какой-то" data-value="106421" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div></div></div>
function findElementByTagAndText(tag, text){
console.log('tag = ' + tag);
console.log('text = ' + text);
let elem = document.querySelectorAll(tag); //собираем все элементы span в nodelist
let pattern = new RegExp(text, "i");
let elem2 = Array.from( elem ).filter( e => pattern.test(e.textContent) );
console.log('list of span array = ' + elem2.length);
return elem2[0];
}
Получаю tag = span text = текст какой-то list of span array = 0 |
Trulala,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="styled__SelectStyled-sc-15n6gx6-0 HHVbn uikit-select">
<div class="styled__SelectInputBox-sc-15n6gx6-1 htxrpz uikit-select_box">
<div class="styled__SelectInputValue-sc-15n6gx6-4 htsPlN"><span class="styled__SelectInputSearch-sc-15n6gx6-2 bOjFHH"><input autocomplete="off" readonly="" placeholder="Выберите шаблон" class="styled__SelectInput-sc-15n6gx6-5 onyxk" value=""></span><span title="" class="styled__SelectInputItem-sc-15n6gx6-3 RkdSN uikit-select-inputItem"></span></div>
<div class="styled__ControlIconStyled-sc-r7tvgm-0 icGPJJ uikit-flatList_control-icon"><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg></div>
</div>
<div tabindex="-1" role="list" class="styled__SelectList-sc-15n6gx6-6 creHhJ uikit-select_list">
<div data-label="текст какой-то" data-value="230697" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 kOyKQH select-dropdown-option" role="option"><span>текст какой-то</span></div>
<div data-label="Завтра могу сделать." data-value="102846" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>Завтра могу сделать.</span></div>
<div data-label="текст какой-то" data-value="15439" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div>
<div data-label="текст какой-то" data-value="76256" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div>
<div data-label="текст какой-то" data-value="15296" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div>
<div data-label="текст какой-то" data-value="230702" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div>
<div data-label="текст какой-то" data-value="256641" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div>
<div data-label="текст какой-то" data-value="106421" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option"><span>текст какой-то</span></div>
</div>
</div>
<script>
function findElementByTagAndText(tag, text) {
console.log('tag = ' + tag);
console.log('text = ' + text);
let elem = document.querySelectorAll(tag); //собираем все элементы span в nodelist
let pattern = new RegExp(text, "i");
let elem2 = Array.from(elem).filter(e => pattern.test(e.textContent));
console.log('list of span array = ' + elem2.length);
return elem2[0];
}
let tag = 'span'
let text = 'текст какой-то'
findElementByTagAndText(tag, text);
/* tag = span
text = текст какой-то
list of span array = 7*/
</script>
</body>
</html>
|
Цитата:
В противном случае все будет находиться. Вот пример.
<button id='test'>Тест</button>
<button id='add'>Добавить элементы</button>
<div class="styled__SelectStyled-sc-15n6gx6-0 HHVbn uikit-select">
<div class="styled__SelectInputBox-sc-15n6gx6-1 csquon uikit-select_box">
<div class="styled__SelectInputValue-sc-15n6gx6-4 htsPlN">
<span class="styled__SelectInputSearch-sc-15n6gx6-2 bOjFHH">
<input autocomplete="off" readonly="" placeholder="Выберите шаблон" class="styled__SelectInput-sc-15n6gx6-5 onyxk" value="">
</span>
<span title="" class="styled__SelectInputItem-sc-15n6gx6-3 RkdSN uikit-select-inputItem"></span>
</div>
<div class="styled__ControlIconStyled-sc-r7tvgm-0 icGPJJ uikit-flatList_control-icon">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
</div>
<div tabindex="-1" role="list" class="styled__SelectList-sc-15n6gx6-6 fFVLly uikit-select_list"></div>
</div>
<script>
const html = `
<div data-label="текст какой-то" data-value="230697" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 kOyKQH select-dropdown-option" role="option">
<span>текст какой-то</span>
</div>
<div data-label="Завтра могу сделать." data-value="102846" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
<span>Завтра могу сделать.</span>
</div>
<div data-label="текст какой-то" data-value="15439" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
<span>текст какой-то</span>
</div>
<div data-label="текст какой-то" data-value="76256" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
<span>текст какой-то</span>
</div>
<div data-label="текст какой-то" data-value="15296" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
<span>текст какой-то</span>
</div>
<div data-label="текст какой-то" data-value="230702" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
<span>текст какой-то</span>
</div>
<div data-label="текст какой-то" data-value="256641" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
<span>текст какой-то</span>
</div>
<div data-label="текст какой-то" data-value="106421" data-disabled="false" class="styled__SelectListItem-sc-15n6gx6-7 gAohFE select-dropdown-option" role="option">
<span>текст какой-то</span>
</div>
`
const ot = document.querySelector('.styled__SelectList-sc-15n6gx6-6.fFVLly.uikit-select_list')
add.addEventListener('click', _ => {
ot.innerHTML = html
})
test.addEventListener('click', _ => {
const v = document.querySelectorAll('span').length
alert(`Элементов ${v}шт.`)
})
</script>
|
Цитата:
|
Я наверное не очень хорошо объяснил. Сайт не мой, я много с ним работаю и чтобы облегчить работу использую расширение браузера tampermonkey. Расширение внедряет на страницу мой собственный скрипт. Работает скрипт так: на странице создается кнопка, по нажатию на которой раскрывается список шаблонов, требуется кликнуть на определенном элементе списка. Списка изначально на странице нет, выводится скриптом. Кнопка работает, список раскрывается. Но дальше ничего не работает, пункт не выбирается и не нажимается. Ещё недавно неделю назад всё работало, а теперь перестало работать. Я плохо разбираюсь в JavaScript, но я так понял, что скрипт не находит пункты списка, пишет undefined.
Код поиска элементов span на странице рабочий. Но он находит только элементы которые находились на странице при загрузке страницы, а вот элементы которые добавляются скриптом он не находит. |
Trulala, классическая асинхронщина. На момент исполнения твоего кода элементы списка ещё не были добавлены на страницу скриптом сайта:
0мсек: нажимаешь на кнопку 0мсек: код запускает открытие списка 0мсек: код пытается поучить значение из списка - не находит 1мсек: выводится список Тебе надо дождаться их появления. Это можно сделать используя MutationObserver или банальный setTimeout. |
| Часовой пояс GMT +3, время: 12:23. |