DOM streamlining tutorial _ basic knowledge

Source: Internet
Author: User
First, let's look at a simple document tree.

Obviously, the top-level node of the tree is a NodeA node. Next, you can move the node to any point in the tree by specifying the appropriate node. In combination with the following code, you can better understand the relationship between nodes in the tree:
NodeA. firstChild = NodeA1
NodeA. lastChild = NodeA3
NodeA. childNodes. length = 3
NodeA. childNodes [0] = NodeA1
NodeA. childNodes [1] = NodeA2
NodeA. childNodes [2] = NodeA3
NodeA1.parentNode = NodeA
NodeA1.nextSibling = NodeA2
NodeA3.prevSibling = NodeA2
NodeA3.nextSibling = null
NodeA. lastChild. firstChild = NodeA3a
NodeA3b. parentNode. parentNode = NodeA

DOM definition provides practical methods for operating the node Structure of a document object. It provides common methods such as executing object insertion, update, deletion, and cloning.
InsertBefore ()-Insert a new subnode before referring to the subnode. If the subnode referenced is null, the new subnode is inserted as the last subnode of the call node.
ReplaceChild () -- replace oldChild with the specified newChild in the childNodes set. If the replacement is successful, oldChild is returned. If newChild is null, you only need to delete oldChild.
RemoveChild () -- deletes the node specified by removeChild from the node's ChildNodes set. If the node is deleted successfully, the deleted child node is returned.
AppendChild () -- Add a new node to the end of the childNodes set. If yes, the new node is returned.
CloneNode () -- creates a new and replicated node. If the input parameter is true, the child node is also copied. If the node is an element, the corresponding attributes are also copied, return the new node.

To access or create a new node in a document tree, you can use the following methods:
GetElementById ()
GetElementsByTagName ()
CreateElement ()
CreateAttribute ()
CreateTextNode ()
Note: There is only one document object on a page. Except getElementsByTagName (), other methods can only be called through document. methodName.

Let's look at the following example:





This is a sample paragraph.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.