Full Hacker

Ayo Ayco is a software engineer focused on the web and is the blogger behind FullHacker.com

How to Force JavaScript Variables to use Specific DOM APIs

To take advantage of JavaScript IntelliSense and code completion when using a certain awesome text editor *ehem* VS Code *ehem*, you need to be able to declare the correct interfaces for variables containing DOM elements.
Yeah, I know this works like magic in TypeScript.
But if you’re working with pure JavaScript, how do you do it?
Okay, I’ll answer that in this post obviously.

How to Force JS Variables containing DOM Elements to use a specific HTML interface

Here goes.
For example, if you want to make a variable use a specific DOM interface like 
HTMLTableElement
and not the generic 
HTMLELement
, just do:
var x = document.createElement('table') // -> returns HTMLTableElement
before you assign it…
x = document.getElementById('table-id') // -> always returns HTMLELement
If you go straight to doing the latter, the variable will have the generic type HTMLElement… and you don’t want that.
Important hint: the string parameter for
document.createElement() 
(which is 'table' in our example above) will determine the type/interface that the variable 
x
 will use.
The 
'table'
 parameter is the reason why we get an
HTMLTableElement 
from 
document.createElement()
.

Uh, okay. But, uhm, why… woud I want to do that?

Well, this way, the variable 
x
 will have the type 
HTMLTableElement
 all the way in your code.
Then, IntelliSense will work like magic and you will get more helpful code completion like, for our example…
x.insertRow() // -> will be detected if x is HTMLTableElement, NOT if x is HTMLElement
x
 will now get code completion for all the methods and other awesomeness that 
HTMLTableElement
 has and 
HTMLElement
 doesn’t.
You see, 
HTMLElement
 has a lot of great methods but when working on a specific HTML element, there are more options for you if you know how to use the correct interface.

Okay… Uh, I still don’t know what you’re talking about though…

What are you doing here then? This is for people who know what I’m talking about!
(But if you want something really basic, come back again! I’m writing something up for people with zero experience, but who wants to get into coding.)
Anyway…
Here’s the full list of specific HTML Element APIs:
HTMLAnchorElement
HTMLAreaElement
HTMLAudioElement
HTMLBRElement
HTMLBaseElement
HTMLBaseFontElement
HTMLBodyElement
HTMLButtonElement
HTMLCanvasElement
HTMLContentElement
HTMLDListElement
HTMLDataElement
HTMLDataListElement
HTMLDialogElement
HTMLDivElement
HTMLDocument
HTMLEmbedElement
HTMLFieldSetElement
HTMLFormControlsCollection
HTMLFormElement
HTMLFrameSetElement
HTMLHRElement
HTMLHeadElement
HTMLHeadingElement
HTMLHtmlElement
HTMLIFrameElement
HTMLImageElement
HTMLInputElement
HTMLIsIndexElement
HTMLKeygenElement
HTMLLIElement
HTMLLabelElement
HTMLLegendElement
HTMLLinkElement
HTMLMapElement
HTMLMediaElement
HTMLMetaElement
HTMLMeterElement
HTMLModElement
HTMLOListElement
HTMLObjectElement
HTMLOptGroupElement
HTMLOptionElement
HTMLOptionsCollection
HTMLOutputElement
HTMLParagraphElement
HTMLParamElement
HTMLPictureElement
HTMLPreElement
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
HTMLSelectElement
HTMLShadowElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
HTMLTableCaptionElement
HTMLTableCellElement
HTMLTableColElement
HTMLTableDataCellElement
HTMLTableElement
HTMLTableHeaderCellElement
HTMLTableRowElement
HTMLTableSectionElement
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
HTMLUnknownElement
HTMLVideoElement
Whoa, quite a lot, right?
For more info, you start with the HTMLELement Documentation found here then read up on specific APIs from there.

Tags

Comments

Topics of interest