recursal/MDN huggingface dataset:
Node: textContent property
==========================

 The **`textContent`** property of the `Node`
 interface represents the text content of the node and its descendants.


**Note:** `textContent` and `HTMLElement.innerText` are easily confused,
 but the two properties are different in important ways.


Value
-----

A string, or `null`. Its value depends on the situation:

* If the node is a `document` or a doctype,
 `textContent` returns `null`.


**Note:** To get *all* of the text and CDATA data for the whole
 document, use `document.documentElement.textContent`.
* If the node is a CDATA section,
 a comment, a processing instruction,
 or a text node,
 `textContent` returns, or sets, the text inside the node,
 i.e., the `Node.nodeValue`.
* For other node types, `textContent` returns the concatenation of the
 `textContent` of every child node, excluding comments and processing
 instructions. (This is an empty string if the node has no children.)

**Warning:** Setting `textContent` on a node removes *all* of the node's children
 and replaces them with a single text node with the given string value.


### Differences from innerText

 Don't get confused by the differences between `Node.textContent` and
 `HTMLElement.innerText`. Although the names seem similar, there are
 important differences:

* `textContent` gets the content of *all* elements, including
 `<script>` and `<style>` elements. In contrast,
 `innerText` only shows "human-readable" elements.
* `textContent` returns every element in the node. In contrast,
 `innerText` is aware of styling and won't return the text of "hidden"
 elements.
    + Moreover, since `innerText` takes CSS styles into account,
     reading the value of `innerText` triggers a
     reflow to ensure up-to-date computed styles. (Reflows can
     be computationally expensive, and thus should be avoided when possible.)
### Differences from innerHTML

`Element.innerHTML` returns HTML, as its name indicates. Sometimes people
 use `innerHTML` to retrieve or write text inside an element, but
 `textContent` has better performance because its value is not parsed as
 HTML.

Moreover, using `textContent` can prevent XSS attacks.

Examples
--------

Start with this HTML fragment.


```html
<div id="divA">This is <span>some</span> text!</div>
```


You can use `textContent` to get the element's text content:


```js
let text = document.getElementById("divA").textContent;
// The text variable is now: 'This is some text!'
```


If you prefer to set the element's text content, you can do:


```js
document.getElementById("divA").textContent = "This text is different!";
// The HTML for divA is now:
// <div id="divA">This text is different!</div>
```

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

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

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

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

See also
--------

* `HTMLElement.innerText`
* `Element.innerHTML`
* More on differences between `innerText` and `textContent`
 (blog post)
Node: lastChild property
========================

 The read-only **`lastChild`** property of the `Node` interface
 returns the last child of the node, or `null` if there are no child nodes.


**Note:** This property returns any type of node that is the last child of this one.
 It may be a `Text` or a `Comment` node.
 If you want to get the last `Element` that is a child of another element,
 consider using `Element.lastElementChild`.


Value
-----

A `Node` that is the last child of the node, or `null` is there are no child nodes.

Example
-------


```js
const tr = document.getElementById("row1");
const corner_td = tr.lastChild;
```

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

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

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

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

See also
--------

* `Node.firstChild`
* `Element.lastElementChild`
Node: nodeName property
=======================

The read-only **`nodeName`** property of `Node` returns the name of the current node as a string.

Value
-----

A string. Values for the different types of nodes are:

`Attr`

The value of `Attr.name`, that is the *qualified name* of the attribute.

`CDATASection`

The string `"#cdata-section"`.

`Comment`

The string `"#comment"`.

`Document`

The string `"#document"`.

`DocumentFragment`

The string `"#document-fragment"`.

`DocumentType`

The value of `DocumentType.name`

`Element`

 The value of `Element.tagName`, that is the *uppercase* name of the element tag if an HTML element,
 or the *lowercase* element tag if an XML element (like a SVG or MATHML element).


`ProcessingInstruction`

The value of `ProcessingInstruction.target`

`Text`

The string `"#text"`.

Example
-------

This example displays the node names of several nodes


```html
This is some HTML:
<div id="d1">Hello world</div>
<!-- Example of comment -->
Text <span>Text</span> Text<br />
<svg height="20" width="20">
  <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="red" />
</svg>
<hr />
<output id="result">Not calculated yet.</output>
```


and the following script:


```js
let node = document.querySelector("body").firstChild;
let result = "Node names are:<br/>";
while (node) {
  result += `${node.nodeName}<br/>`;
  node = node.nextSibling;
}

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

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

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

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

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

See also
--------

* `Element.tagName`
* `Attr.name`
* `DocumentType.name`
* `ProcessingInstruction.target`
Node: replaceChild() method
===========================

The **`replaceChild()`** method of the `Node` interface replaces a child node within the given (parent) node.

Syntax
------


```js
replaceChild(newChild, oldChild)
```

### Parameters

`newChild`

The new node to replace `oldChild`.

**Warning:** If the new node is already present somewhere else in the DOM, it is first removed from that position.

`oldChild`

The child to be replaced.



**Note:** The parameter order, *new* before *old*, is unusual.
 `Element.replaceWith()`, applying only to nodes that are elements,
 may be easier to read and use.


### Return value

The replaced `Node`. This is the same node as `oldChild`.

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the constraints of the DOM tree are violated, that is if one of the following cases occurs:

* If the parent of `oldChild` is not a `Document`, `DocumentFragment`, or an `Element`.
* If the replacement of `oldChild` by `newChild` would lead to a cycle, that is if `newChild` is an ancestor of the node.
* If `newChild` is not a `DocumentFragment`, a `DocumentType`, an `Element`, or a `CharacterData`.
* If the current node is a `Text`, and its parent is a `Document`.
* If the current node is a `DocumentType` and its parent is *not* a `Document`, as a *doctype* should always be a direct descendant of a *document*.
* If the parent of the node is a `Document` and `newChild` is a `DocumentFragment` with more than one `Element` child, or that has a `Text` child.
* If the replacement of `oldChild` by `newChild` would lead to `Document` with more than one `Element` as child.
* If the replacement of `oldChild` by `newChild` would lead to the presence of an `Element` node before a `DocumentType` node.

`NotFoundError` `DOMException`

Thrown if the parent of `oldChild` is not the current node.

Example
-------


```js
// Given:
// <div>
// <span id="childSpan">foo bar</span>
// </div>

// Create an empty element node
// without an ID, any attributes, or any content
const sp1 = document.createElement("span");

// Give it an id attribute called 'newSpan'
sp1.id = "newSpan";

// Create some content for the new element.
const sp1_content = document.createTextNode("new replacement span element.");

// Apply that content to the new element
sp1.appendChild(sp1_content);

// Build a reference to the existing node to be replaced
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;

// Replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

// Result:
// <div>
// <span id="newSpan">new replacement span element.</span>
// </div>
```

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

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

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

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

See also
--------

* `Node.removeChild`
* `Element.replaceWith`
Node: selectstart event
=======================

The **`selectstart`** event of the Selection API is fired when a user starts a new selection.

If the event is canceled, the selection is not changed.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("selectstart", (event) => {});

onselectstart = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------


```js
// addEventListener version
document.addEventListener("selectstart", () => {
  console.log("Selection started");
});

// onselectstart version
document.onselectstart = () => {
  console.log("Selection started.");
};
```

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

| Specification |
| --- |
| Selection API # selectstart-event |
| Selection API # dom-globaleventhandlers-onselectstart |

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

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

See also
--------

* `selectionchange`
Node: isDefaultNamespace() method
=================================

 The **`isDefaultNamespace()`** method of the `Node` interface accepts a namespace URI as an argument.
 It returns a boolean value that is `true` if the namespace is the default namespace on the given node and `false` if not.

**Note:** The default namespace of an HTML element is always `""`. For a SVG element, it is set by the `xmlns` attribute.

Syntax
------


```js
isDefaultNamespace(namespaceURI)
```

### Parameters

`namespaceURI`

A string representing the namespace against which the element will be checked.

**Note:** `namespaceURI` is not an optional parameter, but can be `null`.

### Return value

A boolean value that holds the return value `true` or `false`, indicating if the parameter is the default namespace, or not.

Example
-------


```html
Is "" the default namespace for &lt;output&gt;:
<output>Not tested</output>.<br />
Is "http://www.w3.org/2000/svg" the default namespace for &lt;output&gt;:
<output>Not tested</output>.<br />
Is "" the default namespace for &lt;svg&gt;: <output>Not tested</output>.<br />
Is "http://www.w3.org/2000/svg" the default namespace for &lt;svg&gt;:
<output>Not tested</output>.<br />
<svg xmlns="http://www.w3.org/2000/svg" height="1"></svg>
<button>Click to run tests</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.isDefaultNamespace(""); // true
  result[1].value = aHtmlElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // false
  result[2].value = aSvgElt.isDefaultNamespace(""); // false
  result[3].value = aSvgElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // true
});
```

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

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

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

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

See also
--------

* `Node.lookupNamespaceURI`
* `Node.lookupPrefix`
Node: parentNode property
=========================

 The read-only **`parentNode`** property of the `Node` interface
 returns the parent of the specified node in the DOM tree.

`Document` and `DocumentFragment` nodes can never have a parent, so
 `parentNode` will always return `null`.
 It also returns `null` if the node has just been created
 and is not yet attached to the tree.

Value
-----

 A `Node` that is the parent of the current node. The parent of an element is
 an `Element` node, a `Document` node, or a `DocumentFragment` node.

Example
-------


```js
if (node.parentNode) {
  // remove a node from the tree, unless
  // it's not in the tree already
  node.parentNode.removeChild(node);
}
```

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

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

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

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

See also
--------

* `Node.firstChild`
* `Node.lastChild`
* `Node.childNodes`
* `Node.nextSibling`
* `Node.parentElement`
* `Node.previousSibling`
* `Node.removeChild`
Node: baseURI property
======================

 The read-only **`baseURI`** property of the `Node` interface
 returns the absolute base URL of the document containing the node.

The base URL is used to resolve relative URLs when the browser needs to obtain an absolute URL, for example when processing the HTML `<img>` element's `src` attribute or the `xlink:href` 
Deprecated
 or `href` attributes in SVG.

 Although this property is read-only, its value is determined by an algorithm each time
 the property is accessed, and may change if the conditions changed.

The base URL is determined as follows:

1. By default, the base URL is the location of the document (as determined by `window.location`).
2. If it is an HTML Document and there is a `<base>` element in the document,
 the `href` value of the *first* `Base` element with such an attribute is used instead.
Value
-----

A string representing the base URL of the `Node`.

Examples
--------

### Without <base>


```html
<output>Not calculated</output>
```



```js
const output = document.querySelector("output");
output.value = output.baseURI;
```

### With <base>


```html
<base href="https://developer.mozilla.org/modified\_base\_uri/" />
<output>Not calculated</output>
```



```js
const output = document.querySelector("output");
output.value = output.baseURI;
```

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

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

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

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

See also
--------

* `<base>` element.
Node: nodeType property
=======================

 The read-only **`nodeType`** property of a `Node` interface is an integer
 that identifies what the node is. It distinguishes different kind of nodes from each other,
 such as `elements`, `text` and `comments`.

Value
-----

An integer which specifies the type of the node. Possible values are:

`Node.ELEMENT_NODE` (`1`)

An `Element` node like `<p>` or `<div>`.

`Node.ATTRIBUTE_NODE` (`2`)

An `Attribute` of an `Element`.

`Node.TEXT_NODE` (`3`)

The actual `Text` inside an `Element` or `Attr`.

`Node.CDATA_SECTION_NODE`(`4`)

A `CDATASection`, such as `<!CDATA[[ … ]]>`

`Node.PROCESSING_INSTRUCTION_NODE` (`7`)

A `ProcessingInstruction` of an XML document, such as `<?xml-stylesheet … ?>`.

`Node.COMMENT_NODE` (`8`)

A `Comment` node, such as `<!-- … -->`.

`Node.DOCUMENT_NODE` (`9`)

A `Document` node.

`Node.DOCUMENT_TYPE_NODE` (`10`)

A `DocumentType` node, such as `<!DOCTYPE html>`.

`Node.DOCUMENT_FRAGMENT_NODE` (`11`)

A `DocumentFragment` node.


 The following constants have been deprecated and are not in use anymore: `Node.ENTITY_REFERENCE_NODE` (`5`),
 `Node.ENTITY_NODE` (`6`), and `Node.NOTATION_NODE` (`12`).

Examples
--------

### Different types of nodes


```js
document.nodeType === Node.DOCUMENT\_NODE; // true
document.doctype.nodeType === Node.DOCUMENT\_TYPE\_NODE; // true

document.createDocumentFragment().nodeType === Node.DOCUMENT\_FRAGMENT\_NODE; // true

const p = document.createElement("p");
p.textContent = "Once upon a time…";

p.nodeType === Node.ELEMENT\_NODE; // true
p.firstChild.nodeType === Node.TEXT\_NODE; // true
```

### Comments

 This example checks if the first node inside the document element is a comment, and
 displays a message if not.


```js
const node = document.documentElement.firstChild;
if (node.nodeType !== Node.COMMENT\_NODE) {
  console.warn("You should comment your code!");
}
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Node: childNodes property
=========================

 The read-only **`childNodes`** property of the `Node` interface returns a live
 `NodeList` of child `nodes` of the given element where
 the first child node is assigned index `0`. Child nodes include elements, text and
 comments.


**Note:** The `NodeList` being live means that its content is changed each time
 new children are added or removed.


 Browsers insert text nodes into a document to represent whitespace in the source markup.
 Therefore a node obtained, for example, using `Node.childNodes[0]`
 may refer to a whitespace text node rather than the actual element the author intended to get.


See Whitespace in the DOM for more information.

 The items in the collection of nodes are objects, not strings. To get data from node
 objects, use their properties. For example, to get the name of the first
 childNode, you can use `elementNodeReference.childNodes[0].nodeName`.

 The `document` object itself has two children: the Doctype declaration and the
 root element, typically referred to as `documentElement`. In HTML
 documents the latter is the `<html>` element.

 It is important to keep in mind that `childNodes` includes *all* child nodes,
 including non-element nodes like text and comment.
 To get a collection containing only elements, use `Element.children` instead.

Value
-----

A live `NodeList` containing the children of the node.

**Note:** Several calls to `childNodes` return the *same* `NodeList`.

Examples
--------

### Simple usage


```js
// Note that parg is an object reference to a <p> element

// First check that the element has child nodes
if (parg.hasChildNodes()) {
  let children = parg.childNodes;

  for (const node of children) {
    // Do something with each child as children[i]
    // NOTE: List is live! Adding or removing children will change the list's `length`
  }
}
```

### Remove all children from a node


```js
// This is one way to remove all children from a node
// box is an object reference to an element
while (box.firstChild) {
  // The list is LIVE so it will re-index each call
  box.removeChild(box.firstChild);
}
```

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

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

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

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

See also
--------

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `Element.children`
Node: previousSibling property
==============================

 The read-only **`previousSibling`** property of the `Node` interface
 returns the node immediately preceding the specified one in its parent's
 `childNodes` list,
 or `null` if the specified node is the first in that list.


**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.


See Whitespace in the DOM for more information.

 You can use `previousElementSibling`
 to get the previous element node (skipping text nodes and any other non-element nodes).


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

Value
-----

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

Examples
--------

The following examples demonstrate how `previousSibling` works with and without text nodes mixed in with elements.

### First example

In this example, we have a series of `img` elements directly adjacent to each other, with no whitespace between them.


```html
<img id="b0" /><img id="b1" /><img id="b2" />
```



```js
document.getElementById("b1").previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.id; // "b1"
```

### Second example

In this example, there are whitespace text nodes (line breaks) between the `img` elements.


```html
<img id="b0" />
<img id="b1" />
<img id="b2" />
```



```js
document.getElementById("b1").previousSibling; // #text
document.getElementById("b1").previousSibling.previousSibling; // <img id="b0">
document.getElementById("b2").previousSibling.previousSibling; // <img id="b1">
document.getElementById("b2").previousSibling; // #text
document.getElementById("b2").previousSibling.id; // undefined
```

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

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

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

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

See also
--------

* `Node.nextSibling`
* `Element.previousElementSibling`
Node: firstChild property
=========================

 The read-only **`firstChild`** property of the `Node` interface
 returns the node's first child in the tree,
 or `null` if the node has no children.

 If the node is a `Document`,
 this property returns the first node in the list of its direct children.


**Note:** This property returns any type of node that is the first child of this one.
 It may be a `Text` or a `Comment` node.
 If you want to get the first `Element` that is a child of another element,
 consider using `Element.firstElementChild`.


Value
-----

A `Node`, or `null` if there are none.

Example
-------

 This example demonstrates the use of `firstChild` and how whitespace nodes
 might interfere with using this property.


```html
<p id="para-01">
  <span>First span</span>
</p>

<script>
 const p01 = document.getElementById("para-01");
 console.log(p01.firstChild.nodeName);
</script>
```


 In the above, the console will show '#text'
 because a text node is inserted to maintain the whitespace between the end of the
 opening `<p>` and `<span>` tags. **Any**
whitespace
 will create a `#text` node, from a single space to multiple spaces, returns,
 tabs, and so on.

 Another `#text` node is inserted between the closing
 `</span>` and `</p>` tags.

 If this whitespace is removed from the source, the #text nodes are not inserted and the
 span element becomes the paragraph's first child.


```html
<p id="para-01"><span>First span</span></p>

<script>
 const p01 = document.getElementById("para-01");
 console.log(p01.firstChild.nodeName);
</script>
```


Now the console will show 'SPAN'.

 To avoid the issue with `node.firstChild` returning `#text` or
 `#comment` nodes, `Element.firstElementChild` can be used to
 return only the first element node.

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

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

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

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

See also
--------

* `Element.firstElementChild`
* `Node.lastChild`