如何获取 Javascript 中第一个子元素的值？

Question

我试图从我的 HTML 中获取第一个子元素的值，以便在我单击图像（即我的“服务单元”容器）时显示，但它一直说该值未定义。

    <div class="services-cell">
        <img class="services-cell_img" src="gallery/img-1.jpg" alt="">
        <div class="services-cell_text">Digital Marketing</div>
    </div>

这是我的 Javascript

let galleryImages = document.querySelectorAll('.services-cell')


if(galleryImages) {
galleryImages.forEach(function(image){
    image.onclick = function() {
        console.log(galleryImages.firstElementChild.value)
    }
})
}

我尝试将 img class 也添加为变量，但它也显示未定义。 我希望 console.log 打印

 <img class="services-cell_img" src="gallery/img-1.jpg" alt="">

我有多个具有相同 html 的图像，除了它只是说 img-2、img-3 等。所以理想情况下，每当我点击其他图像时，它都会打印相同的 HTML 值，但只会说出我点击的图像编号

Answer 1

您将数组创建为galleryImages ，但随后不是访问div的firstElementChild ，而是尝试访问数组上的该属性。 您需要改为执行image.firstElementChild 。 另外，据我所知，访问图像的.value没有任何意义，我认为你的意思是只做firstElementChild ：

 let galleryImages = document.querySelectorAll('.services-cell'); if (galleryImages) { galleryImages.forEach(function (image) { image.onclick = function() { console.log(image.firstElementChild); }; }); }

 <div class="services-cell"> <img class="services-cell_img" src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/deciduous-tree.png" alt=""> <div class="services-cell_text">Digital Marketing</div> </div> <div class="services-cell"> <img class="services-cell_img" src="https://cdn-cloudfront.cfauthx.com/binaries/content/gallery/gg-en-us/icons/gg-tree-icon.png" alt=""> <div class="services-cell_text">Digital Marketing</div> </div>

Answer 2

你可以做的是传递事件属性作为 onclick function 的参数。 事件属性有一个目标； 这是触发事件的项目。 例如：

if(galleryImages) {
galleryImages.forEach(function(image){
    image.onclick = function(e) {
        console.log(e.target.firstElementChild.value)
    }
})
}

然而，与其为每个元素添加一个事件监听器，不如在父元素上添加一个事件处理程序 - 并检查单击了哪个项目。 例如

<div class="parent">
    <div class="services-cell">
        <img class="services-cell_img" src="gallery/img-1.jpg" alt="" />
        <div class="services-cell_text">Digital Marketing</div>
    </div>
    <div class="services-cell">
        <img class="services-cell_img" src="gallery/img-2.jpg" alt="" />
        <div class="services-cell_text">Digital Marketing</div>
    </div>
</div>

和 javascript：

 document.querySelector('.parent').addEventListener('click', function(e){
    if(e.target.matches('.services-cell'){
        // Do  something with the e.target - which is the .services.cell
    }
}