Checking whether parent element has specific children

Question

I am trying to write a script that is going to dynamically put specific style tags around certain numbers and symbols in my document, but I only want the function to activate if the paragraph I'm running it on doesn't contain any <img> , and possibly 1 or two other tags of my choosing.

Is there a simple way to test for this? The method I'm trying to use right now doesn't seem to be working as I'm having difficulty accessing the HTML collections the way I need.

const paragraphElements = document.getElementsByTagName("p");
const imgTags = /(IMG|img)/g;

for (var i = 0; i < paragraphElements.length; i++) {

 // children of paragraph elements
 let paragraphChildren = paragraphElements[i].children;

 // trying to access the array of children then test whether there are any img tags

 for (var h = 0; h < paragraphChildren.lengh; h++) {
   console.log(paragraphChildren[h].tagName); // displays nothing

 if (imgTags.test(paragraphChildren[h])) == false {

      // will add the styling code in here.

     }
    }
   }

Any suggestions on how to do this are appreciated!

Answer 1

If you already know what elements you want to select inside your paragraphs you could simplify your initial selector. I've used span as an example for selecting multiple elements.

const paragraphElements = document.querySelectorAll('p img, p span');

This will return all img and span elements within any p elements on the page.

Then you can loop over your selected items.

 let toSelect = document.querySelectorAll('p img, p span'); toSelect.forEach(function(obj) { if (obj.tagName == 'IMG') { // Style your images obj.style.width = '25px'; obj.style.height = '25px'; obj.classList.add('test-class'); } else if (obj.tagName == 'SPAN') { // Style your spans obj.style.color = 'red'; } }); 

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cum ratione illum saepe quia, magnam fuga molestiae nostrum, consequuntur voluptates error perferendis. Repellat distinctio dolores explicabo aliquid, quod adipisci <span>tempora!</span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt quo eius nisi fugit qui maiores dolores recusandae eaque aperiam magni? Nobis veniam repellendus ut laboriosam perferendis dicta ab necessitatibus provident! <img src="//placehold.it/50x50"></p> 

Answer 2

You can call getElementsByTagName again on the Paragraph elements

const paragraphElements = document.getElementsByTagName("p");

for (var i = 0; i < paragraphElements.length; i++) {
    let paragraphElement = paragraphElements[i];
    let images = paragraphElement.getElementsByTagName("img");
    if(!images.length > 0){
        // add your class here 
        paragraphElement.classList.add("yourClassName");
    }
}