JavaScript Document Object Model-Text type

Php Chinese Network (www.php.cn) provides the most comprehensive basic tutorial on programming technology, introducing HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, basic knowledge of MySQL and other programming languages. At the same time, this site also provides a large number of online instances, through which you can better learn programming... A Text node is represented by the Text type. It contains plain Text content that can be interpreted literally. Plain text can contain escaped HTML characters, but cannot contain HTML code. Text nodes have the following features:

• The value of nodeType is 3.

• The value of nodeName is "# text ".

• The value of nodeValue is the text contained in the node.

• ParentNode is an Element.

It does not have subnodes.

You can use the nodeValue attribute or data attribute to access the Text contained in the Text node. These two attributes contain the same value. Modifications to nodeValue are also reflected by the data attribute, and vice versa. You can use the following method to operate the text in the node:

• AppendData (text): Add text to the end of the node.

• DeleteData (offset, count): delete count characters from the position starting with offset.

• InsertData (offset, text): Insert text from the position specified by offset.

• ReplaceData (offset, count, text): Replace the text from the position specified by offset to the position specified by offset + count with text.

• SplitText (offset): divides the current text node into two text nodes from the position specified by offset.

• SubstringData (offset, count): extract the string from the position specified by offset to the position specified by offset + count.

In addition to the preceding methods, the Text node also has a length attribute that stores the number of characters in the node. NodeValue. length and data. length also store the same value.

By default, each element that can contain content can have only one text node and must have content. For example:

 
 
 
 
 
 
JQuery home

In the above example, the first

So it has no text nodes. As long as there is content between the start and end labels, there is a text node, so although the second

Contains only one space, but it also has a text node. The nodeValue of the text node is a space. Third

Contains a text node with the value of "jQuery home ".

To access the text subnode, you can use the following method:

Var textNode = p. firstChild; // or p. childNodes [0]

After obtaining the reference of a text node, you can modify it as follows:

p.firstChild.nodeValue = "new string";

If the node exists in the Document Tree, the structure of the modified text node is immediately reflected. In addition, when modifying text nodes, you must note that the strings are encoded in HTML (or XML. That is to say, all signs greater than, less than, or quotation marks are escaped. For example:

p.firstChild.nodeValue = "new string";

The above code will output the text as: new <strong> string </strong>. After parsing by the browser, the displayed text is: newString.

All browsers can access the Text-Type constructor and prototype through js scripts, including IE8 and later browsers.

Create a text node

We can use the document. createTextNode () method to create a new text node. This method receives a parameter: to insert the text in the node. Like setting existing text values, the text as a parameter is also encoded in HTML or XML format:

var textNode = document.createTextNode("hello world");

When a new text node is created, its ownerDocument attribute is also set. However, only when you add a new node to an existing node in the document can you see it in the browser. The following code creates

And add a message to it:

var element = document.createElement("p");element.className = "message"; var textNode = document.createTextNode("hello world");element.appendChild(textNode); document.body.appendChild(element);

Generally, each element has only one text node. However, in some cases, it may contain multiple text nodes, for example:

var element = document.createElement("p");element.className = "message"; var textNode = document.createTextNode("hello world");element.appendChild(textNode); var otherNode = document.createTextNode("javascript");element.appendChild(otherNode); document.body.appendChild(element);

If the two text nodes are adjacent sibling nodes, the two nodes are connected and displayed without spaces in the middle.

Merge text nodes

The adjacent sibling text nodes in the DOM document can easily lead to confusion, because it cannot tell which text node represents which string. In addition, it is common to see adjacent sibling nodes in the DOM document, which makes it necessary to have a method to merge adjacent text nodes. This method is the normalize () method defined by the Node type.

If the normalize () method is called on an element that contains two or more text nodes, all text nodes are merged into one node. The nodeValue of the structure node is equal to the nodeValue of each text node before the merge. For example:

Var element = document. createElement ("p"); element. className = "message"; var textNode = document. createTextNode ("hello world! "); Element. appendChild (textNode); var otherNode = document. createTextNode ("javascript"); element. appendChild (otherNode); document. body. appendChild (element); console.info (element. childNodes. length); // The value is 2element. normalize (); console.info (element. childNodes. length); // The value is 1lele.info (element. firstChild. nodeValue); // hello world! Javascript

The browser never creates adjacent text nodes when parsing text, which is generated only when we manipulate the DOM.

Split text nodes

The Text type also provides a method opposite to the normalize () method: splitText (). This method Splits a text node into two text nodes, that is, the nodeValue value is separated according to the specified position. The original text node will contain content from the starting position to the specified position, and the new text node will contain the remaining text content. This method returns a new text node, which is the same as the original node's parentNode. For example:

var element = document.createElement("p");element.className = "message"; var textNode = document.createTextNode("hello world!");element.appendChild(textNode); var otherNode = document.createTextNode("javascript");element.appendChild(otherNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5);console.info(element.firstChild.nodeValue);     // "hello"                              console.info(newNode.nodeValue);                // " world!"                             console.info(element.childNodes.length);        //2

The above example contains "hello world! "Is divided into two text nodes, the split point starts from the fifth character. Location 5 is the characters "hello" and "wolrd! Therefore, the original text will contain the character "hello", and the new text will contain the character "wolrd! "(Contains spaces ).

The above is the content of the JavaScript Document Object Model-Text type. For more information, see the PHP Chinese website (www.php1.cn )!