Category: JavaScript

Sometimes, we want to check if an element is a div with JavaScript.

In this article, we’ll look at how to check if an element is a div with JavaScript.

Check if an Element is a Div with JavaScript

To check if an element is a div with JavaScript, we can get the tagName property of an element.

For instance, if we have the following HTML:

<div>
  foo
</div>
<p>
  bar
</p>

Then we can write:

for (const el of document.querySelectorAll('*')) {
  if (el.tagName.toLowerCase() === "div") {
    //it's a div
    console.log(el)
  } else {
    //it's not a div
  }
}

to select all the elements in the HTML with document.querySelectorAll and loop through the selected elements with the for-of loop.

Then in the loop body, we get the tag name of each element with the tagName property.

We call toLowerCase to convert the tag name to lower case.

Then we can check if el is a div by comparing it against 'div' .

If it’s a div, then we log it.

And we should see the div in the console log.

Conclusion

To check if an element is a div with JavaScript, we can get the tagName property of an element.

To get an element’s padding value using JavaScript, we can use the getComputedStyle and getPropertyValue methods.

For instance, if we have the following HTML:

<div style='padding: 20px'>  
  hello world  
</div>

Then we can get the padding-left value of the div by writing:

const div = document.querySelector('div')  
const paddingLeft = window.getComputedStyle(div, null).getPropertyValue('padding-left')  
console.log(paddingLeft)

We call document.querySelector to get the div.

Then we call window.getComputedStyle with the div to get the computed CSS styles of the div.

Then we call getPropertyValue with 'padding-left' to get the padding-left CSS property value.

Therefore, paddingLeft is '20px' according to the console log.

To check if the DOM is ready without any JavaScript framework or library, we can listen to the DOMContentLoaded or the load event.

Inside the event handlers for each event, we can check the value of the document.readyState property to determine if the DOM is ready or not.

For instance, we can write:

window.addEventListener("DOMContentLoaded", () => {
  if (document.readyState === "complete") {
    console.log('loaded')
  } else if (document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
  }
});

window.addEventListener("load", () => {
  if (document.readyState === "complete") {
    console.log('loaded')
  } else if (document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
  }
});

We listen for the DOMContentLoaded and load events by calling window.addEventListener .

Then in each event handler, we check the document.readyState value.

If the value is 'complete' , then we know the DOM is fully loaded.

If it’s 'interactive' , then the DOM is ready, but images, frames, and other resources are still loading.

To check if a year is a leap year in JavaScript, we can check if the year is evenly divisible by 4 and it isn’t evenly divisible by 100, or the year is evenly divisible by 400.

For instance, we can write:

const leapYear = (year) => {  
  return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);  
}  
console.log(leapYear(1900))  
console.log(leapYear(2016))

to create the leapYear function that does the checks.

We check if year is evenly divisible by 4 and it isn’t evenly divisible by 100 with:

(year % 4 === 0) && (year % 100 !== 0)

And we check if year is evenly divisible by 400 with:

year % 400 === 0

We join both expressions together with the OR operator.

Therefore, the first console log should log false since it’s evenly divisble by 4 but not evenly divisble by 100, and it’s not evenly divisible by 400.

On the other hand, the 2nd console log should log true , since it’s evenly divisible by 4 and it’s not evenly divisible by 100.

To delete duplicate elements from an array with JavaScript, we can use the array filter method or the Set constructor with the spread operator.

For instance, we can use the array filter method by writing:

const arr = [1, 2, 2, 3, 4, 5, 5, 5, 6, 7, 7, 8, 9, 10, 10]
const unique = arr.filter((elem, index, self) => {
  return index === self.indexOf(elem);
})
console.log(unique)

We call filter with a callback that checks if index is the same as the index returned by indexOf called on the self array with elem .

If it’s not the first instance of elem , then they’ll be different.

self is the same as arr .

Therefore, duplicate instances of elem won’t be present in arr .

So unique is:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Likewise, we can use the Set constructor with the spread operator to remove the duplicates.

For instance, we can write:

const arr = [1, 2, 2, 3, 4, 5, 5, 5, 6, 7, 7, 8, 9, 10, 10]
const unique = [...new Set(arr)]
console.log(unique)

We pass arr into the Set constructor to convert arr to a set to remove the duplicate elements.

Then we spread that back into an array to convert the set back into an array.

And therefore, unique is the same result as before.