第n个子项找不到函数

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将尝试在元素的后代节点中查找提供的选择器的第一个匹配项。

Element.querySelector

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

Answer 2

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

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

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

Answer 3

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

下面是工作代码段：

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>