recursal/MDN huggingface dataset:
Node: lookupNamespaceURI() method
=================================

 The **`lookupNamespaceURI()`** method of the `Node` interface
 takes a prefix as parameter and returns the namespace URI associated with it on the given node if found (and
 `null` if not).

Syntax
------


```js
lookupNamespaceURI(prefix)
```

### Parameters

`prefix`

The prefix to look for.

**Note:** This parameter is not optional, but can be set to `null`.

### Return value

 A string containing the namespace URI corresponding to the prefix.
 If the prefix is not found, it returns `null`.
 If the requested `prefix` is `null`, it returns the default namespace URI.

Example
-------


```html
Namespace URL for <code>xlink</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Namespace URL for <code>xml</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Namespace URL for <code>html</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Namespace URL for <code>``</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Namespace URL for <code>svg</code> on &lt;svg&gt;:
<output>Not tested</output>.<br />
Namespace URL for <code>xlink</code> on &lt;svg&gt;:
<output>Not tested</output>.<br />
Namespace URL for <code>xml</code> on &lt;svg&gt;:
<output>Not tested</output>.<br />
<svg xmlns:svg="http://www.w3.org/2000/svg" height="1"></svg>
<button>Click to see the results</button>
```



```js
const button = document.querySelector("button");
button.addEventListener("click", () => {
  const aHtmlElt = document.querySelector("output");
  const aSvgElt = document.querySelector("svg");

  const result = document.getElementsByTagName("output");
  result[0].value = aHtmlElt.lookupNamespaceURI("xlink");
  result[1].value = aHtmlElt.lookupNamespaceURI("xml");
  result[2].value = aHtmlElt.lookupNamespaceURI("html");
  result[3].value = aHtmlElt.lookupNamespaceURI("");
  result[4].value = aSvgElt.lookupNamespaceURI("svg");
  result[5].value = aSvgElt.lookupNamespaceURI("xlink");
  result[6].value = aSvgElt.lookupNamespaceURI("xml");
});
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-node-lookupnamespaceuri |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node.lookupPrefix`
* `Node.isDefaultNameSpace`
Node: lookupPrefix() method
===========================

 The **`lookupPrefix()`** method of the `Node` interface
 returns a string containing the prefix for a given namespace URI, if present,
 and `null` if not.
 When multiple prefixes are possible, the first prefix is returned.

Syntax
------


```js
lookupPrefix(namespace)
```

### Parameters

`namespace`

A string containing the namespace to look the prefix up.

**Note:** This parameter is not optional but can be set to `null`.

### Return value

 A string containing the corresponding prefix, or `null` if none has been found.
 If `namespace` is null, or the empty string, `lookupPrefix()` returns `null`.

 If the node is a `DocumentType` or a `DocumentFragment`,
 `lookupPrefix()` always returns `null`.

Example
-------


```html
Prefix for <code>http://www.w3.org/2000/svg</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Prefix for <code>http://www.w3.org/TR/html4/</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Prefix for <code>https://www.w3.org/1999/xlink</code> on &lt;output&gt;:
<output>Not tested</output>.<br />
Prefix for <code>http://www.w3.org/2000/svg</code> on &lt;svg&gt;:
<output>Not tested</output>.<br />
Prefix for <code>https://www.w3.org/1999/xlink</code> on &lt;svg&gt;:
<output>Not tested</output>.<br />
Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on &lt;svg&gt;:
<output>Not tested</output>.<br />
<svg xmlns:t="http://www.w3.org/2000/svg" height="1"></svg>
<button>Click to see the results</button>
```



```js
const button = document.querySelector("button");
button.addEventListener("click", () => {
  const aHtmlElt = document.querySelector("output");
  const aSvgElt = document.querySelector("svg");

  const result = document.getElementsByTagName("output");
  result[0].value = aHtmlElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
  result[1].value = aHtmlElt.lookupPrefix(
    "http://www.w3.org/XML/1998/namespace",
  ); // false
  result[2].value = aHtmlElt.lookupPrefix("http://www.w3.org/TR/html4/"); // true
  result[3].value = aHtmlElt.lookupPrefix("https://www.w3.org/1999/xlink"); // false
  result[4].value = aSvgElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
  result[5].value = aSvgElt.lookupPrefix("https://www.w3.org/1999/xlink"); // true
  result[6].value = aSvgElt.lookupPrefix(
    "http://www.w3.org/XML/1998/namespace",
  ); // false
});
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-node-lookupprefix |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix
Node: isEqualNode() method
==========================

 The **`isEqualNode()`** method of the `Node` interface tests whether two nodes are equal.
 Two nodes are equal when they have the same type, defining characteristics (for
 elements, this would be their ID, number of children, and so forth), its attributes
 match, and so on. The specific set of data points that must match varies depending on
 the types of the nodes.

Syntax
------


```js
isEqualNode(otherNode)
```

### Parameters

`otherNode`

The `Node` to compare equality with.

**Note:** This parameter is not optional, but can be set to `null`.

### Return value

 A boolean value that is `true` if the two nodes are equals, or `false` if not.
 If `otherNode` is `null`, `isEqualNode()` always return false.

Example
-------

 In this example, we create three `<div>` blocks. The first and third
 have the same contents and attributes, while the second is different. Then we run some
 JavaScript to compare the nodes using `isEqualNode()` and output the results.

### HTML


```html
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

<p id="output"></p>
```


```
#output {
  width: 440px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  display: block;
}
```

### JavaScript


```js
let output = document.getElementById("output");
let divList = document.getElementsByTagName("div");

output.innerHTML += `div 0 equals div 0: ${divList[0].isEqualNode(
 divList[0],
)}<br/>`;
output.innerHTML += `div 0 equals div 1: ${divList[0].isEqualNode(
 divList[1],
)}<br/>`;
output.innerHTML += `div 0 equals div 2: ${divList[0].isEqualNode(
 divList[2],
)}<br/>`;
```

### Results

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isequalnode① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node.isSameNode()`
Node: contains() method
=======================

 The **`contains()`** method of the `Node` interface
 returns a boolean value indicating
 whether a node is a descendant of a given node, that is the node itself,
 one of its direct children (`childNodes`),
 one of the children's direct children, and so on.

**Note:** A node is *contained* inside itself.

Syntax
------


```js
contains(otherNode)
```

### Parameters

`otherNode`

The `Node` to test with.

**Note:** `otherNode` is not optional, but can be set to `null`.

### Return value

 A boolean value that is `true` if `otherNode` is contained in the node,
 `false` if not.

 If the `otherNode` parameter is `null`,
 `contains()` always returns `false`.

Example
-------

 This function checks to see if an element is in the page's body. As
 `contains` is inclusive and determining if the body contains itself isn't the
 intention of `isInPage` this case explicitly returns `false`.


```js
function isInPage(node) {
  return node === document.body ? false : document.body.contains(node);
}
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-contains① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node.compareDocumentPosition`
* `Node.hasChildNodes`
Node: nextSibling property
==========================

 The read-only **`nextSibling`** property of the `Node` interface
 returns the node immediately following the specified one in their
 parent's `childNodes`, or returns `null`
 if the specified node is the last child in the parent element.


**Note:** Browsers insert `Text` nodes into a document to represent whitespace in the source markup.
 Therefore a node obtained, for example, using `Node.firstChild`
 or `Node.previousSibling`
 may refer to a whitespace text node rather than the actual element the author
 intended to get.


 The article Whitespace in the DOM
 contains more information about this behavior.


 You can use `Element.nextElementSibling` to obtain the next element
 skipping any whitespace nodes, other between-element text, or comments.


To navigate the opposite way through the child nodes list use Node.previousSibling.

Value
-----

 A `Node` representing the next sibling of the current node,
 or `null` if there are none.

Example
-------


```html
<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<br />
<output><em>Not calculated.</em></output>
```



```js
let el = document.getElementById("div-1").nextSibling;
let i = 1;

let result = "Siblings of div-1:<br/>";

while (el) {
  result += `${i}. ${el.nodeName}<br/>`;
  el = el.nextSibling;
  i++;
}

const output = document.querySelector("output");
output.innerHTML = result;
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nextsibling① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Element.nextElementSibling`
* `Node.previousSibling`
Node: isConnected property
==========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback

 The read-only **`isConnected`** property of the `Node` interface
 returns a boolean indicating whether the node is connected
 (directly or indirectly) to a `Document` object.

Value
-----

 A boolean value that is `true` if the node is connected to its relevant context object,
 and `false` if not.

Examples
--------

### Standard DOM

A standard DOM example:


```js
let test = document.createElement("p");
console.log(test.isConnected); // Returns false
document.body.appendChild(test);
console.log(test.isConnected); // Returns true
```

### Shadow DOM

A shadow DOM example:


```js
// Create a shadow root
const shadow = this.attachShadow({ mode: "open" });

// Create some CSS to apply to the shadow DOM
const style = document.createElement("style");
console.log(style.isConnected); // returns false

style.textContent = `
.wrapper {
 position: relative;
}

.info {
 font-size: 0.8rem;
 width: 200px;
 display: inline-block;
 border: 1px solid black;
 padding: 10px;
 background: white;
 border-radius: 10px;
 opacity: 0;
 transition: 0.6s all;
 positions: absolute;
 bottom: 20px;
 left: 10px;
 z-index: 3
}
`;

// Attach the created style element to the shadow DOM

shadow.appendChild(style);
console.log(style.isConnected); // Returns true
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isconnected① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Node.prototype.isConnected polyfill
Node: hasChildNodes() method
============================

 The **`hasChildNodes()`** method of the `Node` interface
 returns a boolean value indicating
 whether the given `Node` has child nodes or not.

Syntax
------


```js
hasChildNodes()
```

### Parameters

None.

### Return value

 A boolean value that is `true` if the node has child nodes, and
 `false` otherwise.

Example
-------


```js
let foo = document.getElementById("foo");

if (foo.hasChildNodes()) {
  // Do something with 'foo.childNodes'
}
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-haschildnodes① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node.childNodes`
Node: removeChild() method
==========================

 The **`removeChild()`** method of the `Node` interface
 removes a child node from the DOM and returns the removed node.


**Note:** As long as a reference is kept on the removed child,
 it still exists in memory, but is no longer part of the DOM.
 It can still be reused later in the code.


 If the return value of `removeChild()` is not stored, and no other reference is kept,
 it will be automatically deleted from memory after a short time.


Unlike `Node.cloneNode()` the return value preserves the `EventListener` objects associated with it.

Syntax
------


```js
removeChild(child)
```

### Parameters

`child`

A `Node` that is the child node to be removed from the DOM.

### Exception

`NotFoundError` `DOMException`

Thrown if the `child` is not a child of the node.

`TypeError`

Thrown if the `child` is `null`.

Examples
--------

### Simple examples

Given this HTML:


```html
<div id="parent">
  <div id="child"></div>
</div>
```


To remove a specified element when knowing its parent node:


```js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);
```


To remove a specified element without having to specify its parent node:


```js
const node = document.getElementById("child");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
```


To remove all children from an element:


```js
const element = document.getElementById("idOfParent");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
```

### Causing a TypeError


```html
<!--Sample HTML code-->
<div id="parent"></div>
```



```js
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// Throws Uncaught TypeError
const garbage = parent.removeChild(child);
```

### Causing a NotFoundError


```html
<!--Sample HTML code-->
<div id="parent">
  <div id="child"></div>
</div>
```



```js
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// This first call correctly removes the node
const garbage = parent.removeChild(child);

// Throws NotFoundError
garbage = parent.removeChild(child);
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-node-removechild |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node.replaceChild()`
* `Node.parentNode`
* `Element.remove()`
* `Node.cloneNode()`
Node: normalize() method
========================

 The **`normalize()`** method of the `Node` interface puts the specified node
 and all of its sub-tree into a *normalized* form.
 In a normalized sub-tree, no text nodes in the sub-tree are empty and there are no adjacent text nodes.

Syntax
------


```js
normalize()
```

### Parameters

None.

### Return value

None.

Example
-------


```html
<output id="result"></output>
```



```js
const wrapper = document.createElement("div");

wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));

let node = wrapper.firstChild;
let result = "Before normalization:<br/>";
while (node) {
  result += ` ${node.nodeName}: ${node.nodeValue}<br/>`;
  node = node.nextSibling;
}

wrapper.normalize();

node = wrapper.firstChild;
result += "<br/><br/>After normalization:<br/>";
while (node) {
  result += ` ${node.nodeName}: ${node.nodeValue}<br/>`;
  node = node.nextSibling;
}

const output = document.getElementById("result");
output.innerHTML = result;
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-normalize① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Text.splitText()`, its opposite.
Node: compareDocumentPosition() method
======================================

 The **`compareDocumentPosition()`** method of the `Node` interface
 reports the position of its argument node relative to the node on which it is called.

Syntax
------


```js
compareDocumentPosition(otherNode)
```

### Parameters

`otherNode`

The `Node` for which position should be reported, relative to the node.

### Return value

 An integer value representing `otherNode`'s position relative to `node`
 as a bitmask combining the
 following constant properties of `Node`:

`Node.DOCUMENT_POSITION_DISCONNECTED` (`1`)

Both nodes are in different documents or different trees in the same document.

`Node.DOCUMENT_POSITION_PRECEDING` (`2`)

`otherNode` precedes the node in either a pre-order depth-first traversal of a tree containing both (e.g., as an ancestor or previous sibling or a descendant of a previous sibling or previous sibling of an ancestor) or (if they are disconnected) in an arbitrary but consistent ordering.

`Node.DOCUMENT_POSITION_FOLLOWING` (`4`)

`otherNode` follows the node in either a pre-order depth-first traversal of a tree containing both (e.g., as a descendant or following sibling or a descendant of a following sibling or following sibling of an ancestor) or (if they are disconnected) in an arbitrary but consistent ordering.

`Node.DOCUMENT_POSITION_CONTAINS` (`8`)

`otherNode` is an ancestor of the node.

`Node.DOCUMENT_POSITION_CONTAINED_BY` (`16`)

`otherNode` is a descendant of the node.

`Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` (`32`)

The result relies upon arbitrary and/or implementation-specific behavior and is not guaranteed to be portable.


 More than one bit is set if multiple scenarios apply. For example, if
 `otherNode` is located earlier in the document ***and***
 contains the node on which `compareDocumentPosition()` was
 called, then both the `DOCUMENT_POSITION_CONTAINS` and
 `DOCUMENT_POSITION_PRECEDING` bits would be set, producing a value of `10` (`0x0A`).

Example
-------


```js
const head = document.head;
const body = document.body;

if (head.compareDocumentPosition(body) & Node.DOCUMENT\_POSITION\_FOLLOWING) {
  console.log("Well-formed document");
} else {
  console.error("<head> is not before <body>");
}
```


**Note:** Because the result returned by `compareDocumentPosition()` is a bitmask,
 the bitwise AND operator
 must be used for meaningful results.


Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-comparedocumentposition① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node.contains()`
Node: ownerDocument property
============================

 The read-only **`ownerDocument`** property of the `Node` interface
 returns the top-level document object of the node.

Value
-----

 A `Document` that is the top-level object in which all the
 child nodes are created.

If this property is used on a node that is itself a document, the value is `null`.

Example
-------


```js
// Given a node "p", get the top-level HTML
// child of the document object

const d = p.ownerDocument;
const html = d.documentElement;
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-ownerdocument① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node: cloneNode() method
========================

 The **`cloneNode()`** method of the `Node` interface
 returns a duplicate of the node on which this method was called.
 Its parameter controls if the subtree contained in a node is also cloned or not.

 Cloning a node copies all of its attributes and their values,
 including intrinsic (inline) listeners. It does *not* copy event listeners added
 using `addEventListener()` or
 those assigned to element properties (e.g., `node.onclick = someFunction`).
 Additionally, for a `<canvas>` element, the painted image is not copied.

**Warning:** `cloneNode()` may lead to duplicate element IDs in a document!

 If the original node has an `id` attribute, and the clone
 will be placed in the same document, then you should modify the clone's ID to be
 unique.


 Also, `name` attributes may need to be modified,
 depending on whether duplicate names are expected.


 To clone a node to insert into a *different* document, use
 `Document.importNode()` instead.

Syntax
------


```js
cloneNode()
cloneNode(deep)
```

### Parameters

`deep` Optional

 If `true`, then the node and its whole subtree,
 including text that may be in child `Text` nodes,
 is also copied.


 If `false`, only the node will be cloned.
 The subtree, including any text that the node contains, is not cloned.


 Note that `deep` has no effect on void elements,
 such as the `<img>` and `<input>` elements.


### Return value

 The new `Node` cloned.
 The cloned node has no parent and is not part of the document,
 *until* it is added to another node that is part of the document,
 using `Node.appendChild()` or a similar method.

Example
-------


```js
let p = document.getElementById("para1");
let p_prime = p.cloneNode(true);
```

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-clonenode① |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node: isSameNode() method
=========================

 The **`isSameNode()`** method of the `Node` interface
 is a legacy alias the for the `===` strict equality operator.
 That is, it tests whether two nodes are the same
 (in other words, whether they reference the same object).

**Note:** There is no need to use `isSameNode()`; instead use the `===` strict equality operator.

Syntax
------


```js
isSameNode(otherNode)
```

### Parameters

`otherNode`

The `Node` to test against.

**Note:** This parameter is not optional, but can be set to `null`.

### Return value

A boolean value that is `true` if both nodes are strictly equal, `false` if not.

Example
-------

 In this example, we create three `<div>` blocks. The first and third
 have the same contents and attributes, while the second is different. Then we run some
 JavaScript to compare the nodes using `isSameNode()` and output the results.

### HTML


```html
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

<p id="output"></p>
```


```
#output {
  width: 440px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  display: block;
}
```

### JavaScript


```js
let output = document.getElementById("output");
let divList = document.getElementsByTagName("div");

output.innerHTML += `div 0 same as div 0: ${divList[0].isSameNode(
 divList[0],
)}<br/>`;
output.innerHTML += `div 0 same as div 1: ${divList[0].isSameNode(
 divList[1],
)}<br/>`;
output.innerHTML += `div 0 same as div 2: ${divList[0].isSameNode(
 divList[2],
)}<br/>`;
```

### Results

Specifications
--------------

| Specification |
| --- |
| DOM Standard # dom-node-issamenode |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Node.isEqualNode()`