To take advantage of JavaScript and code completion when using a certain text editor , you need to be able to declare the correct interfaces for variables containing DOM elements. IntelliSense awesome *ehem* VS Code *ehem* 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 and not the generic , just do: HTMLTableElement HTMLELement x = .createElement( ) var document 'table' // -> returns HTMLTableElement before you assign it… x = .getElementById( ) document '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 (which is 'table' in our example above) will determine the type/interface that the variable will use. document.createElement() x The parameter is the reason why we get an from . 'table' HTMLTableElement document.createElement() Uh, okay. But, uhm, why… woud I want to do that? Well, this way, the variable will have the type all the way in your code. x HTMLTableElement Then, will work like magic and you will get more helpful code completion like, for our example… IntelliSense 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 has and doesn’t. x HTMLTableElement HTMLElement You see, 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. HTMLElement 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 then read up on specific APIs from there. found here

Check out my projects!

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Force JavaScript Variables to use Specific DOM APIs

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps