Shulou(Shulou.com)06/03 Report--

What this article shares with you is about the entry-level knowledge of HTML DOM, which the editor thinks is very practical, so I share it with you to learn. I hope you can get something after reading this article.

HTML DOM defines a standard way to access and manipulate HTML documents. HTML DOM presents the HTML document as a tree structure (node tree) with elements, attributes, and text.

51CTO recommended Reading: the difference and relationship between lie HTML DOM and XML DOM

Introduction to HTML DOM

The HTML document object Model (HTML Document Object Model) defines a standard way to access and process HTML documents.

The basic knowledge you should have

Before continuing, you need to have a basic understanding of the following knowledge:

◆ HTML / XHTML

◆ JavaScript

What is DOM?

With JavaScript, you can ReFactor the entire HTML document. You can add, remove, change, or rearrange items on the page. To change something on the page, JavaScript needs an entry to access all the elements in the HTML document. This entry, along with the methods and attributes that add, move, change, or remove HTML elements, is obtained through the document object model (DOM).

In 1998, the W3C released the DOM specification at the level of *. This specification allows you to access and manipulate each individual element in a HTML page. All browsers implement this standard, so DOM compatibility issues are almost impossible to find. DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents. DOM is divided into different parts (core, XML and HTML) and levels (DOM Level 1-2-3):

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

◆ XML DOM: defines a standard set of objects for XML documents.

◆ HTML DOM: defines a standard set of objects for HTML documents.

HTML DOM node

Each component in an HTML document is a node.

Node

According to the DOM,HTML document, each component is a node. The DOM stipulates that:

◆ the entire document is a document node

◆ each HTML tag is an element node

◆ the text contained in the HTML element is a text node

◆ each HTML attribute is an attribute node

◆ comments belong to the comment node

Node hierarchy

Nodes have a hierarchical relationship with each other. All the nodes in the HTML document form a document tree (or node tree). Each element, attribute, text, and so on in an HTML document represents a node in the tree. The tree starts at the document node and continues to stick out branches until all text nodes at the tree level. The following picture shows a document tree (node tree):

HTML DOM node tree

All nodes in a node tree are related to each other.

Document tree (number of nodes)

Take a look at the following HTML document: DOM Tutorial DOM Lesson one

Hello world!

All the above nodes are related to each other. Every node except the document node has a parent node. For example, the parent node of and is a node, and the text node "Hello world!" The parent node of is

Node.

Most element nodes have child nodes. For example, a node has a child node: a node. The node also has a child node: the text node "DOM Tutorial". When nodes share the same parent node, they are peers (peer nodes). For example, and

Are peers because their parent nodes are all nodes.

Nodes can also have descendants, which refer to all the children of a node, or the children of those children, and so on. For example, all text nodes are descendants of nodes, while * text nodes are descendants of nodes. Nodes can also have ancestors. The ancestor is the parent of a node, or the parent of the parent, and so on. For example, all text nodes can use nodes as ancestor nodes.

HTML DOM access node

With DOM, you can access each node in the HTML document.

Find and access nodes

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

◆ uses the getElementById () and getElementsByTagName () methods.

◆ uses the parentNode, firstChild, and lastChild attributes of an element node.

GetElementById () and getElementsByTagName ()

The getElementById () and getElementsByTagName () methods can find any HTML element in the entire HTML document.

Both methods ignore the structure of the document. If you want to find all the

Elements, getElementsByTagName () will find them all, regardless of

At which level in the document is the element. At the same time, the getElementById () method also returns the correct element, no matter where it is hidden in the document structure. These two methods will provide you with any HTML elements you need, no matter where they are in the document! GetElementById () returns the element through the specified ID:

Document.getElementById ("ID")

Note: getElementById () does not work in XML. In an XML document, you must search by having an attribute of type id, which must be declared in XML DTD.

The getElementsByTagName () method returns all elements (as a list of nodes) using the specified tag name, which are descendants of the element you are in when you use this method. GetElementsByTagName () can be used with any HTML element:

GetElementsByTagName () syntax

Document.getElementsByTagName ("tag name")

Or:

Document.getElementById ('ID') .getElementsByTagName ("tag name")

Example 1

The following example returns everything in the document

A list of nodes for the element:

Document.getElementsByTagName ("p")

Example 2

The following example returns all

A list of nodes for elements, and these

The element must be a descendant of an element whose id is "maindiv":

Document.getElementById ('maindiv') .getElementsByTagName ("p")

Node list (nodeList)

When we use a node list, we usually save the list in a variable, like this:

Var x=document.getElementsByTagName ("p")

Now, the variable x contains everything on the page

A list of elements, and we can access these through their index numbers

element. Note: the index number starts at 0. You can cycle through the node list by using the length attribute:

Var x=document.getElementsByTagName ("p"); for (var item0)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.