2. DOM tree
Note: The roots of the DOM tree are unified as document root—document. Since DOM is a tree-like structure, they naturally have the following relationships:
Root node (document)
Parent Node
ChildNodes
Brothers’ Node Brothers’ Node
(sibling) (sibling)
example:
Assume that the HTML of the web page is as follows
Program code
<html>
<head>
<title>never-online's website</title>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
</body>
</html>
We refer to the concept of a tree and draw the DOM tree of the HTML document structure:
html
body head
div title
Text
As can be seen from the above diagram
HTML has two child nodes, and html is the parent node of these two child nodes
There is a node title on the head, and there is a text node under the title.
There is a node div under Doby, and there is a text node under div
3. Operate the DOM tree
As mentioned at the beginning, DHTML is essentially operating the DOM tree. How to operate it?
Suppose I want to change the text of the div node in the above HTML document, how to do it?
Program code
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var nodeRoot = document;//This is the root node
var nodeHTML = [0];//This is an html node
var nodeBody = [1]; //body node
var nodeDiv = [0]; //DIV node
var nodeText = [0];//Text node'
= strText;//The text node has the data attribute, so we can change this attribute, and successfully operate a node in the DOM tree.
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
As can be seen from the above example, we can use the above method to operate any node on the DOM tree. (Note: 1. Except for cross-domain, cross-domain is usually on the operation frame. Simply put, two frames do not belong to the same domain name. 2. For demonstration of the above operation, the method adopted is to traverse from the root node to the text node. There are more concise methods in the DOM method. There will be more examples to illustrate these in the future, and it will be introduced below.)
Previous page12345Next pageRead the full text