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

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

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

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.