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

This article will explain in detail how to learn the operation of Html DOM tree in detail, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Do you understand the concept of HTML DOM tree, here to share with you, DOM is the document object Model (Document Object Model), is a browser-based programming API interface, W3C recommendations, each browser has some subtle differences, simple Javascript must be combined with DOM to do DHTML programming, in order to make beautiful results, applied to WEB. Therefore, you must have some understanding of DOM in order to apply Javascript to WEB, or your RIA application, because DHTML is essentially about manipulating DOM trees.

DOM tree

The roots of DOM trees are unified as document roots-since document,DOM is a tree structure, they naturally have the following relationships:

◆ root node (document)

◆ parent node (parentNode)

◆ child node (childNodes)

Brother node

(sibling) (sibling)

Example:

Suppose the HTML of the web page is as follows

Never-online'swebsite tutorialofDHTMLandjavascriptprogramming

With reference to the concept of the tree, we draw the DOM tree of the HTML document structure:

Html

Body head

Divt itle

Text text

From the diagram above, we can see that html has two child nodes, and html is the parent node of these two child nodes. Head has a node, title,title has a text node, and doby has a node. There is a text node under div,div.

Manipulate the DOM tree

As I said at the beginning, the essence of DHTML is to manipulate the DOM tree. How do you operate it? Suppose I want to change the text of the div node in the above HTML document, what should I do?

Sample code:

Never-online'swebsite functionchangedivText (strText) {varnodeRoot=document;// this is the root node varnodeHTML=nodeRoot.childNodes [0]; / / this is the html node varnodeBody=nodeHTML.childNodes [1]; / / body node varnodeDiv=nodeBody.childNodes [0]; / / DIV node varnodeText=nodeDiv.childNodes [0]; / / text node 'nodeText.data=strText;// text node has the attribute data, so we can change this attribute and successfully manipulate a node} tutorialofDHTMLandjavascriptprogramming in the DOM tree

As you can see from the above example, we can use the above method to manipulate any node on the DOM tree.

Note:

1. Except for cross-domain, cross-domain is usually used to operate frame. To put it simply, two frame do not belong to the same domain name.

two。 For demonstration purposes, the method used is to traverse from the root node to the text node, and there is a more concise approach to the DOM method, which will be illustrated by more examples later.

On how to learn the operation of the Html DOM tree to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.