add post about using js dom interfaces

_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"
+---
+
+<span class="first-letter">T</span>o 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?<!--more-->
+
+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.
+