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

我试图从我的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>

我也尝试将img类添加为变量，但它也表示未定义

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

---

我有多个图像具有相同的html，除了它只是说img-2、img-3等。因此，理想情况下，每当我单击其他图像时，它都会打印相同的html值，但只会说我单击的图像编号。您创建的数组是

galleryImages

，而不是访问

div

，您正在尝试访问数组上的该属性。您需要执行

image.firstElementChild

操作。此外，据我所知，访问图像的

.value

没有任何意义，我想您的意思是只执行

firstElementChild

：

let gallerymages=document.queryselectoral（“.services单元格”）；
如果（galleryImages）{
galleryImages.forEach（函数（图像）{
image.onclick=function（）{
console.log（image.firstElementChild）；
};
});
}

数字营销
数字营销

实现这一点的方法是将事件属性作为onclick函数的参数传递。 event属性有一个target；它是触发事件的项。例如：

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

但是，与其向每个元素添加eventListener，不如在父元素上添加一个事件处理程序，并检查单击了哪个项目。 例如

---

galleryImages

是一个类似数组的对象。你只是在它上面循环。那么，每当我单击该容器时，我将如何进入它？为了澄清，让我们假设你在页面上有5个图像。如果你单击第3个，应该记录什么？如果单击第5个，应该记录什么？只针对图像不是更简单吗

'服务单元格img'

，则onclick将是单击的图像，然后使用console.log（此）或者traverseah好的，现在显示值了，谢谢！我正在创建一个图像库，所以当我通过Javascript选择图像时，我是只针对img html还是只针对src链接有关系？@Brian没问题，那么针对html还是src链接是什么意思？@Brian你是说你是否

控制台.log

图像的整个html而不是

src

属性？是的，如果我在我的网站上，例如我有10个图像，然后我点击图像1，我希望该图像在屏幕上全宽弹出，如果我针对整个img html，这对我的javascript有影响吗？或者当我点击它时，图像仍然会弹出吗如果我只针对src=“image-1”部分？或者这不重要吗？@Brian我以前没有尝试过类似的方法，但我最好的猜测是使用对图像的引用（即创建一个变量引用

image.firstElementChild

）然后更改其

样式

属性以增加宽度或应用所需的其他样式更改

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>

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