Check if the Element is an Image using JavaScript tagName Property

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 GridView

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

<div id="cont">
    <img src="image1.png" id="angular" />
    <img src="image2.png" id="javascript" />
        
    <p id="p1">This is a paragraph</p>
</div>
The Script
<script>
    window.onload = function () {

        var div = document.getElementById('cont');
        for (i = 0; i <= div.childNodes.length - 1; i++) {
            if (div.childNodes[i].tagName == 'IMG')     // CHECK IF ELEMENT IS AN IMG (IMAGE).
            {
                alert(div.childNodes.item(i).id);       // SHOW ID OF EACH IMAGE.
            }
        }
    }
</script>

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

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

<div id="cont">
    <img src="image1.png" id="angular" />
    <img src="image2.png" id="javascript" />
        
    <p id="p1">This is a paragraph</p>
</div>

<script>
    $(document).ready(function () {
        // LOOP THROUGH ALL ELEMENTS INSIDE THE DIV AND CHECK IF THE ELEMENT IS AN IMAGE.
        $('#cont').find('img').each(function () {
            alert($(this).attr('src'));
        });
    });
</script>

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.

That’s it. Thanks for reading.

<<Previous - Pass Multiple Image References to a User Defined Function in JavaScript

Next - JavaScript .contains() Method Example>>



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!