MathMLAnchorElement

Instance properties

Inherits properties from its parent, MathMLElement.

MathMLAnchorElement.hash: A string representing the fragment identifier, including the leading hash mark (#), if any, in the referenced URL.
MathMLAnchorElement.host: A string representing the hostname and port (if it's not the default port) in the referenced URL.
MathMLAnchorElement.hostname: A string representing the hostname in the referenced URL.
MathMLAnchorElement.href: A string that is the result of parsing the element's href attribute relative to the document, containing a valid URL of a linked resource.
MathMLAnchorElement.hreflang: A string that reflects the element's hreflang attribute, indicating the language of the linked resource.
MathMLAnchorElement.origin Read only: Returns a string containing the origin of the URL, that is its scheme, its domain and its port.
MathMLAnchorElement.password: A string containing the password specified before the domain name.
MathMLAnchorElement.pathname: A string containing an initial / followed by the path of the URL, not including the query string or fragment.
MathMLAnchorElement.port: A string representing the port component, if any, of the referenced URL.
MathMLAnchorElement.protocol: A string representing the protocol component, including trailing colon (:), of the referenced URL.
MathMLAnchorElement.search: A string representing the search element, including leading question mark (?), if any, of the referenced URL.
MathMLAnchorElement.target: A string that reflects the element's target attribute, indicating where to display the linked resource.
MathMLAnchorElement.type: A string that reflects the element's type attribute, indicating the MIME type of the linked resource.
MathMLAnchorElement.username: A string containing the username specified before the domain name.

This example marks up the Gamma function in MathML. It includes several nested MathML <a> elements and demonstrates how to access their properties in JavaScript via the MathMLAnchorElement interface.

MathML

The example includes several <a> elements that point to various parts of the Gamma function Wikipedia page. We've updated the first one to an example.com link that includes several link and URL features that we can target with JavaScript. We also include a <ul> element to output property values to.

html

<math display="block" xmlns="http://www.w3.org/1998/Math/MathML"
  ><semantics
    ><mrow
      ><a
        href="https://uname:pwd@example.com:8000/subsection?q=123#fragment"
        target="_blank"
        hreflang="en"
        type="text/html"
        ><mrow
          ><mi mathvariant="normal">Γ</mi><mo stretchy="false">(</mo><mi>t</mi
          ><mo stretchy="false">)</mo></mrow
        ></a
      ><mo>=</mo
      ><a href="https://en.wikipedia.org/wiki/Gamma_function#Main_definition"
        ><mrow
          ><msubsup
            ><mo>∫</mo><mn>0</mn><mrow><mo>+</mo><mn>∞</mn></mrow></msubsup
          ><msup
            ><mi>x</mi><mrow><mi>t</mi><mo>−</mo><mn>1</mn></mrow></msup
          ><msup
            ><mi>e</mi><mrow><mo>−</mo><mi>x</mi></mrow></msup
          ><mi>d</mi><mi>x</mi></mrow
        ></a
      ><mo>=</mo
      ><a
        href="https://en.wikipedia.org/wiki/Gamma_function#Euler's_definition_as_an_infinite_product"
        ><mrow
          ><mfrac><mn>1</mn><mi>t</mi></mfrac
          ><munderover
            ><mo>∏</mo><mrow><mi>n</mi><mo>=</mo><mn>1</mn></mrow
            ><mn>∞</mn></munderover
          ><mfrac
            ><msup
              ><mrow
                ><mo>(</mo
                ><mrow
                  ><mn>1</mn><mo>+</mo><mfrac><mn>1</mn><mi>n</mi></mfrac></mrow
                ><mo>)</mo></mrow
              ><mi>t</mi></msup
            ><mrow
              ><mn>1</mn><mo>+</mo><mfrac><mi>t</mi><mi>n</mi></mfrac></mrow
            ></mfrac
          ></mrow
        ></a
      ><a href="https://en.wikipedia.org/wiki/Asymptotic_analysis#Definition"
        ><mo>∼</mo></a
      ><a href="https://en.wikipedia.org/wiki/Gamma_function#Stirling's_formula"
        ><mrow
          ><msqrt
            ><mfrac
              ><mrow><mn>2</mn><mi>π</mi></mrow
              ><mi>t</mi></mfrac
            ></msqrt
          ><msup
            ><mrow
              ><mo>(</mo><mfrac><mi>t</mi><mi>e</mi></mfrac
              ><mo>)</mo></mrow
            ><mi>t</mi></msup
          ></mrow
        ></a
      ></mrow
    ></semantics
  ></math
>

<ul></ul>

math {
  font-size: 4vw;
}

JavaScript

We get references to the first MathML <a> element in the document and the <ul> element.

const mathAnchor = document.querySelector("math a");
const list = document.querySelector("ul");

Next, we define a function that takes a string value representing a property of the MathMLAnchorElement object and appends an <li> to the list containing the property name and property value:

function outputValue(value) {
  const listItem = document.createElement("li");
  listItem.textContent = `${value}: ${mathAnchor[value]}`;
  list.appendChild(listItem);
}

Finally, we call the function several times to output names and values of properties defined directly on the interface to the list:

outputValue("href");
outputValue("target");
outputValue("origin");
outputValue("protocol");
outputValue("username");
outputValue("password");
outputValue("host");
outputValue("hostname");
outputValue("port");
outputValue("pathname");
outputValue("search");
outputValue("hash");
outputValue("hreflang");
outputValue("type");