Any idea how to check if a div contains ONLY an image tag inside it?

Question

I've been trying to search this on stackoverflow but the answers arent exactly what im looking for, plus they use jquery. So is there any way of determing if a div element contains only an image element inside it, and therefore returning a boolean? I have tried things like:

but this returned false. Even if this would work, I'd like it to return true only if there is an image regardless if there is a p tag or something else inside.

user_15021471 · Answer

I am also new to this world, but messing around a little I created this:

HTML

JS

const container = document.querySelector('.container')

const booleanResult = checkChildElement()

function checkChildElement(){
if(container.childElementCount === 1 && container.children[0].tagName === 'IMG'){
   return true
}
else{
   return false
}
}

console.log(booleanResult)

user_13647574 · Answer

Solution

class App extends React.Component {
  state = {
    isImageExist: false,
    totalImages: 0,
    isRender: false,
  };
  checkIsImage(ref) {
    if (ref && !this.state.isRender) {
      let totalImages = Object.entries(ref.children).filter(
        ([key, child]) => child.nodeName === "IMG"
      );
      this.setState({
        totalImages: totalImages.length,
        isImageExist: totalImages.length > 0,
        isRender: true,
      });
      console.log("Total Images", totalImages.length);
    }
  }

  render() {
    return (
       {
          this.checkIsImage(ref);
        }}
      >
        
        
        {this.state.totalImages}
      
    );
  }
}
ReactDOM.render(, document.getElementById("root"));

Any idea how to check if a div contains ONLY an image tag inside it?

2 Answers

Solution