Question

var a = document.getElementById('img0');
console.log(a);
 var x = a.find(':nth-child(' + 1 + ')');
 console.log(x);

Using just javascript I'm trying to get the first child.  The code below says that find is not a function

<div id="img0" class="det-img">
		<img src="https://www.sustainablewestonma.org/swag/public/uploads/acu2020-img1-1200X800.jpg ">
</div>

Answer 1

如果要查找第一个出现的子节点，则应使用a.querySelector('*:nth-child(1)'，例如，不要使用a.find(...)。如果您以前使用过jQuery，可能很熟悉.find()方法，但是该方法在元素上不存在。

Element.querySelector将尝试在元素的后代节点中查找提供的选择器的第一个匹配项。

请参阅下面的更新的概念验证代码：

var a = document.getElementById('img0')
var x = a.querySelector('*:nth-child(' + 1 + ')');
console.log(x);

<div id="img0" class="det-img">
  <img src="https://www.sustainablewestonma.org/swag/public/uploads/acu2020-img1-1200X800.jpg ">
</div>

Answer 2

您可以使用元素的children属性来执行此操作，而无需使用querySelector。

var a = document.getElementById('img0');
console.log(a);
 var x = a.children[0];
 console.log(x);

Using just javascript I'm trying to get the first child.  The code below says that find is not a function

<div id="img0" class="det-img">
		<img src="https://www.sustainablewestonma.org/swag/public/uploads/acu2020-img1-1200X800.jpg ">
</div>

Answer 3

我们可以为此目的使用“ firstElementChild”。根据mdn的说法，ParentNode.firstElementChild是一个只读属性，它返回对象的第一个子元素，如果没有子元素，则为null。

下面是工作代码段：

 document.getElementById("img0").firstElementChild

第n个孩子找不到功能

3 个答案: