document. It controls basically everything on the HTML page. You use it to select and change everything from a footer to the title on your page.
There are 4 main tags that should only be used once in HTML. These tags are:
<title>tag inside of it
- And an
<html>tag which covers them all
document.title, etc. You get the point. But guess how you select the
document.documentElement // WHAT!?
This makes NO sense, and I cannot tell you how many times I've been tripped up or annoyed by this. First of all, how hard is it to just name it
document.documentElement? It doesn't even select the whole code of the document, just the
<html> tag. I repeat, this makes NO sense.
You may be thinking,
"Come on, it's not THAT big of a deal. When would you even use the
More than you'd think. There are several uses for it, which include:
- Setting CSS variables
- Changing/Getting the HTML of the page with
clientWidth, and basically everything else scroll and size related
There are some good and working ways to fix this.
First of all, you can just use
document.documentElement, no matter how little it makes sense. Second, you can use an alternative selector which returns the same result. There are quite a few, including:
document.querySelector('html') document.querySelectorAll('html') document.getElementsByTagName('html') document.body.parentElement // or document.head.parentElement // And more...
And last but not least, this line of code will do what you want:
document.html = document.documentElement; console.log(document.html.innerHTML) // "<head><title>Page</title></head>" etc...
But it's not like it's worth doing this on every single
document.html object to make it fit in with other single-use tag selectors. It would be a lot less confusing if they did.