undefined вместо innerHTML [closed]

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

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

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

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

Метод 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>