There's currently a really annoying and confusing issue in Javascript which just doesn't make any sense. I think someone should fix this because it shouldn't exist in the first place. Honestly, I just don't even get why this is a thing.
Understanding the issue
The most used object in Javascript has to be the built-in 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:
- The
<body>tag - The
<head>tag - The
<title>tag inside of it - And an
<html>tag which covers them all
Javascript can make it easy for you to select these tags. For example, you can select the <body> with document.body, the <head> with document.head, the <title> with document.title, etc. You get the point. But guess how you select the <html> tag?
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.html? Second, document.documentElement? It doesn't even select the whole code of the document, just the <html> tag. I repeat, this makes NO sense.
(If any Javascript creators are reading, please fix this in the next version)
Why this is an issue
You may be thinking,
"Come on, it's not THAT big of a deal. When would you even use the
<html>tag anyway?"
More than you'd think. There are several uses for it, which include:
- Setting CSS variables
- Changing/Getting the HTML of the page with
outerHTML(excludes!DOCTYPEdeclaration) - *inhales*...
scrollTop,scrollLeft,scrollHeight,scrollWidth,clientHeight,clientWidth, and basically everything else scroll and size related
How to fix it
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')[0]
document.getElementsByTagName('html')[0]
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 .js file you write, so I think we can all agree that Javascript should fix this issue and add a document.html object to make it fit in with other single-use tag selectors. It would be a lot less confusing if they did.
Discussion
Don't quote me on this as I don't use JS and I could be wrong :D
I just googled about documentElement and it seems to be named like that because its not only for HTML:
Taken from this documentation