Форум

Trulala · #1 (**permalink**) 25.06.2025, 19:12

Здравствуйте. Ситуация такая: на странице есть кнопка, по нажатию на которую в html добавляется несколько новых тегов span с текстом (теги появляются, я проверял). Потом делаю поиск тегов span

let elem = document.querySelectorAll(tag);

Старые теги находит, а новые нет. Что за фигня?

Trulala · #2 (**permalink**) 25.06.2025, 23:07

До нажатия

<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

рони · #3 (**permalink**) 26.06.2025, 00:48

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>

ksa · #4 (**permalink**) 26.06.2025, 15:29

Сообщение от Trulala

Старые теги находит, а новые нет. Что за фигня?

Это ты делаешь что-то не то... Или не в то время.

В противном случае все будет находиться. Вот пример.

<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>

Trulala · #5 (**permalink**) 26.06.2025, 20:38

Сообщение от ksa

Это ты делаешь что-то не то... Или не в то время.

В противном случае все будет находиться. Вот пример.

<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>

Я не могу создать const html . Сайт не мой, работаю с ним через Tampermonkey. Мне нужно не только найти элемент, но и кликнуть по нему.

Trulala · #6 (**permalink**) 26.06.2025, 21:03

Я наверное не очень хорошо объяснил. Сайт не мой, я много с ним работаю и чтобы облегчить работу использую расширение браузера tampermonkey. Расширение внедряет на страницу мой собственный скрипт. Работает скрипт так: на странице создается кнопка, по нажатию на которой раскрывается список шаблонов, требуется кликнуть на определенном элементе списка. Списка изначально на странице нет, выводится скриптом. Кнопка работает, список раскрывается. Но дальше ничего не работает, пункт не выбирается и не нажимается. Ещё недавно неделю назад всё работало, а теперь перестало работать. Я плохо разбираюсь в JavaScript, но я так понял, что скрипт не находит пункты списка, пишет undefined.
Код поиска элементов span на странице рабочий. Но он находит только элементы которые находились на странице при загрузке страницы, а вот элементы которые добавляются скриптом он не находит.

Aetae · #7 (**permalink**) 04.07.2025, 23:52

Trulala, классическая асинхронщина. На момент исполнения твоего кода элементы списка ещё не были добавлены на страницу скриптом сайта:

0мсек: нажимаешь на кнопку
0мсек: код запускает открытие списка
0мсек: код пытается поучить значение из списка - не находит
1мсек: выводится список

Тебе надо дождаться их появления. Это можно сделать используя MutationObserver или банальный setTimeout.

Форум

Справочник

Discord чат

Курсы javascript