Replaces several DOM methods with weaker typings and closes microsoft#4689

The following changes have been made:
* All occurences of `getElementById` takes an optional type parameter for manual typing.
* All occurences of `getElementsByClassName` takes an optional type parameter for manual typing.
* `parentElement` now types to `Element` (See microsoft#4689)

Author: jrandolf

baselines/dom.generated.d.ts

@@ -4769,16 +4769,16 @@ interface Document extends Node, DocumentAndElementEventHandlers, DocumentOrShad
      * Returns a reference to the first object with the specified value of the ID or NAME attribute.
      * @param elementId String that specifies the ID value. Case-insensitive.
      */
-    getElementById(elementId: string): HTMLElement | null;
+    getElementById<E extends Element = Element>(elementId: string): E | null;
     /**
      * Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes.
      */
-    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    getElementsByClassName<E extends Element = Element>(classNames: string): HTMLCollectionOf<E>;
     /**
      * Gets a collection of objects based on the value of the NAME or ID attribute.
      * @param elementName Gets a collection of objects based on the value of the NAME or ID attribute.
      */
-    getElementsByName(elementName: string): NodeListOf<HTMLElement>;
+    getElementsByName<E extends Element = Element>(elementName: string): NodeListOf<E>;
     /**
      * Retrieves a collection of objects based on the specified element name.
      * @param name Specifies the name of an element.
@@ -4968,7 +4968,7 @@ interface DocumentEvent {
 /** A minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn't part of the active document tree structure, changes made to the fragment don't affect the document, cause reflow, or incur any performance impact that can occur when changes are made. */
 interface DocumentFragment extends Node, NonElementParentNode, ParentNode {
     readonly ownerDocument: Document;
-    getElementById(elementId: string): HTMLElement | null;
+    getElementById<E extends Element = Element>(elementId: string): E | null;
 }
 
 declare var DocumentFragment: {
@@ -5155,7 +5155,7 @@ interface Element extends Node, Animatable, ChildNode, InnerHTML, NonDocumentTyp
     /**
      * Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes.
      */
-    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    getElementsByClassName<E extends Element = Element>(classNames: string): HTMLCollectionOf<E>;
     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
     getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
     getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
@@ -10772,7 +10772,7 @@ interface Node extends EventTarget {
     /**
      * Returns the parent element.
      */
-    readonly parentElement: HTMLElement | null;
+    readonly parentElement: Element | null;
     /**
      * Returns the parent.
      */
@@ -11031,7 +11031,7 @@ interface NonElementParentNode {
     /**
      * Returns the first element within node's descendants whose ID is elementId.
      */
-    getElementById(elementId: string): Element | null;
+    getElementById<E extends Element = Element>(elementId: string): E | null;
 }
 
 interface NotificationEventMap {
@@ -14348,7 +14348,7 @@ interface SVGSVGElement extends SVGGraphicsElement, DocumentEvent, SVGFitToViewB
     forceRedraw(): void;
     getComputedStyle(elt: Element, pseudoElt?: string | null): CSSStyleDeclaration;
     getCurrentTime(): number;
-    getElementById(elementId: string): Element;
+    getElementById<E extends Element = Element>(elementId: string): E | null;
     getEnclosureList(rect: SVGRect, referenceElement: SVGElement | null): NodeListOf<SVGCircleElement | SVGEllipseElement | SVGImageElement | SVGLineElement | SVGPathElement | SVGPolygonElement | SVGPolylineElement | SVGRectElement | SVGTextElement | SVGUseElement>;
     getIntersectionList(rect: SVGRect, referenceElement: SVGElement | null): NodeListOf<SVGCircleElement | SVGEllipseElement | SVGImageElement | SVGLineElement | SVGPathElement | SVGPolygonElement | SVGPolylineElement | SVGRectElement | SVGTextElement | SVGUseElement>;
     pauseAnimations(): void;

inputfiles/addedTypes.json

@@ -620,7 +620,7 @@
                         "getElementsByClassName": {
                             "name": "getElementsByClassName",
                             "override-signatures": [
-                                "getElementsByClassName(classNames: string): HTMLCollectionOf<Element>"
+                                "getElementsByClassName<E extends Element = Element>(classNames: string): HTMLCollectionOf<E>"
                             ]
                         },
                         "closest": {
@@ -1022,7 +1022,7 @@
                             "name": "getElementById",
                             "exposed": "Window",
                             "override-signatures": [
-                                "getElementById(elementId: string): HTMLElement | null"
+                                "getElementById<E extends Element = Element>(elementId: string): E | null"
                             ]
                         }
                     }

inputfiles/overridingTypes.json

@@ -1,6 +1,19 @@
 {
     "mixins": {
         "mixin": {
+            "NonElementParentNode": {
+                "name": "NonElementParentNode",
+                "methods": {
+                    "method": {
+                        "getElementById": {
+                            "name": "getElementById",
+                            "override-signatures": [
+                                "getElementById<E extends Element = Element>(elementId: string): E | null"
+                            ]
+                        }
+                    }
+                }
+            },
             "GlobalFetch": {
                 "name": "GlobalFetch",
                 "methods": {
@@ -528,7 +541,7 @@
                         "getElementById": {
                             "name": "getElementById",
                             "override-signatures": [
-                                "getElementById(elementId: string): HTMLElement | null"
+                                "getElementById<E extends Element = Element>(elementId: string): E | null"
                             ]
                         },
                         "elementsFromPoint": {
@@ -548,13 +561,13 @@
                         "getElementsByClassName": {
                             "name": "getElementsByClassName",
                             "override-signatures": [
-                                "getElementsByClassName(classNames: string): HTMLCollectionOf<Element>"
+                                "getElementsByClassName<E extends Element = Element>(classNames: string): HTMLCollectionOf<E>"
                             ]
                         },
                         "getElementsByName": {
                             "name": "getElementsByName",
                             "override-signatures": [
-                                "getElementsByName(elementName: string): NodeListOf<HTMLElement>"
+                                "getElementsByName<E extends Element = Element>(elementName: string): NodeListOf<E>"
                             ]
                         },
                         "createTreeWalker": {
@@ -704,7 +717,7 @@
                             "override-type": "Node & ParentNode | null"
                         },
                         "parentElement": {
-                            "override-type": "HTMLElement | null"
+                            "override-type": "Element | null"
                         },
                         "childNodes": {
                             "override-type": "NodeListOf<ChildNode>"
@@ -967,6 +980,12 @@
                 "name": "SVGSVGElement",
                 "methods": {
                     "method": {
+                        "getElementById": {
+                            "name": "getElementById",
+                            "override-signatures": [
+                                "getElementById<E extends Element = Element>(elementId: string): E | null"
+                            ]
+                        },
                         "getEnclosureList": {
                             "name": "getEnclosureList",
                             "override-signatures": [