【问题标题】:Get immediate first child element立即获取第一个子元素
【发布时间】:2012-05-15 12:34:15
【问题描述】:

我正在编写一个 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);
    }   
}

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

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

【问题讨论】:

  • 你想要第一个子节点还是第一个子元素(节点)?
  • 父 div 和子 div 之间不要有空格,但要在一行中

标签: javascript dom


【解决方案1】:

这两个都会给你第一个子节点:

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

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

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

编辑

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

如果您知道getElementsByClassName 只会返回一个结果,而您似乎确实这样做了,那么您应该使用[0] 来解除(是的,我编造了那个词)元素:

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

【讨论】:

  • 一切都返回未定义(如您在图像中看到的),当您使用 [0] 时,它会使整个脚本出错。我也试过.children[0],但也没有用。 ://
  • @BenHooper 更新了我的答案,因为您添加了屏幕截图,我注意到了实际问题。
  • 还要注意,要获得第一个孩子 ELEMENT NODE 有一个只读属性 firstElementChild ..... ParentNode.firstElementChild
  • childNodes[0] 每次都不返回任何内容。这是 childNodes[1] aka base1
  • 不,childNodes[1] 始终是第二个子节点。请注意,如果 DOM 是用 HTML 构造的,在子元素的 HTML 标记之前包含空格(换行符、制表符、空格等),则 childNodes[0] 是包含该空格的 TextNode 并且 childNodes[1] 是元素节点(但它是仍然是第二个孩子)。
猜你喜欢
  • 2015-06-24
  • 1970-01-01
  • 2011-08-03
  • 2011-07-23
  • 2021-04-26
  • 1970-01-01
  • 2013-04-29
  • 1970-01-01
  • 2022-08-17
相关资源
最近更新 更多