This represents the structure of the HTMLElement interface:
interface HTMLElement extends Element, DocumentAndElementEventHandlers, ElementCSSInlineStyle, ElementContentEditable, GlobalEventHandlers, HTMLOrSVGElement {
accessKey: string;
readonly accessKeyLabel: string;
autocapitalize: string;
dir: string;
draggable: boolean;
hidden: boolean;
innerText: string;
lang: string;
readonly offsetHeight: number;
readonly offsetLeft: number;
readonly offsetParent: Element | null;
readonly offsetTop: number;
readonly offsetWidth: number;
spellcheck: boolean;
title: string;
translate: boolean;
click(): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
In this code snippet, there is no mention of the property href.
To access the href, you need to utilize the HTMLAnchorElement interface (assuming you are working with an <a>
HTML tag).
Although HTMLAnchorElement itself does not contain the href property, it inherits it from the HTMLHyperlinkElementUtils interface as shown below:
interface HTMLHyperlinkElementUtils {
hash: string;
host: string;
hostname: string;
href: string; // This is where the href property is defined
toString(): string;
readonly origin: string;
password: string;
pathname: string;
port: string;
protocol: string;
search: string;
username: string;
}
It's important to note that not every HTML element includes the href attribute.
I assumed you were working with an anchor tag in my explanation.
However, elements like <a>, <link>, <area>, and <base> may have the href property, each requiring a specific interface such as HTMLAnchorElement, HTMLLinkElement, HTMLAreaElement, or HTMLBaseElement.