undefined вместо innerHTML [closed]

element.parentNode.parentNode.children[3].innerHTML хорошо, но не
element.parentNode.parentNode.querySelectorAll(":nth-child(3)").innerHTML (выходы undefined)

Я также пробовал разные числа в :nth-child() но без всякого прогресса.

Есть идеи, почему?

Я получаю это с Mozilla Firefox 91.0.

1 ответ
1

Метод querySelectorAll () документа возвращает статический (не активный) NodeList, представляющий список элементов документа, которые соответствуют указанной группе селекторов.

По этой причине он возвращает вам список узлов из DOM, в основном вы можете думать о массиве элементов, который соответствует всему селектору CSS, поэтому вам нужно будет выбрать один из них, а затем вызвать innerHTML в теме.

Что-то вроде этого:

el.parentNode.parentNode.querySelectorAll(":nth-child(3)")[0].innerHTML

Пример ниже демонстрирует это для вас.

var el = document.getElementById("span1")
//document.getElementById("result").innerHTML = (el.parentNode.parentNode.children[3].innerHTML);
document.getElementById("result").innerHTML = (el.parentNode.parentNode.querySelectorAll(":nth-child(3)")[0].innerHTML);
<div>
    <div>
    <span id="span1"> 1</span>
    </div>
    <div>
   <span id="span2"> 2</span>
    </div>
    <div>
    <span id="span3"> 3</span>
    </div>
     <div>
    <span id="span4"> 4</span>
    </div>

</div>

<hr/>
<div id="result">

</div>

  • 2

    Хотя это хороший ответ, этот вопрос не относится к теме сообщества Code Review, поэтому я сомневаюсь, что вы получите много голосов.

    – pacmaninbw

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *