diff --git a/_posts/2019-10-14-forcing-javascript-dom-types.md b/_posts/2019-10-14-forcing-javascript-dom-types.md new file mode 100644 index 0000000..309593c --- /dev/null +++ b/_posts/2019-10-14-forcing-javascript-dom-types.md @@ -0,0 +1,139 @@ +--- +title: "How to Force JavaScript Variables to use Specific DOM APIs" +permalink: "/forcing-js-dom-types" +description: "To take advantage of code completion for Javascript, here's a smart way to force JS DOM variables to use a specific DOM API interface" +keywords: "" +image: "javascript" +image-attrib: "JavaScript using HTMLTableElement instead of HTMLElement, or other specific DOM APIs" +--- + +To take advantage of JavaScript *intellisense* and code completion when using a certain *awesome* text editor *\*ehem\** [VS Code](https://code.visualstudio.com/) *\*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: + +```javascript +var x = document.createElement('table') // -> returns HTMLTableElement +``` + +before you assign it... + +```javascript +x = document.getElementById('table-id') // -> always returns HTMLELement +``` + +If you go straight to doing `document.getElementById` the variable will have the generic type `HTMLElement`. + +Important hint: the string parameter for `createElement` (`'table'` in our example above) will determine the type/interface that the variable `x` will use. + +## 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 our example... + +```javascript +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 use the correct interface (which, most probably, extends `HTMLElement`, meaning they also get its methods and other awesomeness). + +## 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 chan start with the `HTMLELement` Documentation [found here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) then read up on specific APIs from there. + diff --git a/assets/images/javascript.jpg b/assets/images/javascript.jpg new file mode 100644 index 0000000..5007e50 Binary files /dev/null and b/assets/images/javascript.jpg differ diff --git a/assets/images/javascript_small.jpg b/assets/images/javascript_small.jpg new file mode 100644 index 0000000..5007e50 Binary files /dev/null and b/assets/images/javascript_small.jpg differ