Check if the Element is an Image using JavaScript tagName Property

javascript jquery

← PrevNext →

Tools you can use

Let us assume I have a list of images inside a DIV element along with other elements. I specifically want to check if the element is an Image. I can use the tagName property in JavaScript to check if the element is an image or not.

The tagName property will return the tag name of an element. Here is the syntax.

Syntax tagName

element.tagName

The "N" in the tagName is capital. The returned value is always in UPPERCASE. For example,

if (element.tagName == 'IMG')

Also Read: How to Assign the Width and Height of an Image using jQuery

The Markup and the Script

The DIV on my web page, has two <img /> element and one <p> element. I want to check the images only.

<head>
    <title>Check if Element is Image using JavaScript</title>
</head>
<body>
    <div id="cont">
        <img src="../../images/theme/angularjs.png" style="width:10%" id="angular" />
        <img src="../../images/theme/javascript.png" style="width:10%" id="javascript" />
        
        <p id="p1">This is a paragraph</p>
    </div>
</body>

<script>
    window.onload = function () {
        var div = document.getElementById('cont');
        for (i = 0; i <= div.childNodes.length - 1; i++) {
            // check if the element is an IMG (image type).
            if (div.childNodes[i].tagName == 'IMG')
            {
                alert(div.childNodes.item(i).id);   // show the ID of each image.
            }
        }
    }
</script>
</html>
Try it

Related Article

How to check if the clicked element is a DIV or not using plain JavaScript?

Check jQuery Example

Since the elements <img /> and <p> are inside a <div> element, I’ll use the childNodes property to get the list of elements. Next, I am using the tagName property along with childNodes property.

As I have said earlier, the return value of the tagName property is in UPPERCASE. Therefore, in the if condition the value IMG is in upper case.

Similarly, you can use UPPERCASE P or DIV to check if the element is a paragraph or DIV. For example,

if (div.childNodes[i].tagName == 'P')

or

if (div.childNodes[i].tagName == 'DIV')

You can do a variety of operations once you know that the element is an image, using the tagName property.

Along with the ids, you can check the source of each image. For example,

alert(div.childNodes.item(i).src);

or, simply clear the images like this

div.childNodes.item(i).src = '';

This is a JavaScript example, and if you are still comfortably using JavaScript for your frontend programming like me, then this example is for you. However, you can find a much simpler solution for checking elements using jQuery.

Check if element is an Image <img /> using jQuery amd tasodsf dasf ldasfdls

jQuery simplifies everything, therefore you must use it as and when required.

<head>
    <title>Check if Element is Image using jQuery</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div id="cont">
        <img src="../../images/theme/angularjs.png" style="width:10%" id="angular" />
        <img src="../../images/theme/javascript.png" style="width:10%" id="javascript" />
        
        <p id="p1">This is a paragraph</p>
    </div>
</body>

<script>
    $(document).ready(function () {
        // Loop through elements inside DIV and check if the element is an image.
        $('#cont').find('img').each(function () {
            alert($(this).attr('src'));
        });
    });
</script>
</html>
Try it

In the above script, I am using jQuery .find() method to check if the element in an image or with <img /> tag. Using the .attr() method I can get the src and id of each image.

Change the value img to p and you will get the details about the paragraph (properties and text) inside the container.

Happy Coding. 🙂

← PreviousNext →