DOM

CharacterData is an abstract interface and does not exist as node. It is used by Text, ProcessingInstruction, and Comment nodes.

Each node inheriting from the CharacterData interface has an associated mutable string
called data.

To replace data of node node with offset offset, count count, and data data, run these steps:

1. Let length be node’s length.
2. If offset is greater than length, then throw an "IndexSizeError" DOMException.
3. If offset plus count is greater than length, then set count to length minus offset.

4. Queue a mutation record of "characterData" for node with null, null, node’s data, « », « », null, and null.

5. Insert data into node’s data after offset code units.
6. Let delete offset be offset + data’s length.
7. Starting from delete offset code units, remove count code units from node’s data.

8. For each live range whose start node is node and start offset is greater than offset but less than or equal to offset plus count, set its start offset to offset.

9. For each live range whose end node is node and end offset is greater than offset but less than or equal to offset plus count, set its end offset to offset.

10. For each live range whose start node is node and start offset is greater than offset plus count, increase its start offset by data’s length and decrease it by count.

11. For each live range whose end node is node and end offset is greater than offset plus count, increase its end offset by data’s length and decrease it by count.

12. If node’s parent is non-null, then run the children changed steps for node’s parent.

To substring data with node node, offset offset, and count count, run these steps:

The data getter steps are to return this’s data. Its setter must replace data with node this, offset 0, count this’s length, and data new value.

The length getter steps are to return this’s length.

The substringData(offset, count) method steps are to return the result of running substring data with node this,
offset offset, and count count.

The appendData(data) method steps are
to replace data with node this, offset this’s length, count 0,
and data data.

The insertData(offset, data) method steps are to replace data with node this, offset offset, count 0,
and data data.

The deleteData(offset, count) method steps are to

Text

In all current engines.

FirefoxYesSafari1+Chrome1+ OperaYesEdge79+ Edge (Legacy)12+IE5+ Firefox for AndroidYesiOS Safari1+Chrome for Android18+Android WebViewYesOpera MobileYes

[Exposed=Window]
interface Text :  = ""); [); readonly attribute DOMString wholeText;
};

An exclusive Text node is a Text node that is not a CDATASection node.

The contiguous Text nodes of a node node are node, node’s previous sibling Text node, if any, and its contiguous Text nodes, and node’s next sibling Text node, if any, and its contiguous Text nodes, avoiding any duplicates.

The contiguous exclusive Text nodes of a node node are node, node’s previous sibling exclusive Text node,
if any, and its of a node node is the concatenation of the data of all
the Text node children of node, in tree order.

The descendant text content of a node node is the concatenation of the data of all the Text node descendants of node, in tree order.

Text/Text

In all current engines.

Firefox24+Safari8+Chrome28+ Opera15+Edge79+ Edge (Legacy)16+IENone Firefox for Android24+iOS Safari8+Chrome for Android28+Android WebViewYesSamsung Internet2.0+Opera Mobile14+

The new Text(data) constructor steps are to set this’s data to data and this’s node document to current global object’s associated Document.

To split a Text node node with offset offset, run these steps:

1. Let length be node’s length.
2. If offset is greater than length, then throw an "IndexSizeError" DOMException.
3. Let count be length minus offset.
4. Let new data be the result of substringing data with node node, offset offset, and count count.
5. Let new node be a new Text node, with the same node document as node. Set new node’s data to new data.
6. Let parent be node’s parent.

7. If parent is not null, then:

8. Replace data with node node, offset offset, count count, and data the empty string.
9. Return new node.

Text/splitText

In all current engines.

Firefox1+Safari1+Chrome1+ OperaYesEdge79+ Edge (Legacy)12+IE5+ Firefox for Android4+iOS Safari1+Chrome for Android18+Android WebViewYesSamsung Internet1.0+Opera MobileYes

The splitText(offset) method steps are to split this with offset offset.

Text/wholeText

In all current engines.

Firefox3.5+Safari4+Chrome1+ OperaYesEdge79+ Edge (Legacy)12+IE9+ Firefox for Android4+iOS Safari3.2+Chrome for Android18+Android WebViewYesOpera MobileYes

The wholeText getter steps are to return the concatenation of the data of the contiguous Text nodes of this, in tree order.

CDATASection

In all current engines.

FirefoxYesSafari3+Chrome1+ OperaYesEdge79+ Edge (Legacy)12+IEYes Firefox for Android4+iOS Safari1+Chrome for Android18+Android WebView37+Opera MobileYes

[Exposed=Window]
interface CDATASection : Text {
};

ProcessingInstruction

In all current engines.

FirefoxYesSafariYesChrome1+ Opera12.1+Edge79+ Edge (Legacy)12+IE? Firefox for AndroidYesiOS SafariYesChrome for Android18+Android WebView1+Samsung Internet1.0+Opera Mobile12.1+

[Exposed=Window]
interface ProcessingInstruction : CharacterData { readonly attribute DOMString target;
};

ProcessingInstruction nodes have an associated target.

The target attribute must return the target.

Comment

In all current engines.

Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+IE9+ Firefox for AndroidYesiOS Safari1+Chrome for Android18+Android WebView1+Samsung Internet1.0+Opera Mobile12.1+

[Exposed=Window]
interface : CharacterData { constructor(optional DOMString  = "");
};

Comment/Comment

In all current engines.

Firefox24+Safari7+Chrome29+ Opera16+Edge79+ Edge (Legacy)16+IENone Firefox for Android24+iOS Safari7+Chrome for Android29+Android WebView37+Samsung Internet2.0+Opera Mobile16+

The constructor steps are to set this’s data to data and this’s node document to current global object’s associated Document.

StaticRange and Range objects (ranges) represent a sequence of content within a node tree. Each range has a start and an end which
are boundary points. A boundary point is a tuple consisting of a node and an offset. So in other words, a range represents a piece of content within a node tree between two boundary points.

Ranges are frequently used in editing for selecting and copying content.

In the node tree above, a range can be used to represent the sequence
“syndata is awes”. Assuming p is assigned to the p element, and em to the em element, this would be done as follows:

var range = new Range(), firstText = p.childNodes[1], secondText = em.firstChild
range.setStart(firstText, 9) // do not forget the leading space
range.setEnd(secondText, 4)
// range now stringifies to the aforementioned quote

Attributes such as src and alt in the node tree above cannot be represented by a range. Ranges are only useful for nodes.

Range objects, unlike StaticRange objects, are affected by mutations to the node tree. Therefore they are also known as live ranges. Such mutations will not
invalidate them and will try to ensure that it still represents the same piece of content.
Necessarily, a live range might itself be modified as part of the mutation to the node tree when, e.g., part of the content it represents is mutated.

See the insert and remove algorithms, the normalize() method, and the replace data and split algorithms for details.

Updating live ranges in response to node tree mutations can be expensive. For every node tree change, all affected Range objects need to be updated. Even if the application
is uninterested in some live ranges, it still has to pay the cost of keeping them up-to-date
when a mutation occurs.

A StaticRange object is a lightweight range that does not update when the node tree mutates. It is therefore not subject to the same maintenance cost as live ranges.

A boundary point is a tuple consisting of a node (a node) and an offset (a non-negative integer).

A correct boundary point’s offset will
be between 0 and the boundary point’s node’s length, inclusive.

The position of a boundary point (nodeA, offsetA) relative to a boundary point (nodeB, offsetB) is before, equal, or after, as returned by these steps:

1. Assert: nodeA and nodeB have the same root.

2. If nodeA is nodeB, then return equal if offsetA is offsetB, before if offsetA is less than offsetB, and after if offsetA is greater than offsetB.

3. If nodeA is following nodeB, then if the position of (nodeB, offsetB) relative to (nodeA, offsetA) is before, return after, and if it is after, return before.

4. If nodeA is an ancestor of nodeB:

   1. Let child be nodeB.

   2. While child is not a child of nodeA, set child to its parent.

   3. If child’s index is less than offsetA, then return after.

5. Return before.