Получить непосредственный первый дочерний элемент

Я пишу расширение содержимого HTML script, и мне нужно настроить таргетинг на определенный элемент, который, к сожалению, не имеет уникальных идентификаторов, кроме его родительского элемента.

Мне нужно настроить ближайший первый дочерний элемент parentElement. console.log(parentElement) отлично описывает оба дочерних элемента/узла, но последующие консольные журналы (те, которые нацелены на дочерниеNodes) всегда возвращают значение undefined независимо от того, что я делаю.

Это мой код до сих пор
(Я исключил фактические имена, чтобы избежать путаницы и лишнего, ненужного объяснения)

function injectCode() {

    var parentElement = document.getElementsByClassName("uniqueClassName");

    if (parentElement && parentElement.innerHTML != "") {

        console.log(parentElement);
        console.log(parentElement.firstElementChild);
        console.log(parentElement.firstChild);
        console.log(parentElement.childNodes);
        console.log(parentElement.childNodes[0]);
        console.log(parentElement.childNodes[1]);

    } else {

        setTimeout(injectCode, 250);
    }   
}

Как выбрать первый дочерний элемент / node из parentElement?

enter image description here

Update:
parentElement.children[0] также имеет ту же ошибку, что и parentElement.childNodes[0].

Ответы

Ответ 1

Оба они дадут вам первый ребенок node:

console.log(parentElement.firstChild); // or
console.log(parentElement.childNodes[0]);

Если вам нужен первый дочерний элемент, который является элементом node, то используйте:

console.log(parentElement.children[0]);

Edit

А, я вижу твою проблему сейчас; parentElement - массив.

Если вы знаете, что getElementsByClassName будет возвращать только один результат, который, как вам кажется, вы должны использовать [0] to dearray ( да, я сделал это слово) элемент:

var parentElement = document.getElementsByClassName("uniqueClassName")[0];

Ответ 2

childNodes [0] НЕТ ХОРОШЕ. Это основание 1, а не основание 0. Пример ниже - div с двумя скрытыми дочерними интервалами. Нажмите серой области div и посмотрите, что говорит консоль о childNodes[0] - it undefined.

var doc = document;
var div = doc.getElementsByTagName("div")[0];
div.addEventListener("click", function(e) {
  console.log('childNodes[0] is ' + this.childNodes[0].innerHTML + ' and childNodes[1] is ' + this.childNodes[1].innerHTML);
});
div{
  min-height:60px;
  min-width:60px;
  background: grey;
}
div:hover{
  cursor:pointer
}
span{
  display:none
}
<div>
  <span>nugget</span>
  <span>hash</span>
</div>