In this chapter I mainly introduce the first-level dom of the web, which has been supported by a new generation of browsers. Make a general understanding of his work and let you know what you can do to them.
First, there are some suggestions for DOM and the purpose of DOM design, and then I'll show you what a node is (nodes) and how to traverse a node through a DOM tree. Then how to get a specific node and how to change his values and attributes. And finally, the ultimate goal of DOM: How to create a new node of your own.
Suggestions
Level 1DOM is used by the consortium to provide access to any programming language for accessing XML documents. No matter what language program you use to process XML documents, as long as the level 1DOM inside the methods and attributes can be. Whether it's Perl, VBScript, or JavaScript, you can read any values you want to read and modify them.
As you may guess, this describes an ideal situation in which differences still exist (such as browsers). And then there's a little bit of it, and the way you learn how to handle XML in JavaScript can help you learn in other languages as well.
HTML can also be viewed as an XML document to some extent. As long as the browser can handle the script, Level 1 DOM also works well in HTML.
You can read the text and attributes of each HTML tag, you can delete each label and their content, and you can insert a new label in the existing document in real time without modifying it on the server.
Because at the beginning of the design to consider all aspects of the modification of XML, so for the general web site engineers, there are some methods may never be used. For example, you can use it to modify the HTML annotation, but I don't see the question of what to do. There are also some DOM processing dtd/doctype that you don't need in your web design, so ignore it and focus on your daily needs.
Node (Nodes)
A Document Object model is a model of how multiple elements within a document relate to one another. In Level 1 DOM, each object is a node. So if you write:
Copy Code code as follows:
<p>this is a paragraph</p>
Then you create two nodes: element p and content is the text node of "This is a paragraph". This text node is contained within the P element, so it can be considered a child node of the P node. Conversely, the P element is the parent node of the text node.
If you write:
Copy Code code as follows:
<p>this is a <B>Paragraph</B></p>
Then the element node P has two subnodes, one of which also has his own child nodes.
The last is the parameter node. (It's confusing that they don't count as child nodes of ELEMENT nodes.) In fact, in the course of my writing this chapter I have done some tests, IE5 does not regard the parameter node as the element's child node at all. So
Copy Code code as follows:
<p align= ' right ' >this is a <B>paragraph</B></P>
The structure of this may be as follows:
<P>----------------
-------------- ALIGN
This is a <B> |
| Right
Paragraph
This is the element node, the text node, and the parameter node. 99% of HTML pages are made up of them, and your main task is how to place them. There are, of course, a lot of other nodes, just skipping over.
As you can see, the P element also has his own parent node, usually the document, and sometimes a div. So the entire document can be seen as a tree composed of many nodes, and most of these nodes have their own subnodes.
<BODY>
|-------------------------------------
<P>---------------- Lots more nodes
-------------- ALIGN
This is a <B> |
| Right
Paragraph
Traversing the DOM tree
Knowing the structure of the DOM tree, you can traverse him to find the element you want. For example, suppose that element node p is already stored in the variable x (wait a minute to explain how this is done). This time if we want to access the body then:
Copy Code code as follows:
We get the parent element of X, and then we can modify it. This will reach the B node:
Copy Code code as follows:
Childnode is an array of child nodes that contain all x. Of course, the array is numbered starting from 0, so childnode[0] is the text node "This is a" childnode[1] that is the B-node.
Two Special: X.firstchild represents the first child node of X; X.lastchild represents the last child node of X.
Suppose P is the first child of the body and the body is the first child of document, so in order to get to the B node, you can use any of the following methods:
Copy Code code as follows:
Document.firstChild.firstChild.lastChild;
Document.firstchild.childnodes[0].lastchild;
DOCUMENT.FIRSTCHILD.CHILDNODES[0].CHILDNODES[1];
Even the following is the more stupid:
Copy Code code as follows:
DOCUMENT.FIRSTCHILD.CHILDNODES[0].PARENTNODE.FIRSTCHILD.CHILDNODES[1];
Get an element
However, it is too cumbersome to traverse the document. Because the goal of Level 1 DOM design is to allow you to modify the entire DOM tree, you must know exactly how the DOM tree is structured, which can quickly cause problems.
So there are some ways to get to the element you want quickly. As soon as you get here, you can traverse every node of the entire DOM tree.
Let's move on to the previous example. You want to reach element B. The easiest way to do that is to jump right over. By Document.getelementbytagname You can quickly create an array that contains all the B tags within the document. Assuming that our B is the first one, then you can simply write:
Copy Code code as follows:
var x = document.getelementsbytagname (' B ') [0]
x contains the element node B. First you command the browser to get all the elements B (document.getelementbytagname (' B ')) of the entire document, and then you select the first element B ([0]) of the first document, and you get what you want.
You can also write:
Copy Code code as follows:
var x = document.getelementsbytagname (' P ') [0].lastchild;
Now you get to the first paragraph of the document P (assuming our p is the first element) and then the last child of P.
The best way to get exactly the element and not need the DOM structure is to give B an ID:
<p align= "Right" >this is a <b id= "Hereweare" >paragraph</B></P> now you can simply write:
Copy Code code as follows:
var x = document.getElementById (' Hereweare ');
Element b is stored in X.
Modify a Node
Now that we have reached the node, we can make some changes. Let's say we want to change the bold text section to ' bold bit of text '. We need to access the correct element and then modify its nodevalue. Now the correct element is not element B but his child element text node: What we want to change is the text, not the element. So you can write:
Copy Code code as follows:
document.getElementById (' Hereweare '). Firstchild.nodevalue= ' bold bit of text ';
The elements change.
You can modify any text node or parameter by NodeValue. For example, you can modify the align parameters of a paragraph. This is also very simple, first find the element you need (in this case the parent of the B element), and then use the SetAttribute () method to set the value you want:
Copy Code code as follows:
function Test2 (val) {
if (document.getElementById && document.createelement)
{
node = document.getElementById (' Hereweare '). parentnode;
Node.setattribute (' Align ', Val);
}
else alert (' Your browser doesn\ ' t support the Level 1 DOM ');
}
Creating and deleting elements
Modifying elements is useful, but it's better to create the elements you need and then insert them into an existing document. I can simply add an HR element after this paragraph and then simply delete it.
Create an element using the following method:
var x=document.createelemnt (' HR ')
So HR is created and stored in X. The second step is to insert X into the document. I wrote an ID of inserthere span, and we inserted it into this. So we use the AppendChild () method:
Copy Code code as follows:
document.getElementById (' Inserthrhere '). appendchild (x);
It's a little bit cumbersome to remove it. I first created a temporary variable node to store the span, and I told him to remove his first child element:
Copy Code code as follows:
var Node=document.getelementbyid (' Inserthere ');
Node.removechild (Node.childnode[0]);
In the same way we can create a new element and then add it to the B element with ID hereweare.
Copy Code code as follows:
var x = document.createTextNode (' A New text node has been appended! ');
document.getElementById (' Hereweare '). appendchild (x);
You can try it and you will notice that the old method may not remove the new text, because they have become two parts of separation:
<B>
------------
Paragraph A new text node
has been appended!
(They can be merged by normalize (), but IE5 not supported)
I'm not going to show you how to remove it.
Translation Address: http://www.quirksmode.org/dom/intro.html
Reprint please keep the following information
Author: North Jade (TW: @rehawk)
