立即获得第一个子元素

myt*_*lon 46 javascript dom

我正在编写Chrome内容脚本扩展程序,我需要能够定位一个特定元素,遗憾的是,除了其父元素之外,它没有唯一标识符.

我需要定位直接的第一个子元素parentElement.console.log(parentElement)完美地报告两个子元素/节点,但是后续的控制台日志(以childNodes为目标的日志)总是返回一个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);
    }   
}
Run Code Online (Sandbox Code Playgroud)

如何选择第一个子元素/节点parentElement

在此输入图像描述

更新:
parentElement.children[0]也有同样的错误parentElement.childNodes[0].

Pau*_*aul 101

这两个都将为您提供第一个子节点:

console.log(parentElement.firstChild); // or
console.log(parentElement.childNodes[0]);
Run Code Online (Sandbox Code Playgroud)

如果您需要第一个子元素作为元素节点,那么使用:

console.log(parentElement.children[0]);
Run Code Online (Sandbox Code Playgroud)

编辑

啊,我现在看到你的问题; parentElement是一个数组.

如果你知道getElementsByClassName只会返回一个结果,你似乎应该这样做,你应该使用[0]dearray(是的,我把那个词放上)元素:

var parentElement = document.getElementsByClassName("uniqueClassName")[0];
Run Code Online (Sandbox Code Playgroud)

  • 还要注意,要获得FIRST CHILD**ELEMENT NODE**,有一个只读属性`firstElementChild` .....`ParentNode.firstElementChild` (8认同)