happy-dom 10.5.2 → 10.6.0

package/src/nodes/element/ElementNamedNodeMap.ts

@@ -0,0 +1,194 @@
+import NamespaceURI from '../../config/NamespaceURI.js';
+import MutationRecord from '../../mutation-observer/MutationRecord.js';
+import MutationTypeEnum from '../../mutation-observer/MutationTypeEnum.js';
+import NamedNodeMap from '../../named-node-map/NamedNodeMap.js';
+import IAttr from '../attr/IAttr.js';
+import IDocument from '../document/IDocument.js';
+import Element from './Element.js';
+import HTMLCollection from './HTMLCollection.js';
+import IElement from './IElement.js';
+
+/**
+ * Named Node Map.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
+ */
+export default class ElementNamedNodeMap extends NamedNodeMap {
+	protected _ownerElement: Element;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param ownerElement Owner element.
+	 */
+	constructor(ownerElement: Element) {
+		super();
+		this._ownerElement = ownerElement;
+	}
+
+	/**
+	 * @override
+	 */
+	public override getNamedItem(name: string): IAttr | null {
+		return this._namedItems[this._getAttributeName(name)] || null;
+	}
+
+	/**
+	 * @override
+	 */
+	public override getNamedItemNS(namespace: string, localName: string): IAttr | null {
+		return super.getNamedItemNS(namespace, this._getAttributeName(localName));
+	}
+
+	/**
+	 * @override
+	 */
+	public override setNamedItem(item: IAttr): IAttr | null {
+		if (!item.name) {
+			return null;
+		}
+
+		item.name = this._getAttributeName(item.name);
+		(<IElement>item.ownerElement) = this._ownerElement;
+		(<IDocument>item.ownerDocument) = this._ownerElement.ownerDocument;
+
+		const replacedItem = super.setNamedItem(item);
+		const oldValue = replacedItem ? replacedItem.value : null;
+
+		if (this._ownerElement.isConnected) {
+			this._ownerElement.ownerDocument['_cacheID']++;
+		}
+
+		if (item.name === 'class' && this._ownerElement._classList) {
+			this._ownerElement._classList._updateIndices();
+		}
+
+		if (item.name === 'id' || item.name === 'name') {
+			if (
+				this._ownerElement.parentNode &&
+				(<IElement>this._ownerElement.parentNode).children &&
+				item.value !== oldValue
+			) {
+				if (oldValue) {
+					(<HTMLCollection<IElement>>(
+						(<IElement>this._ownerElement.parentNode).children
+					))._removeNamedItem(this._ownerElement, oldValue);
+				}
+				if (item.value) {
+					(<HTMLCollection<IElement>>(
+						(<IElement>this._ownerElement.parentNode).children
+					))._appendNamedItem(this._ownerElement, item.value);
+				}
+			}
+		}
+
+		if (
+			this._ownerElement.attributeChangedCallback &&
+			(<typeof Element>this._ownerElement.constructor)._observedAttributes &&
+			(<typeof Element>this._ownerElement.constructor)._observedAttributes.includes(item.name)
+		) {
+			this._ownerElement.attributeChangedCallback(item.name, oldValue, item.value);
+		}
+
+		// MutationObserver
+		if (this._ownerElement._observers.length > 0) {
+			for (const observer of this._ownerElement._observers) {
+				if (
+					observer.options.attributes &&
+					(!observer.options.attributeFilter ||
+						observer.options.attributeFilter.includes(item.name))
+				) {
+					const record = new MutationRecord();
+					record.target = this._ownerElement;
+					record.type = MutationTypeEnum.attributes;
+					record.attributeName = item.name;
+					record.oldValue = observer.options.attributeOldValue ? oldValue : null;
+					observer.callback([record]);
+				}
+			}
+		}
+
+		return replacedItem || null;
+	}
+
+	/**
+	 * @override
+	 */
+	public override removeNamedItem(name: string): IAttr | null {
+		const removedItem = super.removeNamedItem(this._getAttributeName(name));
+
+		if (!removedItem) {
+			return null;
+		}
+
+		if (this._ownerElement.isConnected) {
+			this._ownerElement.ownerDocument['_cacheID']++;
+		}
+
+		if (removedItem.name === 'class' && this._ownerElement._classList) {
+			this._ownerElement._classList._updateIndices();
+		}
+
+		if (removedItem.name === 'id' || removedItem.name === 'name') {
+			if (
+				this._ownerElement.parentNode &&
+				(<IElement>this._ownerElement.parentNode).children &&
+				removedItem.value
+			) {
+				(<HTMLCollection<IElement>>(
+					(<IElement>this._ownerElement.parentNode).children
+				))._removeNamedItem(this._ownerElement, removedItem.value);
+			}
+		}
+
+		if (
+			this._ownerElement.attributeChangedCallback &&
+			(<typeof Element>this._ownerElement.constructor)._observedAttributes &&
+			(<typeof Element>this._ownerElement.constructor)._observedAttributes.includes(
+				removedItem.name
+			)
+		) {
+			this._ownerElement.attributeChangedCallback(removedItem.name, removedItem.value, null);
+		}
+
+		// MutationObserver
+		if (this._ownerElement._observers.length > 0) {
+			for (const observer of this._ownerElement._observers) {
+				if (
+					observer.options.attributes &&
+					(!observer.options.attributeFilter ||
+						observer.options.attributeFilter.includes(removedItem.name))
+				) {
+					const record = new MutationRecord();
+					record.target = this._ownerElement;
+					record.type = MutationTypeEnum.attributes;
+					record.attributeName = removedItem.name;
+					record.oldValue = observer.options.attributeOldValue ? removedItem.value : null;
+					observer.callback([record]);
+				}
+			}
+		}
+
+		return removedItem;
+	}
+
+	/**
+	 * @override
+	 */
+	public override removeNamedItemNS(namespace: string, localName: string): IAttr | null {
+		return super.removeNamedItemNS(namespace, this._getAttributeName(localName));
+	}
+
+	/**
+	 * Returns attribute name.
+	 *
+	 * @param name Name.
+	 * @returns Attribute name based on namespace.
+	 */
+	protected _getAttributeName(name): string {
+		if (this._ownerElement.namespaceURI === NamespaceURI.svg) {
+			return name;
+		}
+		return name.toLowerCase();
+	}
+}

package/src/nodes/element/ElementUtility.ts

@@ -44,11 +44,12 @@ export default class ElementUtility {
 			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]) {
+					for (const attributeName of NAMED_ITEM_ATTRIBUTES) {
+						const attribute = (<Element>node).attributes.getNamedItem(attributeName);
+						if (attribute) {
 							(<HTMLCollection<IHTMLElement>>(<IElement>node.parentNode).children)._removeNamedItem(
 								<IHTMLElement>node,
-								(<Element>node)._attributes[attribute].value
+								attribute.value
 							);
 						}
 					}
@@ -56,11 +57,12 @@ export default class ElementUtility {
 				}
 			}
 
-			for (const attribute of NAMED_ITEM_ATTRIBUTES) {
-				if ((<Element>node)._attributes[attribute]) {
+			for (const attributeName of NAMED_ITEM_ATTRIBUTES) {
+				const attribute = (<Element>node).attributes.getNamedItem(attributeName);
+				if (attribute) {
 					(<HTMLCollection<IHTMLElement>>ancestorNode.children)._appendNamedItem(
 						<IHTMLElement>node,
-						(<Element>node)._attributes[attribute].value
+						attribute.value
 					);
 				}
 			}
@@ -89,11 +91,12 @@ export default class ElementUtility {
 		if (node.nodeType === NodeTypeEnum.elementNode) {
 			const index = ancestorNode.children.indexOf(<IElement>node);
 			if (index !== -1) {
-				for (const attribute of NAMED_ITEM_ATTRIBUTES) {
-					if ((<Element>node)._attributes[attribute]) {
+				for (const attributeName of NAMED_ITEM_ATTRIBUTES) {
+					const attribute = (<Element>node).attributes.getNamedItem(attributeName);
+					if (attribute) {
 						(<HTMLCollection<IHTMLElement>>ancestorNode.children)._removeNamedItem(
 							<IHTMLElement>node,
-							(<Element>node)._attributes[attribute].value
+							attribute.value
 						);
 					}
 				}
@@ -138,14 +141,12 @@ export default class ElementUtility {
 			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]) {
+					for (const attributeName of NAMED_ITEM_ATTRIBUTES) {
+						const attribute = (<Element>newNode).attributes.getNamedItem(attributeName);
+						if (attribute) {
 							(<HTMLCollection<IHTMLElement>>(
 								(<IElement>newNode.parentNode).children
-							))._removeNamedItem(
-								<IHTMLElement>newNode,
-								(<Element>newNode)._attributes[attribute].value
-							);
+							))._removeNamedItem(<IHTMLElement>newNode, attribute.value);
 						}
 					}
 
@@ -171,11 +172,12 @@ export default class ElementUtility {
 				}
 			}
 
-			for (const attribute of NAMED_ITEM_ATTRIBUTES) {
-				if ((<Element>newNode)._attributes[attribute]) {
+			for (const attributeName of NAMED_ITEM_ATTRIBUTES) {
+				const attribute = (<Element>newNode).attributes.getNamedItem(attributeName);
+				if (attribute) {
 					(<HTMLCollection<IHTMLElement>>ancestorNode.children)._appendNamedItem(
 						<IHTMLElement>newNode,
-						(<Element>newNode)._attributes[attribute].value
+						attribute.value
 					);
 				}
 			}

package/src/nodes/element/IElement.ts

@@ -238,7 +238,7 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	 * @param attribute Attribute.
 	 * @returns Replaced attribute.
 	 */
-	setAttributeNode(attribute: IAttr): IAttr;
+	setAttributeNode(attribute: IAttr): IAttr | null;
 
 	/**
 	 * The setAttributeNodeNS() method adds a new Attr node to the specified element.
@@ -246,7 +246,7 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	 * @param attribute Attribute.
 	 * @returns Replaced attribute.
 	 */
-	setAttributeNodeNS(attribute: IAttr): IAttr;
+	setAttributeNodeNS(attribute: IAttr): IAttr | null;
 
 	/**
 	 * Returns an Attr node.
@@ -254,7 +254,7 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	 * @param name Name.
 	 * @returns Replaced attribute.
 	 */
-	getAttributeNode(name: string): IAttr;
+	getAttributeNode(name: string): IAttr | null;
 
 	/**
 	 * Returns a namespaced Attr node.
@@ -263,7 +263,7 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	 * @param nodeName Node name.
 	 * @returns Replaced attribute.
 	 */
-	getAttributeNodeNS(namespace: string | null, nodeName: string): IAttr;
+	getAttributeNodeNS(namespace: string | null, nodeName: string): IAttr | null;
 
 	/**
 	 * Removes an Attr node.
@@ -279,7 +279,7 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	 * @param attribute Attribute.
 	 * @returns Removed attribute.
 	 */
-	removeAttributeNodeNS(attribute: IAttr): IAttr;
+	removeAttributeNodeNS(attribute: IAttr): IAttr | null;
 
 	/**
 	 * Clones a node.

package/src/nodes/html-anchor-element/HTMLAnchorElement.ts

@@ -3,8 +3,9 @@ import DOMTokenList from '../../dom-token-list/DOMTokenList.js';
 import IDOMTokenList from '../../dom-token-list/IDOMTokenList.js';
 import IHTMLAnchorElement from './IHTMLAnchorElement.js';
 import { URL } from 'url';
-import IAttr from '../attr/IAttr.js';
 import HTMLAnchorElementUtility from './HTMLAnchorElementUtility.js';
+import INamedNodeMap from '../../named-node-map/INamedNodeMap.js';
+import HTMLAnchorElementNamedNodeMap from './HTMLAnchorElementNamedNodeMap.js';
 
 /**
  * HTML Anchor Element.
@@ -13,8 +14,9 @@ import HTMLAnchorElementUtility from './HTMLAnchorElementUtility.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement.
  */
 export default class HTMLAnchorElement extends HTMLElement implements IHTMLAnchorElement {
-	private _relList: DOMTokenList = null;
-	private _url: URL | null = null;
+	public override readonly attributes: INamedNodeMap = new HTMLAnchorElementNamedNodeMap(this);
+	public _relList: DOMTokenList = null;
+	public _url: URL | null = null;
 
 	/**
 	 * Returns download.
@@ -413,34 +415,4 @@ export default class HTMLAnchorElement extends HTMLElement implements IHTMLAncho
 	public override toString(): string {
 		return this.href;
 	}
-
-	/**
-	 * @override
-	 */
-	public override setAttributeNode(attribute: IAttr): IAttr | null {
-		const replacedAttribute = super.setAttributeNode(attribute);
-
-		if (attribute.name === 'rel' && this._relList) {
-			this._relList._updateIndices();
-		} else if (attribute.name === 'href') {
-			this._url = HTMLAnchorElementUtility.getUrl(this.ownerDocument, attribute.value);
-		}
-
-		return replacedAttribute;
-	}
-
-	/**
-	 * @override
-	 */
-	public override removeAttributeNode(attribute: IAttr): IAttr {
-		super.removeAttributeNode(attribute);
-
-		if (attribute.name === 'rel' && this._relList) {
-			this._relList._updateIndices();
-		} else if (attribute.name === 'href') {
-			this._url = null;
-		}
-
-		return attribute;
-	}
 }

package/src/nodes/html-anchor-element/HTMLAnchorElementNamedNodeMap.ts

@@ -0,0 +1,48 @@
+import IAttr from '../attr/IAttr.js';
+import HTMLElementNamedNodeMap from '../html-element/HTMLElementNamedNodeMap.js';
+import HTMLAnchorElement from './HTMLAnchorElement.js';
+import HTMLAnchorElementUtility from './HTMLAnchorElementUtility.js';
+
+/**
+ * Named Node Map.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
+ */
+export default class HTMLAnchorElementNamedNodeMap extends HTMLElementNamedNodeMap {
+	protected _ownerElement: HTMLAnchorElement;
+
+	/**
+	 * @override
+	 */
+	public override setNamedItem(item: IAttr): IAttr | null {
+		const replacedItem = super.setNamedItem(item);
+
+		if (item.name === 'rel' && this._ownerElement._relList) {
+			this._ownerElement._relList._updateIndices();
+		} else if (item.name === 'href') {
+			this._ownerElement._url = HTMLAnchorElementUtility.getUrl(
+				this._ownerElement.ownerDocument,
+				item.value
+			);
+		}
+
+		return replacedItem || null;
+	}
+
+	/**
+	 * @override
+	 */
+	public override removeNamedItem(name: string): IAttr | null {
+		const removedItem = super.removeNamedItem(name);
+
+		if (removedItem) {
+			if (removedItem.name === 'rel' && this._ownerElement._relList) {
+				this._ownerElement._relList._updateIndices();
+			} else if (removedItem.name === 'href') {
+				this._ownerElement._url = null;
+			}
+		}
+
+		return removedItem;
+	}
+}

package/src/nodes/html-button-element/HTMLButtonElement.ts

@@ -1,7 +1,7 @@
 import Event from '../../event/Event.js';
 import EventPhaseEnum from '../../event/EventPhaseEnum.js';
+import INamedNodeMap from '../../named-node-map/INamedNodeMap.js';
 import ValidityState from '../../validity-state/ValidityState.js';
-import IAttr from '../attr/IAttr.js';
 import IDocument from '../document/IDocument.js';
 import HTMLElement from '../html-element/HTMLElement.js';
 import HTMLFormElement from '../html-form-element/HTMLFormElement.js';
@@ -11,6 +11,7 @@ import INode from '../node/INode.js';
 import INodeList from '../node/INodeList.js';
 import NodeList from '../node/NodeList.js';
 import IShadowRoot from '../shadow-root/IShadowRoot.js';
+import HTMLButtonElementNamedNodeMap from './HTMLButtonElementNamedNodeMap.js';
 import IHTMLButtonElement from './IHTMLButtonElement.js';
 
 const BUTTON_TYPES = ['submit', 'reset', 'button', 'menu'];
@@ -22,6 +23,7 @@ const BUTTON_TYPES = ['submit', 'reset', 'button', 'menu'];
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement.
  */
 export default class HTMLButtonElement extends HTMLElement implements IHTMLButtonElement {
+	public override readonly attributes: INamedNodeMap = new HTMLButtonElementNamedNodeMap(this);
 	public readonly validationMessage = '';
 	public readonly validity = new ValidityState(this);
 
@@ -238,38 +240,6 @@ export default class HTMLButtonElement extends HTMLElement implements IHTMLButto
 		return returnValue;
 	}
 
-	/**
-	 * @override
-	 */
-	public override setAttributeNode(attribute: IAttr): IAttr | null {
-		const replacedAttribute = super.setAttributeNode(attribute);
-		const oldValue = replacedAttribute ? replacedAttribute.value : null;
-
-		if ((attribute.name === 'id' || attribute.name === 'name') && this._formNode) {
-			if (oldValue) {
-				(<HTMLFormElement>this._formNode)._removeFormControlItem(this, oldValue);
-			}
-			if (attribute.value) {
-				(<HTMLFormElement>this._formNode)._appendFormControlItem(this, attribute.value);
-			}
-		}
-
-		return replacedAttribute;
-	}
-
-	/**
-	 * @override
-	 */
-	public override removeAttributeNode(attribute: IAttr): IAttr {
-		super.removeAttributeNode(attribute);
-
-		if ((attribute.name === 'id' || attribute.name === 'name') && this._formNode) {
-			(<HTMLFormElement>this._formNode)._removeFormControlItem(this, attribute.value);
-		}
-
-		return attribute;
-	}
-
 	/**
 	 * @override
 	 */

package/src/nodes/html-button-element/HTMLButtonElementNamedNodeMap.ts

@@ -0,0 +1,56 @@
+import IAttr from '../attr/IAttr.js';
+import HTMLElementNamedNodeMap from '../html-element/HTMLElementNamedNodeMap.js';
+import HTMLFormElement from '../html-form-element/HTMLFormElement.js';
+import HTMLButtonElement from './HTMLButtonElement.js';
+
+/**
+ * Named Node Map.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
+ */
+export default class HTMLButtonElementNamedNodeMap extends HTMLElementNamedNodeMap {
+	protected _ownerElement: HTMLButtonElement;
+
+	/**
+	 * @override
+	 */
+	public override setNamedItem(item: IAttr): IAttr | null {
+		const replacedItem = super.setNamedItem(item);
+
+		if ((item.name === 'id' || item.name === 'name') && this._ownerElement._formNode) {
+			if (replacedItem?.value) {
+				(<HTMLFormElement>this._ownerElement._formNode)._removeFormControlItem(
+					this._ownerElement,
+					replacedItem.value
+				);
+			}
+			if (item.value) {
+				(<HTMLFormElement>this._ownerElement._formNode)._appendFormControlItem(
+					this._ownerElement,
+					item.value
+				);
+			}
+		}
+
+		return replacedItem || null;
+	}
+
+	/**
+	 * @override
+	 */
+	public override removeNamedItem(name: string): IAttr | null {
+		const removedItem = super.removeNamedItem(name);
+
+		if (
+			(removedItem.name === 'id' || removedItem.name === 'name') &&
+			this._ownerElement._formNode
+		) {
+			(<HTMLFormElement>this._ownerElement._formNode)._removeFormControlItem(
+				this._ownerElement,
+				removedItem.value
+			);
+		}
+
+		return removedItem;
+	}
+}

package/src/nodes/html-element/HTMLElement.ts

@@ -1,13 +1,14 @@
 import Element from '../element/Element.js';
 import IHTMLElement from './IHTMLElement.js';
 import CSSStyleDeclaration from '../../css/declaration/CSSStyleDeclaration.js';
-import IAttr from '../attr/IAttr.js';
 import PointerEvent from '../../event/events/PointerEvent.js';
 import Dataset from '../element/Dataset.js';
 import NodeTypeEnum from '../node/NodeTypeEnum.js';
 import DOMException from '../../exception/DOMException.js';
 import Event from '../../event/Event.js';
 import HTMLElementUtility from './HTMLElementUtility.js';
+import INamedNodeMap from '../../named-node-map/INamedNodeMap.js';
+import HTMLElementNamedNodeMap from './HTMLElementNamedNodeMap.js';
 
 /**
  * HTML Element.
@@ -16,6 +17,7 @@ import HTMLElementUtility from './HTMLElementUtility.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.
  */
 export default class HTMLElement extends Element implements IHTMLElement {
+	public override readonly attributes: INamedNodeMap = new HTMLElementNamedNodeMap(this);
 	public readonly accessKey = '';
 	public readonly accessKeyLabel = '';
 	public readonly contentEditable = 'inherit';
@@ -27,7 +29,7 @@ export default class HTMLElement extends Element implements IHTMLElement {
 	public readonly clientHeight = 0;
 	public readonly clientWidth = 0;
 
-	private _style: CSSStyleDeclaration = null;
+	public _style: CSSStyleDeclaration = null;
 	private _dataset: Dataset = null;
 
 	// Events
@@ -322,32 +324,6 @@ export default class HTMLElement extends Element implements IHTMLElement {
 		HTMLElementUtility.focus(this);
 	}
 
-	/**
-	 * @override
-	 */
-	public setAttributeNode(attribute: IAttr): IAttr | null {
-		const replacedAttribute = super.setAttributeNode(attribute);
-
-		if (attribute.name === 'style' && this._style) {
-			this._style.cssText = attribute.value;
-		}
-
-		return replacedAttribute;
-	}
-
-	/**
-	 * @override
-	 */
-	public removeAttributeNode(attribute: IAttr): IAttr {
-		super.removeAttributeNode(attribute);
-
-		if (attribute.name === 'style' && this._style) {
-			this._style.cssText = '';
-		}
-
-		return attribute;
-	}
-
 	/**
 	 * @override
 	 */

package/src/nodes/html-element/HTMLElementNamedNodeMap.ts

@@ -0,0 +1,38 @@
+import IAttr from '../attr/IAttr.js';
+import ElementNamedNodeMap from '../element/ElementNamedNodeMap.js';
+import HTMLElement from './HTMLElement.js';
+
+/**
+ * Named Node Map.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap
+ */
+export default class HTMLElementNamedNodeMap extends ElementNamedNodeMap {
+	protected _ownerElement: HTMLElement;
+
+	/**
+	 * @override
+	 */
+	public override setNamedItem(item: IAttr): IAttr | null {
+		const replacedItem = super.setNamedItem(item);
+
+		if (item.name === 'style' && this._ownerElement._style) {
+			this._ownerElement._style.cssText = item.value;
+		}
+
+		return replacedItem || null;
+	}
+
+	/**
+	 * @override
+	 */
+	public override removeNamedItem(name: string): IAttr | null {
+		const removedItem = super.removeNamedItem(name);
+
+		if (removedItem && removedItem.name === 'style' && this._ownerElement._style) {
+			this._ownerElement._style.cssText = '';
+		}
+
+		return removedItem;
+	}
+}

package/src/nodes/html-iframe-element/HTMLIFrameElement.ts

@@ -6,7 +6,8 @@ import INode from '../node/INode.js';
 import IFrameCrossOriginWindow from './IFrameCrossOriginWindow.js';
 import IHTMLIFrameElement from './IHTMLIFrameElement.js';
 import HTMLIFrameUtility from './HTMLIFrameUtility.js';
-import IAttr from '../attr/IAttr.js';
+import INamedNodeMap from '../../named-node-map/INamedNodeMap.js';
+import HTMLIFrameElementNamedNodeMap from './HTMLIFrameElementNamedNodeMap.js';
 
 /**
  * HTML Iframe Element.
@@ -15,6 +16,8 @@ import IAttr from '../attr/IAttr.js';
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement.
  */
 export default class HTMLIFrameElement extends HTMLElement implements IHTMLIFrameElement {
+	public override readonly attributes: INamedNodeMap = new HTMLIFrameElementNamedNodeMap(this);
+
 	// Events
 	public onload: (event: Event) => void | null = null;
 	public onerror: (event: Event) => void | null = null;
@@ -180,23 +183,6 @@ export default class HTMLIFrameElement extends HTMLElement implements IHTMLIFram
 		}
 	}
 
-	/**
-	 * @override
-	 */
-	public override setAttributeNode(attribute: IAttr): IAttr | null {
-		const replacedAttribute = super.setAttributeNode(attribute);
-
-		if (
-			attribute.name === 'src' &&
-			attribute.value &&
-			attribute.value !== replacedAttribute?.value
-		) {
-			HTMLIFrameUtility.loadPage(this);
-		}
-
-		return replacedAttribute;
-	}
-
 	/**
 	 * Clones a node.
 	 *