15 HTML secret element methods.Difference between HTML and the DOM

Previously we published a material where you could briefly look through the brief description what’s new in HTML 5.2. And now let’s discuss the difference between HTML and the DOM and 15 HTML secret elements methods you’ve probably never heard about.

#1 table methods The .insertRow() method will even insert a <tbody> for you if you call it directly on a table element.

#2 scrollIntoView() You know how, when you have #something in the URL, then when the page loads, the browser will scroll the page so you can see the element with that ID

#3 hidden You can just do myElement.hidden = true.

#4 toggle() it’s a method to toggle adding/removing a class from an element, with myElement.classList.toggle('some-class').

#5 querySelector() myElement.querySelector('.my-class') will only match elements that have the class my-classand are descendants of myElement.

#6 closest() This is a method available on all elements that looks up the element tree. It’s like a reversoquerySelector().

#7 getBoundingClientRect() This returns a neat little object with some dimensional details about the element you called it on.

#8 matches() checks if a particular element has a particular class.

#9 insertAdjacentElement() It’s like appendChild() but gives a bit more control over where you’re appending that child.

#10 contains() Where modalEl is a reference to my modal, and e.target will be whichever element was clicked on.

#11 getAttribute() One of these helpful properties is href, which will give you the full URL, with all the trimmings, not the relative URL in the attribute.

#12 the dialog element trio The relatively new <dialog> element has two just-OK methods and one amazing method. show() and close() will do exactly what you expect them to do.

#13 forEach() Sometimes, when you get a reference to a list of elements, you can iterate over them with forEach().

#14 Forms A <form>, as you most likely already know, has a submit() method. It’s slightly less likely that you know forms have a reset() method and can reportValidity() if you’re using validation on your form elements.

#15 select() the .select() method will select all of the text in whatever input you call it on.

Please check the code for every element here.