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.querySelector('.my-class') will only match elements that have the class
my-classand are descendants of
#6 closest() This is a method available on all elements that looks up the element tree. It’s like a reverso
#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.
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
#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.