diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 6eb41dca344724e..3cb72277c261be4 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -7948,6 +7948,18 @@ /en-US/docs/Web/API/HTMLFrameSetElement/onpopstate /en-US/docs/Web/API/WindowEventHandlers/onpopstate /en-US/docs/Web/API/HTMLFrameSetElement/onunload /en-US/docs/Web/API/WindowEventHandlers/onunload /en-US/docs/Web/API/HTMLHTMLElement.version /en-US/docs/Web/API/HTMLHtmlElement/version +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash /en-US/docs/Web/API/HTMLAnchorElement/hash +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/host /en-US/docs/Web/API/HTMLAnchorElement/host +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hostname /en-US/docs/Web/API/HTMLAnchorElement/hostname +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/href /en-US/docs/Web/API/HTMLAnchorElement/href +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin /en-US/docs/Web/API/HTMLAnchorElement/origin +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password /en-US/docs/Web/API/HTMLAnchorElement/password +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname /en-US/docs/Web/API/HTMLAnchorElement/pathname +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/port /en-US/docs/Web/API/HTMLAnchorElement/port +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/protocol /en-US/docs/Web/API/HTMLAnchorElement/protocol +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search /en-US/docs/Web/API/HTMLAnchorElement/search +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/toString /en-US/docs/Web/API/HTMLAnchorElement/toString +/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username /en-US/docs/Web/API/HTMLAnchorElement/username /en-US/docs/Web/API/HTMLIFrameElement.contentWindow /en-US/docs/Web/API/HTMLIFrameElement/contentWindow /en-US/docs/Web/API/HTMLIFrameElement/referrer /en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy /en-US/docs/Web/API/HTMLIFrameElement/setNfcFocus /en-US/docs/Web/API/HTMLIFrameElement diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 98195ab18253811..ab729a07f3706b4 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -55739,215 +55739,6 @@ "ThomasACorey" ] }, - "Web/API/HTMLHyperlinkElementUtils": { - "modified": "2020-11-13T08:35:00.542Z", - "contributors": [ - "Rumyra", - "chrisdavidmills", - "Wind1808", - "connorshea", - "fscholz", - "myf", - "RayannTedds", - "ricea", - "jpmedley", - "teoli", - "cvrebert", - "baku", - "Bzbarsky", - "Annevk" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/hash": { - "modified": "2020-10-15T21:24:52.659Z", - "contributors": [ - "Wind1808", - "sjfortin", - "Tigt", - "fscholz", - "SLYJason", - "lmika", - "jpmedley", - "libbymc", - "HassenPy", - "teoli", - "azasypkin", - "Sebastianz", - "chrisdavidmills", - "kohei.yoshino", - "vishu_gawli" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/host": { - "modified": "2020-10-15T21:24:52.503Z", - "contributors": [ - "Wind1808", - "fscholz", - "lap00zza", - "jpmedley", - "libbymc", - "teoli", - "Sebastianz", - "chrisdavidmills", - "cvrebert", - "mbudde", - "Bzbarsky", - "mattbasta", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/hostname": { - "modified": "2020-10-15T21:24:52.580Z", - "contributors": [ - "CarstenDeyl", - "Wind1808", - "fscholz", - "tyoshino", - "jpmedley", - "libbymc", - "teoli", - "chrisdavidmills", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/href": { - "modified": "2020-10-15T21:24:52.508Z", - "contributors": [ - "chrisdavidmills", - "Wind1808", - "alattalatta", - "fscholz", - "jpmedley", - "libbymc", - "nufercle", - "Sheppy", - "teoli", - "Sebastianz", - "kscarfone", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/origin": { - "modified": "2020-10-15T21:24:54.809Z", - "contributors": [ - "sideshowbarker", - "fscholz", - "jpmedley", - "libbymc", - "teoli", - "claudepache", - "chrisdavidmills", - "cvrebert", - "poke", - "jonathanKingston", - "ziyunfei", - "Korikulum", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/password": { - "modified": "2020-10-15T21:24:54.829Z", - "contributors": [ - "fscholz", - "sideshowbarker", - "jpmedley", - "Tigt", - "teoli", - "chrisdavidmills", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/pathname": { - "modified": "2020-11-13T08:38:15.177Z", - "contributors": [ - "Rumyra", - "Brettz9", - "fscholz", - "johnjacobkenny", - "erikadoyle", - "chrisdavidmills", - "jpmedley", - "libbymc", - "teoli", - "klusark", - "fusionchess", - "mturnwall", - "Kartik_Chadha", - "mikemcg" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/port": { - "modified": "2020-10-15T21:24:52.528Z", - "contributors": [ - "Wind1808", - "fscholz", - "adambrenecki", - "erikadoyle", - "jpmedley", - "libbymc", - "teoli", - "chrisdavidmills", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/protocol": { - "modified": "2020-10-15T21:24:52.609Z", - "contributors": [ - "Wind1808", - "epascarello", - "fscholz", - "erikadoyle", - "jpmedley", - "libbymc", - "teoli", - "chrisdavidmills", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/search": { - "modified": "2020-10-15T21:24:52.537Z", - "contributors": [ - "Wind1808", - "mfluehr", - "BuonOmo", - "fscholz", - "Jonathan_Watt", - "chrisdavidmills", - "jpmedley", - "AndySky21", - "libbymc", - "teoli", - "jsx", - "madarche", - "fusionchess", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/toString": { - "modified": "2020-10-15T21:24:54.612Z", - "contributors": [ - "sideshowbarker", - "fscholz", - "jpmedley", - "libbymc", - "nufercle", - "Sheppy", - "teoli", - "chrisdavidmills", - "Kartik_Chadha" - ] - }, - "Web/API/HTMLHyperlinkElementUtils/username": { - "modified": "2020-10-15T21:24:54.543Z", - "contributors": [ - "Wind1808", - "fscholz", - "jpmedley", - "teoli", - "chrisdavidmills", - "Kartik_Chadha" - ] - }, "Web/API/HTMLIFrameElement": { "modified": "2020-10-15T21:07:37.626Z", "contributors": [ @@ -165915,10 +165706,200 @@ "groovecoder" ] }, + "Web/API/HTMLAnchorElement/hash": { + "modified": "2020-10-15T21:24:52.659Z", + "contributors": [ + "Wind1808", + "sjfortin", + "Tigt", + "fscholz", + "SLYJason", + "lmika", + "jpmedley", + "libbymc", + "HassenPy", + "teoli", + "azasypkin", + "Sebastianz", + "chrisdavidmills", + "kohei.yoshino", + "vishu_gawli" + ] + }, + "Web/API/HTMLAnchorElement/href": { + "modified": "2020-10-15T21:24:52.508Z", + "contributors": [ + "chrisdavidmills", + "Wind1808", + "alattalatta", + "fscholz", + "jpmedley", + "libbymc", + "nufercle", + "Sheppy", + "teoli", + "Sebastianz", + "kscarfone", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/protocol": { + "modified": "2020-10-15T21:24:52.609Z", + "contributors": [ + "Wind1808", + "epascarello", + "fscholz", + "erikadoyle", + "jpmedley", + "libbymc", + "teoli", + "chrisdavidmills", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/host": { + "modified": "2020-10-15T21:24:52.503Z", + "contributors": [ + "Wind1808", + "fscholz", + "lap00zza", + "jpmedley", + "libbymc", + "teoli", + "Sebastianz", + "chrisdavidmills", + "cvrebert", + "mbudde", + "Bzbarsky", + "mattbasta", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/hostname": { + "modified": "2020-10-15T21:24:52.580Z", + "contributors": [ + "CarstenDeyl", + "Wind1808", + "fscholz", + "tyoshino", + "jpmedley", + "libbymc", + "teoli", + "chrisdavidmills", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/port": { + "modified": "2020-10-15T21:24:52.528Z", + "contributors": [ + "Wind1808", + "fscholz", + "adambrenecki", + "erikadoyle", + "jpmedley", + "libbymc", + "teoli", + "chrisdavidmills", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/pathname": { + "modified": "2020-11-13T08:38:15.177Z", + "contributors": [ + "Rumyra", + "Brettz9", + "fscholz", + "johnjacobkenny", + "erikadoyle", + "chrisdavidmills", + "jpmedley", + "libbymc", + "teoli", + "klusark", + "fusionchess", + "mturnwall", + "Kartik_Chadha", + "mikemcg" + ] + }, + "Web/API/HTMLAnchorElement/search": { + "modified": "2020-10-15T21:24:52.537Z", + "contributors": [ + "Wind1808", + "mfluehr", + "BuonOmo", + "fscholz", + "Jonathan_Watt", + "chrisdavidmills", + "jpmedley", + "AndySky21", + "libbymc", + "teoli", + "jsx", + "madarche", + "fusionchess", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/username": { + "modified": "2020-10-15T21:24:54.543Z", + "contributors": [ + "Wind1808", + "fscholz", + "jpmedley", + "teoli", + "chrisdavidmills", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/password": { + "modified": "2020-10-15T21:24:54.829Z", + "contributors": [ + "fscholz", + "sideshowbarker", + "jpmedley", + "Tigt", + "teoli", + "chrisdavidmills", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/origin": { + "modified": "2020-10-15T21:24:54.809Z", + "contributors": [ + "sideshowbarker", + "fscholz", + "jpmedley", + "libbymc", + "teoli", + "claudepache", + "chrisdavidmills", + "cvrebert", + "poke", + "jonathanKingston", + "ziyunfei", + "Korikulum", + "Kartik_Chadha" + ] + }, + "Web/API/HTMLAnchorElement/toString": { + "modified": "2020-10-15T21:24:54.612Z", + "contributors": [ + "sideshowbarker", + "fscholz", + "jpmedley", + "libbymc", + "nufercle", + "Sheppy", + "teoli", + "chrisdavidmills", + "Kartik_Chadha" + ] + }, "Web/API/Element/assignedSlot": { "modified": "2020-10-15T22:30:57.859Z", "contributors": [ "sideshowbarker" ] } -} \ No newline at end of file +} diff --git a/files/en-us/web/api/htmlanchorelement/hash/index.html b/files/en-us/web/api/htmlanchorelement/hash/index.html new file mode 100644 index 000000000000000..7eea813ab05ea99 --- /dev/null +++ b/files/en-us/web/api/htmlanchorelement/hash/index.html @@ -0,0 +1,68 @@ +--- +title: HTMLAnchorElement.hash +slug: Web/API/HTMLAnchorElement/hash +tags: + - API + - HTMLAnchorElement + - Property + - Reference +--- +
The
+ HTMLAnchorElement.hash
property returns a
+ {{domxref("USVString")}} containing a '#'
followed by the fragment
+ identifier of the URL.
The fragment is not percent-decoded. If the URL does not
+ have a fragment identifier, this property contains an empty string, ""
.
+// Getter +string = anchor.hash; +// Setter +anchor.hash = string; ++ +
+<a id="myAnchor" href="/en-US/docs/HTMLAnchorElement#Examples">Examples</a> ++ +you can get the hash of the anchor like this: + +
+const anchor = document.getElementById("myAnchor"); +anchor.hash; // returns '#Examples' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-hash','HTMLHyperlinkElementUtils.hash')}} | +
{{Compat("api.HTMLAnchorElement.hash")}}
+ +The HTMLAnchorElement.host
property is a
+ {{domxref("USVString")}} containing the host, that is the hostname, and then,
+ if the port of the URL is nonempty, a ':'
, and the port
+ of the URL.
+// Getter +string = anchor.host; +// Setter +anchor.host = string; ++ +
const anchor = document.createElement("a"); + +anchor.href = "https://developer.mozilla.org/en-US/HTMLAnchorElement" +anchor.host == "developer.mozilla.org" + +anchor.href = "https://developer.mozilla.org:443/en-US/HTMLAnchorElement" +anchor.host == "developer.mozilla.org" +// The port number is not included because 443 is the scheme's default port + +anchor.href = "https://developer.mozilla.org:4097/en-US/HTMLAnchorElement" +anchor.host == "developer.mozilla.org:4097" ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-host','HTMLHyperlinkElementUtils.host')}} | +
{{Compat("api.HTMLAnchorElement.host")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAnchorElement.hostname
property is a
+ {{domxref("USVString")}} containing the domain of the URL.
+// Getter +string = anchor.hostname; +// Setter +anchor.hostname = string; ++ +
// An <a id="myAnchor" href="/en-US/docs/HTMLAnchorElement"> element is in the document +const anchor = document.getElementById("myAnchor"); +anchor.hostname; // returns 'developer.mozilla.org'+ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-hostname','HTMLHyperlinkElementUtils.hostname')}} | +
{{Compat("api.HTMLAnchorElement.hostname")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAnchorElement.href
property is a
+ stringifier that returns a {{domxref("USVString")}} containing the whole URL, and allows
+ the href to be updated.
+// Getter +string = anchor.href; +// Setter +anchor.href = string; ++ +
// An <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLAnchorElement"> element is in the document +const anchor = document.getElementById("myAnchor"); +anchor.href; // returns 'https://developer.mozilla.org/en-US/HTMLAnchorElement' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-href','HTMLHyperlinkElementUtils.href')}} | +
{{Compat("api.HTMLAnchorElement.href")}}
+ +Inherits properties from its parent, {{domxref("HTMLElement")}}, and implements those from {{domxref("HTMLHyperlinkElementUtils")}}.
+Inherits properties from its parent, {{domxref("HTMLElement")}}.
#
'), if any, in the referenced URL.'/'
followed by the path of the URL, not including the query string or fragment.:
'), of the referenced URL.?
'), if any, of the referenced URL.long
containing the position of the element in the tabbing navigation order for the current document.Inherits methods from its parent, {{domxref("HTMLElement")}}, and implements those from {{domxref("HTMLHyperlinkElementUtils")}}.
+Inherits methods from its parent, {{domxref("HTMLElement")}}.
The blur()
and focus()
methods are inherited from {{domxref("HTMLElement")}} from HTML5 on, but were defined on HTMLAnchorElement
in DOM Level 2 HTML and earlier specifications.
download
.host
, hostname
, pathname
, port
, protocol
, search
, and hash
, have been moved to the {{domxref("HTMLHyperlinkElementUtils")}} mixin, and HTMLAnchorElement
implements this mixin.blur()
and focus()
, as well as the properties tabindex
and accessKey
, are now defined on {{domxref("HTMLElement")}}.charset
, coords
, name
, rev
, and shape
.hash
, host
, hostname
, pathname
, port
, protocol
, relList
, search
, and text
.{{Compat("api.HTMLAnchorElement")}}
{{APIRef("URL API")}}
+{{APIRef("HTML DOM")}}
The
- HTMLHyperlinkElementUtils.origin
read-only property is a
+ HTMLAnchorElement.origin
read-only property is a
{{domxref("USVString")}} containing the Unicode serialization of the origin of the
represented URL; that is:
"https://mozilla.org".
-{{AvailableInWorkers}}
-string = object.origin; ++// Getter +string = anchor.origin; + +// No setter; read-only propertyExamples
-// On this page, returns the origin -var result = window.location.origin; // Returns:'https://developer.mozilla.org' + +// An <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLAnchorElement"> element is in the document +const anchor = document.getElementById("myAnchor"); +anchor.origin; // returns 'https://developer.mozilla.org'Specifications
@@ -47,24 +49,19 @@Specifications
Specification -Status -Comment - {{SpecName('HTML WHATWG', '#dom-hyperlink-origin', - 'HTMLHyperlinkElementUtils.origin')}} -{{Spec2('HTML WHATWG')}} -Initial definition. +{{SpecName('HTML WHATWG', '#dom-hyperlink-origin','HTMLHyperlinkElementUtils.origin')}} Browser compatibility
-{{Compat("api.HTMLHyperlinkElementUtils.origin")}}
+{{Compat("api.HTMLAnchorElement.origin")}}
See also
{{ApiRef("HTML DOM")}}
+ +The HTMLAnchorElement.password
property is a
+ {{domxref("USVString")}} containing the password specified before the domain name.
If it is set without first setting the
+ username
+ property, it silently fails.
+// Getter +string = anchor.password; +// Setter +anchor.password = string; ++ +
// An <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAnchorElement"> is in the document +const anchor = document.getElementByID("myAnchor"); +anchor.password; // returns 'flabada' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-password','HTMLHyperlinkElementUtils.password')}} | +
{{Compat("api.HTMLAnchorElement.password")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAnchorElement.pathname
property is a
+ {{domxref("USVString")}} containing an initial '/'
followed by the path of
+ the URL not including the query string or fragment (or the empty string if there is no
+ path).
+// Getter +string = anchor.pathname; +// Setter +anchor.pathname = string; ++ +
// An <a id="myAnchor" href="/en-US/docs/HTMLAnchorElement"> element is in the document +const anchor = document.getElementById("myAnchor"); +anchor.pathname; // returns '/en-US/docs/HTMLAnchorElement' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-pathname','HTMLHyperlinkElementUtils.pathname')}} | +
{{Compat("api.HTMLAnchorElement.pathname")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAnchorElement.port
property is a
+ {{domxref("USVString")}} containing the port number of the URL. If the URL does not
+ contain an explicit port number, it will be set to ''
.
+// Getter +string = anchor.port; +// Setter +anchor.port = string; ++ +
// An <a id="myAnchor" href="https://developer.mozilla.org:443/en-US/docs/HTMLAnchorElement"> element is in the document +const anchor = document.getElementByID("myAnchor"); +anchor.port; // returns '443' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-port','HTMLHyperlinkElementUtils.port')}} | +
{{Compat("api.HTMLAnchorElement.port")}}
+ +{{ApiRef("HTML DOM")}}
+ +The
+ HTMLAnchorElement.protocol
+ property is a {{domxref("USVString")}} representing the protocol scheme of the URL,
+ including the final ':'
.
+// Getter +string = anchor.protocol; +// Setter +anchor.protocol = string; ++ +
// An <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLAnchorElement"> element is in the document +const anchor = document.getElementById("myAnchor"); +anchor.protocol; // returns 'https:' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol','HTMLHyperlinkElementUtils.protocol')}} | +
{{Compat("api.HTMLAnchorElement.protocol")}}
+ +The HTMLAnchorElement.search
property is a search
+ string, also called a query string, that is {{domxref("USVString")}} containing
+ a '?'
followed by the parameters of the URL.
Modern browsers provide
+ URLSearchParams
+ and
+ URL.searchParams
+ to make it easy to parse out the parameters from the querystring.
+// Getter +string = anchor.search; +// Setter +anchor.search = string; ++ +
// An <a id="myAnchor" href="/en-US/docs/HTMLAnchorElement?q=123"> element is in the document +const anchor = document.getElementById("myAnchor"); +anchor.search; // returns '?q=123' ++ +
URLSearchParams
can be used:
++let params = new URLSearchParams(queryString); +let q = parseInt(params.get("q"); // returns the number 123 ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-search','HTMLHyperlinkElementUtils.search')}} | +
{{Compat("api.HTMLAnchorElement.search")}}
+ +{{ApiRef("URL API")}}
+ +The HTMLAnchorElement.toString()
stringifier
+ method returns a {{domxref("USVString")}} containing the whole URL. It is a read-only
+ version of {{domxref("HTMLAnchorElement.href")}}.
anchor.toString();+ +
// An <a id="myAnchor" href="/en-US/docs/HTMLAnchorElement"> element is in the document +const anchor = document.getElementById("myAnchor"); +anchor.toString(); // returns 'https://developer.mozilla.org/en-US/docs/HTMLAnchorElement' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', "#dom-hyperlink-href", 'HTMLHyperlinkElementUtils.href')}} | +
{{Compat("api.HTMLAnchorElement.toString")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAnchorElement.username
property is a
+ {{domxref("USVString")}} containing the username specified before the domain name.
+// Getter +string = anchor.username; +// Setter +anchor.username = string; ++ +
// An <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAnchorElement"> element is in the document +const anchor = document.getElementByID("myAnchor"); +anchor.username; // returns 'anonymous' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-username','HTMLHyperlinkElementUtils.username')}} | +
{{Compat("api.HTMLAnchorElement.username")}}
+ +The
+ HTMLAreaElement.hash
property returns a
+ {{domxref("USVString")}} containing a '#'
followed by the fragment
+ identifier of the URL.
The fragment is not percent-decoded. If the URL does not
+ have a fragment identifier, this property contains an empty string, ""
.
+// Getter +string = area.hash; +// Setter +area.hash = string; ++ +
+<map name="infographic"> + <area id="mdn-circle" shape="circle" coords="130,136,60" + href="https://developer.mozilla.org/#ExampleSection" alt="MDN" /> +</map> + +<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" /> ++ +you can get the hash of the area link like this: + +
+const area = document.getElementById("mdn-circle"); +area.hash; // returns '#ExampleSection' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-hash','HTMLHyperlinkElementUtils.hash')}} | +
{{Compat("api.HTMLAreaElement.hash")}}
+ +The HTMLAreaElement.host
property is a
+ {{domxref("USVString")}} containing the host, that is the hostname, and then,
+ if the port of the URL is nonempty, a ':'
, and the port
+ of the URL.
+// Getter +string = area.host; +// Setter +area.host = string; ++ +
const area = document.createElement("area"); + +area.href = "https://developer.mozilla.org/en-US/HTMLAreaElement" +area.host == "developer.mozilla.org" + +area.href = "https://developer.mozilla.org:443/en-US/HTMLAreaElement" +area.host == "developer.mozilla.org" +// The port number is not included because 443 is the scheme's default port + +area.href = "https://developer.mozilla.org:4097/en-US/HTMLAreaElement" +area.host == "developer.mozilla.org:4097" ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-host','HTMLHyperlinkElementUtils.host')}} | +
{{Compat("api.HTMLAreaElement.host")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAreaElement.hostname
property is a
+ {{domxref("USVString")}} containing the domain of the URL.
+// Getter +string = area.hostname; +// Setter +area.hostname = string; ++ +
// An <area id="myArea" href="/en-US/docs/HTMLAreaElement"> element is in the document +const area = document.getElementById("myArea"); +HTMLAreaElement.hostname; // returns 'developer.mozilla.org'+ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-hostname','HTMLHyperlinkElementUtils.hostname')}} | +
{{Compat("api.HTMLAreaElement.hostname")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAreaElement.href
property is a
+ stringifier that returns a {{domxref("USVString")}} containing the whole URL, and allows
+ the href to be updated.
+// Getter +string = area.href; +// Setter +area.href = string; ++ +
// An <area id="myArea" href="https://developer.mozilla.org/en-US/HTMLAreaElement"> element is in the document +const area = document.getElementById("myArea"); +area.href; // returns 'https://developer.mozilla.org/en-US/HTMLAreaElement' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-href','HTMLHyperlinkElementUtils.href')}} | +
{{Compat("api.HTMLAreaElement.href")}}
+ +Inherits properties from its parent, {{domxref("HTMLElement")}}, and implements those from {{domxref("HTMLHyperlinkElementUtils")}}.
+Inherits properties from its parent, {{domxref("HTMLElement")}}.
true
) or active (false
).':'
), of the referenced URL.'?'
), if any, of the referenced URL.long
containing the element's position in the tabbing order.Inherits methods from its parent, {{domxref("HTMLElement")}}, and implements those from {{domxref("HTMLHyperlinkElementUtils")}}.
+Inherits methods from its parent, {{domxref("HTMLElement")}}.
download
.host
, hostname
, pathname
, port
, protocol
, search
, and hash
, have been moving to the {{domxref("HTMLHyperlinkElementUtils")}} mixin, and HTMLAreaElement
implements this mixin.tabindex
and accesskey
are now defined on {{domxref("HTMLElement")}}.nohref
.rel
, relList
, hreflang
, type
, host
, hostname
, pathname
, port
, protocol
, search
, and hash
.{{APIRef("HTML DOM")}}
+ +The
+ HTMLAreaElement.origin
read-only property is a
+ {{domxref("USVString")}} containing the Unicode serialization of the origin of the
+ represented URL; that is:
http
or https
, the scheme followed by
+ '://'
, followed by the domain, followed by ':'
, followed by
+ the port (the default port, 80
and 443
respectively, if
+ explicitly specified);file:
scheme, the value is browser dependant;blob:
scheme, the origin of the URL following
+ blob:
. E.g "blob:https://mozilla.org"
will have
+ "https://mozilla.org".
+// Getter +string = area.origin; + +// No setter; read-only property ++ +
// An <area id="myArea" href="https://developer.mozilla.org/en-US/HTMLAreaElement"> element is in the document +const area = document.getElementById("myArea"); +area.origin; // returns 'https://developer.mozilla.org' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-origin','HTMLHyperlinkElementUtils.origin')}} | +
{{Compat("api.HTMLAreaElement.origin")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAreaElement.password
property is a
+ {{domxref("USVString")}} containing the password specified before the domain name.
If it is set without first setting the
+ username
+ property, it silently fails.
+// Getter +string = area.password; +// Setter +area.password = string; ++ +
// An <area id="myArea" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAreaElement"> is in the document +const area = document.getElementByID("myArea"); +area.password; // returns 'flabada' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-password','HTMLHyperlinkElementUtils.password')}} | +
{{Compat("api.HTMLAreaElement.password")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAreaElement.pathname
property is a
+ {{domxref("USVString")}} containing an initial '/'
followed by the path of
+ the URL not including the query string or fragment (or the empty string if there is no
+ path).
+// Getter +string = area.pathname; +// Setter +area.pathname = string; ++ +
// An <area id="myArea" href="/en-US/docs/HTMLAreaElement"> element is in the document +const area = document.getElementById("myArea"); +area.pathname; // returns '/en-US/docs/HTMLAreaElement' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-pathname','HTMLHyperlinkElementUtils.pathname')}} | +
{{Compat("api.HTMLAreaElement.pathname")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAreaElement.port
property is a
+ {{domxref("USVString")}} containing the port number of the URL. If the URL does not
+ contain an explicit port number, it will be set to ''
.
+// Getter +string = area.port; +// Setter +area.port = string; ++ +
// An <area id="myArea" href="https://developer.mozilla.org:443/en-US/docs/HTMLAreaElement"> element is in the document +const area = document.getElementByID("myArea"); +area.port; // returns '443' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-port','HTMLHyperlinkElementUtils.port')}} | +
{{Compat("api.HTMLAreaElement.port")}}
+ +{{ApiRef("HTML DOM")}}
+ +The
+ HTMLAreaElement.protocol
+ property is a {{domxref("USVString")}} representing the protocol scheme of the URL,
+ including the final ':'
.
+// Getter +string = area.protocol; +// Setter +area.protocol = string; ++ +
// An <area id="myArea" href="https://developer.mozilla.org/en-US/HTMLAreaElement"> element is in the document +const area = document.getElementById("myArea"); +area.protocol; // returns 'https:' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol','HTMLHyperlinkElementUtils.protocol')}} | +
{{Compat("api.HTMLAreaElement.protocol")}}
+ +The HTMLAreaElement.search
property is a search
+ string, also called a query string, that is {{domxref("USVString")}} containing
+ a '?'
followed by the parameters of the URL.
Modern browsers provide
+ URLSearchParams
+ and
+ URL.searchParams
+ to make it easy to parse out the parameters from the querystring.
+// Getter +string = area.search; +// Setter +area.search = string; ++ +
// An <area id="myArea" href="/en-US/docs/HTMLAreaElement?q=123"> element is in the document +const area = document.getElementById("myArea"); +area.search; // returns '?q=123' ++ +
URLSearchParams
can be used:
++let params = new URLSearchParams(queryString); +let q = parseInt(params.get("q"); // returns the number 123 ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-search','HTMLHyperlinkElementUtils.search')}} | +
{{Compat("api.HTMLAreaElement.search")}}
+ +{{ApiRef("URL API")}}
+ +The HTMLAreaElement.toString()
stringifier
+ method returns a {{domxref("USVString")}} containing the whole URL. It is a read-only
+ version of {{domxref("HTMLAreaElement.href")}}.
area.toString();+ +
// An <area id="myArea" href="/en-US/docs/HTMLAreaElement"> element is in the document +const area = document.getElementById("myArea"); +area.toString(); // returns 'https://developer.mozilla.org/en-US/docs/HTMLAreaElement' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', "#dom-hyperlink-href", 'HTMLHyperlinkElementUtils.href')}} | +
{{Compat("api.HTMLAreaElement.toString")}}
+ +{{ApiRef("HTML DOM")}}
+ +The HTMLAreaElement.username
property is a
+ {{domxref("USVString")}} containing the username specified before the domain name.
+// Getter +string = area.username; +// Setter +area.username = string; ++ +
// An <area id="myArea" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAreaElement"> element is in the document +const area = document.getElementByID("myArea"); +area.username; // returns 'anonymous' ++ +
Specification | +
---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-username','HTMLHyperlinkElementUtils.username')}} | +
{{Compat("api.HTMLAreaElement.username")}}
+ +The
- HTMLHyperlinkElementUtils.hash
property returns a
- {{domxref("USVString")}} containing a '#'
followed by the fragment
- identifier of the URL.
The fragment is not percent-decoded. If the URL does not
- have a fragment identifier, this property contains an empty string, ""
.
string = object.hash; -object.hash = string; -- -
<a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils.href#Examples">Examples</a> -<script> - var anchor = document.getElementById("myAnchor"); - console.log(anchor.hash); // Returns '#Examples' -</script>- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-hash', - 'HTMLHyperlinkElementUtils.hash')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition | -
{{Compat("api.HTMLHyperlinkElementUtils.hash")}}
- -The HTMLHyperlinkElementUtils.host
property is a
- {{domxref("USVString")}} containing the host, that is the hostname, and then,
- if the port of the URL is nonempty, a ':'
, and the port
- of the URL.
string = object.host;
-object.host
= string;
-
-
-var anchor = document.createElement("a"); - -anchor.href = "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.host" -anchor.host == "developer.mozilla.org" - -anchor.href = "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host" -anchor.host == "developer.mozilla.org" -// The port number is not included because 443 is the scheme's default port - -anchor.href = "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host" -anchor.host == "developer.mozilla.org:4097" -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-host', - 'HTMLHyperlinkElementUtils.host')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition | -
{{Compat("api.HTMLHyperlinkElementUtils.host")}}
- -{{ApiRef("URL API")}}
- -The HTMLHyperlinkElementUtils.hostname
property is a
- {{domxref("USVString")}} containing the domain of the URL.
string = object.hostname; -object.hostname = string; -- -
// Let's an <a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils.hostname"> element be in the document -var anchor = document.getElementById("myAnchor"); -var result = anchor.hostname; // Returns:'developer.mozilla.org'- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-hostname', - 'HTMLHyperlinkElementUtils.hostname')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.hostname")}}
- -{{ApiRef("URL API")}}
- -The HTMLHyperlinkElementUtils.href
property is a
- stringifier that returns a {{domxref("USVString")}} containing the whole URL, and allows
- the href to be updated.
string = object.href; -object.href = string; -- -
// Lets imagine an <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href"> element is in the document -var anchor = document.getElementById("myAnchor"); -var result = anchor.href; // Returns: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href' -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-href', - 'HTMLHyperlinkElementUtils.href')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.href")}}
- -{{ApiRef("URL API")}}{{SeeCompatTable}}
- -The HTMLHyperlinkElementUtils
mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.
There are no objects of this type, but several objects such as {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.
- -Note: This interface doesn't inherit any property.
-':'
.':'
, and the port of the URL.'/'
followed by the path of the URL, not including the query string or fragment.'?'
followed by the parameters of the URL.'#'
followed by the fragment identifier of the URL.Note: This interface doesn't inherit any method.
-Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition | -
{{Compat("api.HTMLHyperlinkElementUtils")}}
- -{{ApiRef("URL API")}}
- -The HTMLHyperlinkElementUtils.password
property is a
- {{domxref("USVString")}} containing the password specified before the domain name.
If it is set without first setting the
- username
- property, it silently fails.
string = object.password; -object.password = string; -- -
// Let's <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"> be in the document -var anchor = document.getElementByID("myAnchor"); -var result = anchor.password; // Returns:'flabada' -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-password', - 'HTMLHyperlinkElementUtils.password')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.password")}}
- -{{ApiRef("URL API")}}
- -The HTMLHyperlinkElementUtils.pathname
property is a
- {{domxref("USVString")}} containing an initial '/'
followed by the path of
- the URL not including the query string or fragment (or the empty string if there is no
- path).
string = object.pathname; -object.pathname = string; -- -
// Let's an <a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils.pathname"> element be in the document -var anchor = document.getElementById("myAnchor"); -var result = anchor.pathname; // Returns:'/en-US/docs/HTMLHyperlinkElementUtils.pathname' -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-pathname', - 'HTMLHyperlinkElementUtils.pathname')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.pathname")}}
- -{{ApiRef("URL API")}}
- -The HTMLHyperlinkElementUtils.port
property is a
- {{domxref("USVString")}} containing the port number of the URL. If the URL does not
- contain an explicit port number, it will be set to ''
.
string = object.port; -object.port = string; -- -
// Let's an <a id="myAnchor" href="https://developer.mozilla.org:443/en-US/docs/HTMLHyperlinkElementUtils.port"> element be in the document -var anchor = document.getElementByID("myAnchor"); -var result = anchor.port; // Returns:'443' -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-port', - 'HTMLHyperlinkElementUtils.port')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.port")}}
- -{{ApiRef("URL API")}}
- -The
- HTMLHyperlinkElementUtils
.protocol
- property is a {{domxref("USVString")}} representing the protocol scheme of the URL,
- including the final ':'
.
string = object.protocol; -object.protocol = string; -- -
// Let's an <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol"> element be in the document -var anchor = document.getElementById("myAnchor"); -var result = anchor.protocol; // Returns:'https:' -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol', - 'HTMLHyperlinkElementUtils.protocol')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.protocol")}}
- -The HTMLHyperlinkElementUtils.search
property is a search
- string, also called a query string, that is {{domxref("USVString")}} containing
- a '?'
followed by the parameters of the URL.
Modern browsers provide
- URLSearchParams
- and
- URL.searchParams
- to make it easy to parse out the parameters from the querystring.
string = object.search; -object.search = string; -- -
// Let an <a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"> element be in the document -var anchor = document.getElementById("myAnchor"); -var queryString = anchor.search; // Returns:'?q=123' - -// Further parsing: -let params = new URLSearchParams(queryString); -let q = parseInt(params.get("q"); // is the number 123 -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-search', - 'HTMLHyperlinkElementUtils.search')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.search")}}
- -{{ApiRef("URL API")}}
- -The HTMLHyperlinkElementUtils.toString()
stringifier
- method returns a {{domxref("USVString")}} containing the whole URL. It is a read-only
- version of {{domxref("HTMLHyperlinkElementUtils.href")}}.
string = object.toString();- -
// Let's imagine an <a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils/toString"> element is in the document -var anchor = document.getElementById("myAnchor"); -var result = anchor.toString(); // Returns: 'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString' -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', "#dom-hyperlink-href")}} | -{{Spec2('HTML WHATWG')}} | -- |
{{Compat("api.HTMLHyperlinkElementUtils.toString")}}
- -{{ApiRef("URL API")}}
- -The HTMLHyperlinkElementUtils.username
property is a
- {{domxref("USVString")}} containing the username specified before the domain name.
string = object.username; -object.username = string; -- -
// Let's <a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"> be in the document -var anchor = document.getElementByID("myAnchor"); -var result = anchor.username; // Returns:'anonymous' -- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('HTML WHATWG', '#dom-hyperlink-username', - 'HTMLHyperlinkElementUtils.username')}} | -{{Spec2('HTML WHATWG')}} | -Initial definition. | -
{{Compat("api.HTMLHyperlinkElementUtils.username")}}
- -