happy-dom 8.8.0 → 9.0.0

package/src/nodes/document/Document.ts

@@ -29,8 +29,8 @@ import IComment from '../comment/IComment';
 import IText from '../text/IText';
 import IDocumentFragment from '../document-fragment/IDocumentFragment';
 import INodeList from '../node/INodeList';
+import NodeList from '../node/NodeList';
 import IHTMLCollection from '../element/IHTMLCollection';
-import HTMLCollectionFactory from '../element/HTMLCollectionFactory';
 import IHTMLLinkElement from '../html-link-element/IHTMLLinkElement';
 import IHTMLStyleElement from '../html-style-element/IHTMLStyleElement';
 import DocumentReadyStateEnum from './DocumentReadyStateEnum';
@@ -43,6 +43,8 @@ import IHTMLBaseElement from '../html-base-element/IHTMLBaseElement';
 import IAttr from '../attr/IAttr';
 import IProcessingInstruction from '../processing-instruction/IProcessingInstruction';
 import ProcessingInstruction from '../processing-instruction/ProcessingInstruction';
+import ElementUtility from '../element/ElementUtility';
+import HTMLCollection from '../element/HTMLCollection';
 import VisibilityStateEnum from './VisibilityStateEnum';
 
 const PROCESSING_INSTRUCTION_TARGET_REGEXP = /^[a-z][a-z0-9-]+$/;
@@ -55,7 +57,10 @@ export default class Document extends Node implements IDocument {
 	public nodeType = Node.DOCUMENT_NODE;
 	public adoptedStyleSheets: CSSStyleSheet[] = [];
 	public implementation: DOMImplementation;
-	public readonly children: IHTMLCollection<IElement> = HTMLCollectionFactory.create();
+	public readonly children: IHTMLCollection<IElement, IElement> = new HTMLCollection<
+		IElement,
+		IElement
+	>();
 	public readonly readyState = DocumentReadyStateEnum.interactive;
 	public readonly isConnected: boolean = true;
 	public readonly defaultView: IWindow;
@@ -416,8 +421,10 @@ export default class Document extends Node implements IDocument {
 	 *
 	 * @returns Scripts.
 	 */
-	public get scripts(): IHTMLCollection<IHTMLScriptElement> {
-		return <IHTMLCollection<IHTMLScriptElement>>this.getElementsByTagName('script');
+	public get scripts(): IHTMLCollection<IHTMLScriptElement, IHTMLScriptElement> {
+		return <IHTMLCollection<IHTMLScriptElement, IHTMLScriptElement>>(
+			this.getElementsByTagName('script')
+		);
 	}
 
 	/**
@@ -531,7 +538,7 @@ export default class Document extends Node implements IDocument {
 	 * @param className Tag name.
 	 * @returns Matching element.
 	 */
-	public getElementsByClassName(className: string): IHTMLCollection<IElement> {
+	public getElementsByClassName(className: string): IHTMLCollection<IElement, IElement> {
 		return ParentNodeUtility.getElementsByClassName(this, className);
 	}
 
@@ -541,7 +548,7 @@ export default class Document extends Node implements IDocument {
 	 * @param tagName Tag name.
 	 * @returns Matching element.
 	 */
-	public getElementsByTagName(tagName: string): IHTMLCollection<IElement> {
+	public getElementsByTagName(tagName: string): IHTMLCollection<IElement, IElement> {
 		return ParentNodeUtility.getElementsByTagName(this, tagName);
 	}
 
@@ -552,7 +559,10 @@ export default class Document extends Node implements IDocument {
 	 * @param tagName Tag name.
 	 * @returns Matching element.
 	 */
-	public getElementsByTagNameNS(namespaceURI: string, tagName: string): IHTMLCollection<IElement> {
+	public getElementsByTagNameNS(
+		namespaceURI: string,
+		tagName: string
+	): IHTMLCollection<IElement, IElement> {
 		return ParentNodeUtility.getElementsByTagNameNS(this, namespaceURI, tagName);
 	}
 
@@ -577,9 +587,9 @@ export default class Document extends Node implements IDocument {
 			_parentNode: IElement | IDocumentFragment | IDocument,
 			_name: string
 		): INodeList<IElement> => {
-			const matches = HTMLCollectionFactory.create();
+			const matches = new NodeList<IElement>();
 			for (const child of _parentNode.children) {
-				if ((child.getAttributeNS(null, 'name') || '') === _name) {
+				if (child.getAttributeNS(null, 'name') === _name) {
 					matches.push(child);
 				}
 				for (const match of _getElementsByName(<IElement>child, _name)) {
@@ -615,78 +625,27 @@ export default class Document extends Node implements IDocument {
 	}
 
 	/**
-	 * Append a child node to childNodes.
-	 *
 	 * @override
-	 * @param  node Node to append.
-	 * @returns Appended node.
 	 */
 	public appendChild(node: INode): INode {
-		// If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
-		if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-			if (node.parentNode && node.parentNode['children']) {
-				const index = node.parentNode['children'].indexOf(node);
-				if (index !== -1) {
-					node.parentNode['children'].splice(index, 1);
-				}
-			}
-			if (node !== this && node.nodeType === Node.ELEMENT_NODE) {
-				this.children.push(<Element>node);
-			}
-		}
-
+		ElementUtility.appendChild(this, node);
 		return super.appendChild(node);
 	}
 
 	/**
-	 * Remove Child element from childNodes array.
-	 *
 	 * @override
-	 * @param node Node to remove.
 	 */
 	public removeChild(node: INode): INode {
-		if (node.nodeType === Node.ELEMENT_NODE) {
-			const index = this.children.indexOf(<Element>node);
-			if (index !== -1) {
-				this.children.splice(index, 1);
-			}
-		}
-
+		ElementUtility.removeChild(this, node);
 		return super.removeChild(node);
 	}
 
 	/**
-	 * Inserts a node before another.
-	 *
 	 * @override
-	 * @param newNode Node to insert.
-	 * @param [referenceNode] Node to insert before.
-	 * @returns Inserted node.
 	 */
 	public insertBefore(newNode: INode, referenceNode?: INode): INode {
-		const returnValue = super.insertBefore(newNode, referenceNode);
-
-		// If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
-		if (newNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-			if (newNode.parentNode && newNode.parentNode['children']) {
-				const index = newNode.parentNode['children'].indexOf(newNode);
-				if (index !== -1) {
-					newNode.parentNode['children'].splice(index, 1);
-				}
-			}
-
-			this.children.length = 0;
-
-			for (const node of this.childNodes) {
-				if (node.nodeType === Node.ELEMENT_NODE) {
-					this.children.push(<IElement>node);
-				}
-			}
-		}
-
-		return returnValue;
+		ElementUtility.insertBefore(this, newNode, referenceNode);
+		return super.insertBefore(newNode, referenceNode);
 	}
 
 	/**

package/src/nodes/document/IDocument.ts

@@ -32,7 +32,7 @@ export default interface IDocument extends IParentNode {
 	readonly doctype: IDocumentType;
 	readonly body: IHTMLElement;
 	readonly head: IHTMLElement;
-	readonly scripts: IHTMLCollection<IHTMLScriptElement>;
+	readonly scripts: IHTMLCollection<IHTMLScriptElement, IHTMLScriptElement>;
 	readonly activeElement: IHTMLElement;
 	readonly styleSheets: CSSStyleSheet[];
 	readonly scrollingElement: IHTMLElement;

package/src/nodes/document-fragment/DocumentFragment.ts

@@ -5,14 +5,16 @@ import ParentNodeUtility from '../parent-node/ParentNodeUtility';
 import IDocumentFragment from './IDocumentFragment';
 import INode from '../node/INode';
 import IHTMLCollection from '../element/IHTMLCollection';
-import HTMLCollectionFactory from '../element/HTMLCollectionFactory';
+import ElementUtility from '../element/ElementUtility';
+import HTMLCollection from '../element/HTMLCollection';
+import INodeList from '../node/INodeList';
 
 /**
  * DocumentFragment.
  */
 export default class DocumentFragment extends Node implements IDocumentFragment {
 	public nodeType = Node.DOCUMENT_FRAGMENT_NODE;
-	public readonly children: IHTMLCollection<IElement> = HTMLCollectionFactory.create();
+	public readonly children: IHTMLCollection<IElement, IElement> = new HTMLCollection();
 	public _rootNode: INode = this;
 
 	/**
@@ -104,7 +106,7 @@ export default class DocumentFragment extends Node implements IDocumentFragment
 	 * @param selector CSS selector.
 	 * @returns Matching elements.
 	 */
-	public querySelectorAll(selector: string): IElement[] {
+	public querySelectorAll(selector: string): INodeList<IElement> {
 		return QuerySelector.querySelectorAll(this, selector);
 	}
 
@@ -150,78 +152,26 @@ export default class DocumentFragment extends Node implements IDocumentFragment
 	}
 
 	/**
-	 * Append a child node to childNodes.
-	 *
 	 * @override
-	 * @param  node Node to append.
-	 * @returns Appended node.
 	 */
 	public appendChild(node: INode): INode {
-		// If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
-		if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-			if (node.parentNode && node.parentNode['children']) {
-				const index = node.parentNode['children'].indexOf(node);
-				if (index !== -1) {
-					node.parentNode['children'].splice(index, 1);
-				}
-			}
-
-			if (node !== this && node.nodeType === Node.ELEMENT_NODE) {
-				this.children.push(<IElement>node);
-			}
-		}
-
+		ElementUtility.appendChild(this, node);
 		return super.appendChild(<INode>node);
 	}
 
 	/**
-	 * Remove Child element from childNodes array.
-	 *
 	 * @override
-	 * @param node Node to remove.
 	 */
 	public removeChild(node: INode): INode {
-		if (node.nodeType === Node.ELEMENT_NODE) {
-			const index = this.children.indexOf(<IElement>node);
-			if (index !== -1) {
-				this.children.splice(index, 1);
-			}
-		}
-
+		ElementUtility.removeChild(this, node);
 		return super.removeChild(<Node>node);
 	}
 
 	/**
-	 * Inserts a node before another.
-	 *
 	 * @override
-	 * @param newNode Node to insert.
-	 * @param [referenceNode] Node to insert before.
-	 * @returns Inserted node.
 	 */
 	public insertBefore(newNode: INode, referenceNode?: INode): INode {
-		const returnValue = super.insertBefore(newNode, referenceNode);
-
-		// If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
-		if (newNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-			if (newNode.parentNode && newNode.parentNode['children']) {
-				const index = newNode.parentNode['children'].indexOf(newNode);
-				if (index !== -1) {
-					newNode.parentNode['children'].splice(index, 1);
-				}
-			}
-
-			this.children.length = 0;
-
-			for (const node of this.childNodes) {
-				if (node.nodeType === Node.ELEMENT_NODE) {
-					this.children.push(<IElement>node);
-				}
-			}
-		}
-
-		return returnValue;
+		ElementUtility.insertBefore(this, newNode, referenceNode);
+		return super.insertBefore(newNode, referenceNode);
 	}
 }

package/src/nodes/document-fragment/IDocumentFragment.ts

@@ -1,5 +1,6 @@
 import IElement from '../element/IElement';
 import INode from '../node/INode';
+import INodeList from '../node/INodeList';
 
 export default interface IDocumentFragment extends INode {
 	readonly childElementCount: number;
@@ -35,7 +36,7 @@ export default interface IDocumentFragment extends INode {
 	 * @param selector CSS selector.
 	 * @returns Matching elements.
 	 */
-	querySelectorAll(selector: string): IElement[];
+	querySelectorAll(selector: string): INodeList<IElement>;
 
 	/**
 	 * Replaces the existing children of a node with a specified new set of children.

package/src/nodes/element/Element.ts

@@ -21,15 +21,15 @@ import INode from '../node/INode';
 import IDocument from '../document/IDocument';
 import IHTMLCollection from './IHTMLCollection';
 import INodeList from '../node/INodeList';
-import HTMLCollectionFactory from './HTMLCollectionFactory';
 import { TInsertAdjacentPositions } from './IElement';
 import IText from '../text/IText';
 import IDOMRectList from './IDOMRectList';
 import DOMRectListFactory from './DOMRectListFactory';
 import IAttr from '../attr/IAttr';
 import INamedNodeMap from '../../named-node-map/INamedNodeMap';
-
 import Event from '../../event/Event';
+import ElementUtility from './ElementUtility';
+import HTMLCollection from './HTMLCollection';
 
 /**
  * Element.
@@ -46,7 +46,7 @@ export default class Element extends Node implements IElement {
 
 	public scrollTop = 0;
 	public scrollLeft = 0;
-	public children: IHTMLCollection<IElement> = HTMLCollectionFactory.create();
+	public children: IHTMLCollection<IElement, IElement> = new HTMLCollection<IElement, IElement>();
 	public readonly namespaceURI: string = null;
 
 	// Events
@@ -298,7 +298,7 @@ export default class Element extends Node implements IElement {
 	 * @param slot Slot.
 	 */
 	public set slot(title: string) {
-		this.setAttributeNS(null, 'slot', title);
+		this.setAttribute('slot', title);
 	}
 
 	/**
@@ -368,21 +368,7 @@ export default class Element extends Node implements IElement {
 	 * @override
 	 */
 	public override appendChild(node: INode): INode {
-		// If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
-		if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-			if (node.parentNode && node.parentNode['children']) {
-				const index = node.parentNode['children'].indexOf(node);
-				if (index !== -1) {
-					node.parentNode['children'].splice(index, 1);
-				}
-			}
-
-			if (node !== this && node.nodeType === Node.ELEMENT_NODE) {
-				this.children.push(<IElement>node);
-			}
-		}
-
+		ElementUtility.appendChild(this, node);
 		return super.appendChild(node);
 	}
 
@@ -390,49 +376,23 @@ export default class Element extends Node implements IElement {
 	 * @override
 	 */
 	public override removeChild(node: INode): INode {
-		if (node.nodeType === Node.ELEMENT_NODE) {
-			const index = this.children.indexOf(<IElement>node);
-			if (index !== -1) {
-				this.children.splice(index, 1);
-			}
-		}
-
+		ElementUtility.removeChild(this, node);
 		return super.removeChild(node);
 	}
 
 	/**
-	 * Removes the node from its parent.
+	 * @override
 	 */
-	public remove(): void {
-		ChildNodeUtility.remove(this);
+	public override insertBefore(newNode: INode, referenceNode: INode | null): INode {
+		ElementUtility.insertBefore(this, newNode, referenceNode);
+		return super.insertBefore(newNode, referenceNode);
 	}
 
 	/**
-	 * @override
+	 * Removes the node from its parent.
 	 */
-	public override insertBefore(newNode: INode, referenceNode: INode | null): INode {
-		const returnValue = super.insertBefore(newNode, referenceNode);
-
-		// If the type is DocumentFragment, then the child nodes of if it should be moved instead of the actual node.
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
-		if (newNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-			if (newNode.parentNode && newNode.parentNode['children']) {
-				const index = newNode.parentNode['children'].indexOf(newNode);
-				if (index !== -1) {
-					newNode.parentNode['children'].splice(index, 1);
-				}
-			}
-
-			this.children.length = 0;
-
-			for (const node of this.childNodes) {
-				if (node.nodeType === Node.ELEMENT_NODE) {
-					this.children.push(<IElement>node);
-				}
-			}
-		}
-
-		return returnValue;
+	public remove(): void {
+		ChildNodeUtility.remove(this);
 	}
 
 	/**
@@ -818,7 +778,7 @@ export default class Element extends Node implements IElement {
 	 * @param className Tag name.
 	 * @returns Matching element.
 	 */
-	public getElementsByClassName(className: string): IHTMLCollection<IElement> {
+	public getElementsByClassName(className: string): IHTMLCollection<IElement, IElement> {
 		return ParentNodeUtility.getElementsByClassName(this, className);
 	}
 
@@ -828,7 +788,7 @@ export default class Element extends Node implements IElement {
 	 * @param tagName Tag name.
 	 * @returns Matching element.
 	 */
-	public getElementsByTagName(tagName: string): IHTMLCollection<IElement> {
+	public getElementsByTagName(tagName: string): IHTMLCollection<IElement, IElement> {
 		return ParentNodeUtility.getElementsByTagName(this, tagName);
 	}
 
@@ -839,7 +799,10 @@ export default class Element extends Node implements IElement {
 	 * @param tagName Tag name.
 	 * @returns Matching element.
 	 */
-	public getElementsByTagNameNS(namespaceURI: string, tagName: string): IHTMLCollection<IElement> {
+	public getElementsByTagNameNS(
+		namespaceURI: string,
+		tagName: string
+	): IHTMLCollection<IElement, IElement> {
 		return ParentNodeUtility.getElementsByTagNameNS(this, namespaceURI, tagName);
 	}
 
@@ -868,6 +831,21 @@ export default class Element extends Node implements IElement {
 			this._classList._updateIndices();
 		}
 
+		if (attribute.name === 'id' || attribute.name === 'name') {
+			if (this.parentNode && (<IElement>this.parentNode).children && attribute.value !== oldValue) {
+				if (oldValue) {
+					(<HTMLCollection<IElement, IElement>>(
+						(<IElement>this.parentNode).children
+					))._removeNamedItem(this, oldValue);
+				}
+				if (attribute.value) {
+					(<HTMLCollection<IElement, IElement>>(
+						(<IElement>this.parentNode).children
+					))._appendNamedItem(this, attribute.value);
+				}
+			}
+		}
+
 		if (
 			this.attributeChangedCallback &&
 			(<typeof Element>this.constructor)._observedAttributes &&
@@ -966,6 +944,15 @@ export default class Element extends Node implements IElement {
 			this._classList._updateIndices();
 		}
 
+		if (attribute.name === 'id' || attribute.name === 'name') {
+			if (this.parentNode && (<IElement>this.parentNode).children && attribute.value) {
+				(<HTMLCollection<IElement, IElement>>(<IElement>this.parentNode).children)._removeNamedItem(
+					this,
+					attribute.value
+				);
+			}
+		}
+
 		if (
 			this.attributeChangedCallback &&
 			(<typeof Element>this.constructor)._observedAttributes &&

package/src/nodes/element/ElementUtility.ts

@@ -0,0 +1,137 @@
+import NodeTypeEnum from '../node/NodeTypeEnum';
+import IElement from './IElement';
+import INode from '../node/INode';
+import HTMLCollection from './HTMLCollection';
+import IDocument from '../document/IDocument';
+import IDocumentFragment from '../document-fragment/IDocumentFragment';
+import IHTMLElement from '../html-element/IHTMLElement';
+import Element from './Element';
+
+const NAMED_ITEM_ATTRIBUTES = ['id', 'name'];
+
+/**
+ * Element utility.
+ */
+export default class ElementUtility {
+	/**
+	 * Handles appending a child element to the "children" property.
+	 *
+	 * @param parentElement Parent element.
+	 * @param node Node.
+	 */
+	public static appendChild(
+		parentElement: IElement | IDocument | IDocumentFragment,
+		node: INode
+	): void {
+		if (node.nodeType === NodeTypeEnum.elementNode && node !== parentElement) {
+			if (node.parentNode && (<IHTMLElement>node.parentNode).children) {
+				const index = (<IHTMLElement>node.parentNode).children.indexOf(<IHTMLElement>node);
+				if (index !== -1) {
+					for (const attribute of NAMED_ITEM_ATTRIBUTES) {
+						if ((<Element>node)._attributes[attribute]) {
+							(<HTMLCollection<IHTMLElement, IHTMLElement>>parentElement.children)._removeNamedItem(
+								<IHTMLElement>node,
+								(<Element>node)._attributes[attribute].value
+							);
+						}
+					}
+					(<IHTMLElement>node.parentNode).children.splice(index, 1);
+				}
+			}
+
+			for (const attribute of NAMED_ITEM_ATTRIBUTES) {
+				if ((<Element>node)._attributes[attribute]) {
+					(<HTMLCollection<IHTMLElement, IHTMLElement>>parentElement.children)._appendNamedItem(
+						<IHTMLElement>node,
+						(<Element>node)._attributes[attribute].value
+					);
+				}
+			}
+
+			parentElement.children.push(<IElement>node);
+		}
+	}
+
+	/**
+	 * Handles removing a child element from the "children" property.
+	 *
+	 * @param parentElement Parent element.
+	 * @param node Node.
+	 */
+	public static removeChild(
+		parentElement: IElement | IDocument | IDocumentFragment,
+		node: INode
+	): void {
+		if (node.nodeType === NodeTypeEnum.elementNode) {
+			const index = parentElement.children.indexOf(<IElement>node);
+			if (index !== -1) {
+				for (const attribute of NAMED_ITEM_ATTRIBUTES) {
+					if ((<Element>node)._attributes[attribute]) {
+						(<HTMLCollection<IHTMLElement, IHTMLElement>>parentElement.children)._removeNamedItem(
+							<IHTMLElement>node,
+							(<Element>node)._attributes[attribute].value
+						);
+					}
+				}
+				parentElement.children.splice(index, 1);
+			}
+		}
+	}
+
+	/**
+	 *
+	 * Handles inserting a child element to the "children" property.
+	 *
+	 * @param parentElement Parent element.
+	 * @param newNode
+	 * @param referenceNode
+	 */
+	public static insertBefore(
+		parentElement: IElement | IDocument | IDocumentFragment,
+		newNode: INode,
+		referenceNode: INode | null
+	): void {
+		if (newNode.nodeType === NodeTypeEnum.elementNode) {
+			if (newNode.parentNode && (<IHTMLElement>newNode.parentNode).children) {
+				const index = (<IHTMLElement>newNode.parentNode).children.indexOf(<IHTMLElement>newNode);
+				if (index !== -1) {
+					for (const attribute of NAMED_ITEM_ATTRIBUTES) {
+						if ((<Element>newNode)._attributes[attribute]) {
+							(<HTMLCollection<IHTMLElement, IHTMLElement>>parentElement.children)._removeNamedItem(
+								<IHTMLElement>newNode,
+								(<Element>newNode)._attributes[attribute].value
+							);
+						}
+					}
+				}
+			}
+
+			if (referenceNode) {
+				if (referenceNode.nodeType === NodeTypeEnum.elementNode) {
+					const index = parentElement.children.indexOf(<IElement>referenceNode);
+					if (index !== -1) {
+						parentElement.children.splice(index, 0, <IElement>newNode);
+					}
+				} else {
+					for (const node of parentElement.childNodes) {
+						if (node === referenceNode) {
+							parentElement.children.push(<IElement>newNode);
+						}
+						if (node.nodeType === NodeTypeEnum.elementNode) {
+							parentElement.children.push(<IElement>node);
+						}
+					}
+				}
+
+				for (const attribute of NAMED_ITEM_ATTRIBUTES) {
+					if ((<Element>newNode)._attributes[attribute]) {
+						(<HTMLCollection<IHTMLElement, IHTMLElement>>parentElement.children)._appendNamedItem(
+							<IHTMLElement>newNode,
+							(<Element>newNode)._attributes[attribute].value
+						);
+					}
+				}
+			}
+		}
+	}
+}