Basic HTMLDOM knowledge-* opening flowers *

Basic html dom knowledge-* * Basic html dom knowledge 1. What is DOM?

1. html dom defines the standard methods for accessing and operating HTML documents.

2. html dom presents HTML documents as a tree (node tree) with elements, attributes, and text ).

3. Using JavaScript, you can reconstruct the entire HTML document. You can add, remove, change, or rearrange projects on the page. To change something on the page, JavaScript needs to obtain an entry to access all elements in the HTML document. This entry, along with the methods and attributes for adding, moving, changing, or removing HTML elements, all useDocument Object ModelTo obtain the (DOM ). DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

4. DOM is divided into different parts (core, XML and HTML) and levels (DOM Level 1/2/3 ):

* Core DOM: defines a set of standard objects for any structured document.

* Xml dom: defines a set of standard objects for XML documents.

* Html dom: defines a set of standard HTML document objects.

Ii. html dom node and node tree

1. Nodes

According to the DOM, each component in the HTML document is a node.

DOM is as follows:

• The entire document is a document Node
• Each HTML Tag is an element node.
• Text contained in HTML elements is a text node
• Each HTML attribute is an attribute node.
• Annotation belongs to the annotation Node

2. Node level

Nodes have a hierarchical relationship with each other.

All nodes in the HTML document form a document tree (or node tree ). Each element, attribute, and text in an HTML document represents a node in the tree. The tree begins with the document node and continues to expand until all text nodes at the lowest level of the tree.

The following figure shows a document tree (node tree ):

3. node tree

1 2   3     DOM Tutorial 4    5    6     
DOM Lesson one
 7     
Hello world!
 8    9 

All the above nodes exist with each other.Link.

* Each node except the document node hasParent node. For example,AndThe parent node of isNode, text node "Hello world! "The parent node of is

Node.

* Most element nodes haveSubnode. For example,The node has a subnode:Node.The Node also has a subnode: The text node "DOM Tutorial ". </P>

* When a node shares the same parent node, they arePeer (peer node). For example

Is a peer, because their parent nodes areNode.

* Nodes can also haveDescendant, Descendant refers to all the subnodes of a node, or the subnodes of these subnodes, and so on. For example, all text nodes areAnd the first text node isThe descendant of the node.

* Nodes can also haveAdvanced generation. The first generation is the parent node of a node, or the parent node of the parent node, and so on. For example, all text nodes canAs an advanced node.

3. Methods for accessing html dom nodes

1. Search for and access nodes

You can find the elements you want to operate on in several ways:

• Use the getElementById () and getElementsByTagName () Methods
• Use the parentNode, firstChild, and lastChild attributes of an element node

2. getElementById ()AndGetElementsByTagName ()

(1) getElementById () can return elements through the specified ID. Syntax:

document.getElementById("ID"); 

(2) The getElementsByTagName () method returns all elements (as a node list) using the specified tag name. These elements are the descendants of the elements when you use this method. GetElementsByTagName () can be used for any HTML element:

Syntax:

Document. getElementsByTagName ("tag name ");

Or:

Document. getElementById ('id'). getElementsByTagName ("tag name ");

<When accessing the node list, the index number starts from 0>

3. parentNode, firstChild, and lastChild

The three attributes parentNode, firstChild, and lastChild can follow the structure of the document and perform "short-distance travel" in the document ". The most common use of firstChild is to access the text of an element. The parentNode attribute is often used to change the structure of a document;

4. Root Node

There are two special document attributes available for accessing the root node:

• Document.doc umentElement
• Document. body

The first attribute can return the document root node that exists in XML and HTML documents.

The second attribute is a special extension of the HTML page, providingDirect access to tags.

Iv. node Information

Each node has attributes related to certain node information. These attributes are:

• NodeName (node name)
• NodeValue)
• NodeType (node type)

1. nodeName

The nodeName attribute contains the name of a node.

• The nodeName of the element node is the label name.
• The nodeName of the attribute node is the attribute name.
• The nodeName of the text node is always # text
• The nodeName of the document node is always # document

Note: The Tag Name of the XML element contained by nodeName is always capitalized.

2. nodeValue

For text nodes, the nodeValue attribute contains text.

For an attribute node, the nodeValue attribute contains the attribute value.

The nodeValue attribute is unavailable for document nodes and element nodes.

3. nodeType

The nodeType attribute returns the node type.