获取特定类型的第一个子节点-JavaScript

69

是否有可能获得子dom元素，该元素将是特定类型的第一个子元素。

例如，在这两个示例中，我都想要获取img元素：

<a id="mylink" href="#"><img src="myimage.jpg" /></a>

与

<a id="mylink" href="#"><span></span><img src="myimage.jpg" /></a>

javascript dom

— 费利克斯·克林
source

没有答案指出由于重复的ID，您的代码无效。

— 罗伯W

3

@RobW-我几乎发表了相同的评论，但我认为这只是出于演示目的。它实际上是相同的，除了span。

— Jared Farrish

@JaredFarrish无论是否用于演示，ID都必须唯一。更换class用class可以解决这个问题。答案也将有所不同：（.getElementsByClassName('mylink')[0]或其他索引）和.querySelector('.mylink')。使用ID时，最靠前的答案是不正确的，因为如果第一个元素为<a id=mylink></a>，则不会<img>选择任何元素。

— 罗伯W

呵呵-是的，这是为了证明我要获取图像类型的第一个孩子-并且它实际上并不意味着第一个孩子:)

8

@RobW-OP并不希望两个元素都存在于同一页面上，但是两种形式都可以。vs.在它们之间插入一个，这就是我认为OP想要的。

— Jared Farrish

127

尝试这个

var firstIMG = document.getElementById('mylink').getElementsByTagName('img')[0];

— 瑜伽士
source

3

警告：getElementsByTagName获取任何匹配的后代，而不仅仅是直接子代。如果您确实想生孩子，那么这种方法可能在<a id="mylink" href="#"> <span> <img src =“ not_child.jpg” /> </ span> <img src =“ first_direct_child.jpg” /> </a>，因为您将获得“ not_child.jpg”后代图片。

— Ciabaros

35

您也可以使用querySelector：

var firstImg = document.querySelector("#mylink > img:first-of-type");

— 泽塔
source

4

:first-child必须替换为:first-of-type。

— 罗伯W

3

var anchor = document.getElementById('mylink');
var images = anchor.getElementsByTagName('img');
var image = images.length ? images[0] : null;

— 迈克尔·罗宾逊
source

0

这是一个javascript函数

function getFirst(con,tag)
{
    return con.getElementsByTagName(tag)[0];
}


//html markup
<a id="mylink" href="#"><img src="myimage.jpg" /></a>
<a id="mylink1" href="#"><img src="myimage.jpg" /></a>

//test
var con=document.getElementById('mylink');
var first=getFirst(con,'img');

— 太空人12
source