loading...
Cover image for The single most confusing issue in Javascript

The single most confusing issue in Javascript

derder56 profile image DerDer56 ・2 min read

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:

  1. Setting CSS variables
  2. Changing/Getting the HTML of the page with outerHTML (excludes !DOCTYPE declaration)
  3. *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.

Thanks for reading!

Discussion

pic
Editor guide
Collapse
jouo profile image
Jashua

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:

Document.documentElement returns the Element that is the root element of the document (for example, the element for HTML documents)

For any non-empty HTML document, documentElement will always be an element.

For any non-empty XML document, documentElement will always be whatever element is the root element of the document.

Taken from this documentation