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
