Как я могу получить информацию из тегов HTML в Javascript?

Question

Я пытаюсь получить определенные идентификаторы элементов, основываясь на том, есть ли у них тег изображения или нет. Для данного ввода, как показано ниже:

<div id="ID_1">
     <p><img src="image4.png"></p>
</div>

<div id="ID_2">
</div>

<div id="ID_3">
     <p><img src="image6.png"></p>
</div>

<div id="ID_4">
     <p><img src="image4.png"></p>
</div>

Я мог бы получить что-то вроде:

ID_1: image4.png
ID_2:
ID_3: image6.png
ID_4: image4.png

Я не слишком знаком с HTML или Javascript, поэтому любая помощь или ресурсы, которые кто-то может иметь или знать, будут высоко оценены.

Answer 1

Я бы порекомендовал использовать jQuery для чего-то вроде этого (не забудьте включить jquery в заголовок HTML)

HTML =>

<div id="divContainer" >
<div id="ID_1">
     <p><img src="image4.png"></p>
</div>

<div id="ID_2">
</div>

<div id="ID_3">
     <p><img src="image6.png"></p>
</div>

<div id="ID_4">
     <p><img src="image4.png"></p>
</div>
</div>

Javascript =>

const doesContainImg = [];

$(".divContainer div").each(function() {
    // check for an img 
    if ($(this).find("img").length) {
      // store id in array that contains ids that have imgs
      doesContainImg.push($(this).attr("id"));
   }
});

это должно сработать, если оно не даст мне знать!

Answer 2

Добавьте класс на тех div. Допустим, у вас есть класс "image-div".

Мы можем использовать этот класс, чтобы увидеть, содержит ли div изображение или нет.

Jquery:

$(".image-div").each(function(){
    if($(this).find('img').length){
       //if this div contains an image do something.
    }
});

Вы можете прикрепить этот код к событию и использовать его