455 reads

How to Force JavaScript Variables to use Specific DOM APIs

by AYONovember 19th, 2019

Too Long; Didn't Read

To take advantage of JavaScript IntelliSense and code completion when using a certain awesome text editor *ehem* VS Code, you need to be able to declare the correct interfaces for variables containing DOM elements. For example, if you want to make a variable use a specific DOM interface like the generic type HTMLElement, just do: Before assigning it to a specific type: "Before you assign it," "before you do it" Then, you get code completion for all the methods and other awesomeness that TypeScript doesn’t.

featured image - 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