获取第一个子元素

我正在编写一个Chrome内容脚本扩展，我需要能够定位一个特定的元素，不幸的是，除了它的父元素之外没有唯一的标识符。

我需要定位parentElement第一个子元素。 console.log(parentElement)报告子元素/节点，但是后续的控制台日志（以childNodes为目标的日志）总是返回一个undefined值，不pipe我做什么。

这是我的代码到目前为止
^{（我已经排除了实际名称，以避免混淆和额外的不必要的解释）}

 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); } } 

如何selectparentElement的第一个子元素/节点？

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

Answer 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]; 

Answer 2

childNodes [0]是不好的。 它是基数1，而不是基数0.下面的例子 – 带有2个隐藏子跨度的div。 点击灰色的div区域，看看控制台怎么说childNodes[0] – 它是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>