Home > Developer > Web Develop
Javascript advanced programming-text node, javascript-node
1. Create a text node:
<script type="text/javascript"> function addNode(){ var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); } </script>
<Script type = "text/javascript"> function addNode () {var element = document. createElement ("div"); element. className = "message"; var textNode = document. createTextNode ("Hello world! "); Element. appendChild (textNode); // var anotherTextNode = document. createTextNode (" Yippee! "); Element. appendChild (anotherTextNode); // insert to document. body. appendChild (element);} </script>
2. canonicalized text node: normalize ()
<Script type = "text/javascript"> function addNode () {var element = document. createElement ("div"); element. className = "message"; var textNode = document. createTextNode ("Hello world! "); Element. appendChild (textNode); // Add another text node var anotherTextNode = document. createTextNode (" Yippee! "); Element. appendChild (anotherTextNode); // Add it to the document body element. body. appendChild (element); alert (element. childNodes. length); // 2 element. normalize (); // normalization process alert (element. childNodes. length); // 1 alert (element. firstChild. nodeValue); // "Hello World! Yippee! "} </Script>
3. Split text nodes:
The result is the opposite of the normalize () method: splitText (). divides a node into two types, that is, splits the nodeValue value according to the specified position.
<script type="text/javascript"> function addNode(){ var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); alert(element.firstChild.nodeValue); //"Hello" alert(newNode.nodeValue); //" world!" alert(element.childNodes.length); //2 } </script>
GetElementsByTagName ("tag name") indicates that the query returns all elements of the tag. Therefore, it is a set.
Document. getElementsByTagName ("tag") is used to query all the tag elements in the document.
Alert (document. getElementsByTagName ("div"). length) returns the number of query results. Here the result is 1
The text of this element should be written in document. getElementsByTagName ("div") [0]. innerHTML.
Take the html text of the first div
======================================
Other examples
<Html>
<Head> <title> test </title> <Script type = "text/javascript">
// Search for the span subnode under the first div in the document
Window. onload = function () {// document loading completion event
Var div1 = document. getElementsByTagName ("div") [0]; // The first DIV of the document
Var spans = div1.getElementsByTagName ("span"); // All SPAN tag elements under the DIV
For (var I = 0; I <spans. length; I ++) {// The text of each SPAN label is displayed cyclically.
Alert (spans [I]. innerHTML );
}
}
</Script>
<Body>
<Div> <span> text 1 </span> <span> second text </span> <span> text </span> </div>
</Body>
</Html>
How does javascript change a text node ??
Document. getElementById ("mi"). innerText = "";
Document. all. mi. innerText = "";
Both of them can be used, or innerHTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
