| Example 2-sample3_2.htm: Use firstChile, lastChild, nextSibling, and previousSibling to traverse the entire document tree. Modify counttotalelement, which is the same as sample3_1.htm: function countTotalElement (node) {// The parameter node is a Node object var total = 0; if (node. nodeType = 1) {// check whether node is the Element Object total ++; // If yes, add 1 elementName = elementName + node to the counter. tagName + "/r/n"; // save tag name} var childrens = node. childNodes; // obtain all the subnodes of a node for (var m = node. firstChild; m! = Null; m = m. nextSibling) {total + = countTotalElement (m); // perform recursive operations on each subnode} return total ;} b. When searching for specific elements in a document to use the DOM, you sometimes need to locate a specific node in the document or have a list of specific types of nodes. In this case, you can call the getElementsByTagName () and getElementById () Methods of the Document Object. Document. getElementsByTagName () returns all Element Node arrays (also of the NodeList type) with the specified tag name in the document ). The order in which elements appear in the array is the order in which they appear in the document. The parameters passed to getElementsByTagName () are case-insensitive. For example, if you want to locate the first <table> tag, you can write: document. getElementsByTagName ("table") [0]. With the exception, you can use document. body to locate the <body> flag, because it is unique. The array returned by getElementsByTagName () depends on the document. Once the document changes, the returned results also change. Compared with getElementById (), getElementById () is more flexible and can locate the target at any time. It is only necessary to assign a unique id attribute value to the target element. This is already used in the cascade menu in AJAX development briefs. The Element object also supports getElementsByTagName () and getElementById (). The difference is that the search domain only targets the caller's subnodes. C. Modify the document content to traverse the entire document tree and search for specific nodes. One of our final purposes is to modify the document content. The following three examples use several common methods of Node to demonstrate how to modify the document content. Example 3 -- sample4_1.htm: This example contains three text nodes and a button. After you click the button, the order of the three text nodes and buttons is reversed. The program uses the Node appendChild () and removeChild () methods. <Html> |
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
