AJAX Development (2)

Common Methods of Element:

Method	Description
GetAttribute ()	Returns the value of a specified attribute in string format.
GetAttributeNode ()	Returns the value of a specified attribute in the form of an Attr node.
GetElementsByTabName ()	Returns an array of nodes that contain the child nodes of all the Element nodes with the specified tag name. The sequence is the order in which the elements appear in the document.
HasAttribute ()	If the element has a property with the specified name, true is returned.
Removeattribute ()	Deletes a specified attribute from an element.
Removeattributenode ()	Deletes the specified ATTR node from the attribute list of the element.
Setattribute ()	Set the specified attribute to the specified string value. If the attribute does not exist, add a new attribute.
Setattributenode ()	Add the specified ATTR node to the attribute list of the element.

The Attr object represents the attributes of the document Element, including the name and value attributes. It can be obtained through the attributes attribute of the Node interface or the getAttributeNode () method of the Element interface. However, in most cases, the simplest method to use Element attributes is getAttribute () and setAttribute (), rather than the Attr object. 7.4.3. Using DOM to operate the HTML document Node object defines a series of attributes and methods to facilitate traversing the entire document. You can use the parentNode attribute and the childNodes [] array to move up and down in the document tree. You can traverse the childNodes [] array or use the firstChild and nextSibling attributes to perform cyclic operations, you can also use lastChild and previussibling to perform reverse loop operations, or enumerate the child nodes of a specified node. The appendChild (), insertBefore (), removeChild (), and replaceChild () methods can be called to change the child nodes of a node and thus change the document tree. It should be noted that the value of childNodes [] is actually a NodeList object. Therefore, you can enumerate all subnodes of a given node by traversing each element of the childNodes [] array. By recursion, You can enumerate all nodes in the tree. The following table lists some common attributes and methods of a Node object: common attributes of a Node object:

Attribute	Description
Attributes	If the node is an element, the attribute of the element is returned in the form of namednodemap.
Childnodes	Store the subnodes of the current node in the form of node. If no child node exists, an empty array is returned.
Firstchild	Return the first subnode of the current node as a node. If no subnode exists, the value is null.
Lastchild	Return the last subnode of the current node as a node. If no subnode exists, the value is null.
Nextsibling	Return the sibling node of the current node in the form of node. If no such node exists, null is returned.
Nodename	The name of the node. The element node represents the Tag Name of the element.
Nodetype	Indicates the node type.
Parentnode	Return the parent node of the current node in the form of node. If no parent node exists, the value is null.
Previussibling	Return the sibling Node next to the current Node and before it in the form of Node. If no such node exists, null is returned.

Common Methods for Node objects:

Method	Description
AppendChild ()	Add a node to the childNodes [] Group of the current node to add a node to the document tree.
CloneNode ()	Copy the current node or all its child nodes.
HasChildNodes ()	If the current node has a subnode, true is returned.
InsertBefore ()	Insert a node to the document tree before the specified child node of the current node. If the node already exists, delete it and insert it to its location.
RemoveChild ()	Delete the child node from the document tree and return the specified child node.
ReplaceChild ()	Delete the child node from the document tree, return the specified child node, and replace it with another node.

Next, let's use the preceding DOM Application Programming Interface to try to operate HTML documents. A. the node DOM that traverses the document treats an HTML document as A tree. Therefore, traversing the entire tree is A common practice. As mentioned earlier, here we provide two examples of traversal trees. Through it, we can learn how to use childNodes [] and firstChile, lastChild, nextSibling, and previussibling to traverse the entire tree. Example 1 -- sample3_1.htm: This example uses childNodes [] and recursion to traverse the entire document, count the total number of Element elements in the document, and print out all Element tag names. Note that when using DOM, you must wait for the document to be loaded and then perform traversal and other actions. Sample3_1.htm code: