Category: JavaScript

Sometimes, we want to loop through all descendants of a div with JavaScript.

In this article, we’ll look at how to loop through all descendants of a div with JavaScript.

How to loop through all descendants of a div with JavaScript?

To loop through all descendants of a div with JavaScript, we can select all the descendants with getElementsByTagName.

For instance, we write:

<div id='id'>
  <p>
    bar
  </p>
  <p>
    baz
  </p>
  <p>
    foo
  </p>
</div>

to add a div with some descendant elements.

Then we select the descendants and loop through them with:

const ancestor = document.getElementById('id')
const descendents = ancestor.getElementsByTagName('*');

for (const d of descendents) {
  console.log(d)
}

We select the div with ID id with getElementById.

Then we call ancestor.getElementsByTagName with '*' to select all the descendant elemnts from ancestor.

Finally, we loop through them with a for-of loop.

Therefore, we should see all the p elements logged.

Conclusion

To loop through all descendants of a div with JavaScript, we can select all the descendants with getElementsByTagName.

Sometimes, we want to remove focus from submit button with JavaScript

In this article, we’ll look at how to remove focus from submit button with JavaScript.

How to remove focus from submit button with JavaScript?

To remove focus from submit button with JavaScript, we can call the button’s blur method.

For instance, we write:

<form>
  <input type="submit">
</form>

to add a form.

Then we write:

const form = document.querySelector('form')
const submit = document.querySelector('input[type="submit"]')

form.onready = () => {
  submit.blur()
}

We select the form and the submit button with querySelector.

Then we call submit.blur when the form is loaded by setting form.onready to a function that calls blur.

Conclusion

To remove focus from submit button with JavaScript, we can call the button’s blur method.

Sometimes, we want to merge two dates in JavaScript.

In this article, we’ll look at how to merge two dates in JavaScript.

How to merge two dates in JavaScript?

To merge two dates in JavaScript, we can get the parts from each date and put it in a new date.

For instance, we write:

const date = new Date('Wed Dec 21 2022 00:00:00 GMT+0000 (GMT)')
const time = new Date('Sun Dec 31 2000 03:00:00 GMT+0000 (GMT)')
const datetime = new Date(date.getFullYear(), date.getMonth(), date.getDate(),
  time.getHours(), time.getMinutes(), time.getSeconds());
console.log(datetime)

to combine the date and time into datetime.

We get the year, month, and day from date with getFullYear, getMonth, and getHours.

And then we get the hours, minutes, and seconds with getHours, getMinuts, and getSeconds.

As a result, we get that datetime is 'Tue Dec 20 2022 19:00:00 GMT-0800 (Pacific Standard Time) '.

Conclusion

To merge two dates in JavaScript, we can get the parts from each date and put it in a new date.