Home > Developer > JavaScript
Document Object Model Dom is used to describe the relationship between the input boxes, images, paragraphs, and other elements in the HTML page and the top-level structure document. Use appropriate methods to select these elements so that we can change them.
In this chapter, I will mainly introduce the W3C first level Dom that has been supported by a new generation of browsers. Give a general understanding of his operations and let you know what you can do to them.
First, some suggestions for Dom and the purpose of Dom design. Then I will tell you what a node is and how to traverse the node through the DOM tree. The next step is how to get a specific node and how to change its values and attributes. Finally, it is the ultimate goal of DOM: how to create a new node.
Suggestions
Level 1dom is developed by W3C to provide access to XML documents for any programming language. No matter what language program you use to process XML documents, you only need to use the methods and attributes in level 1 Dom. Whether Perl, VBScript, or Javascript, you can read and modify any value you want to read.
You may guess that this section describes the ideal situation, and the difference still exists (such as the browser ). Then, this part of content is still relatively small, and your learning of how to process XML in Javascript will also be helpful for your learning in other languages.
To some extent, HTML can be seen as an XML document. As long as the browser can process the corresponding scripts, level 1 Dom can also run well in HTML.
You can read the text and attributes of each HTML tag. You can delete each tag and its content, you can also insert a new tag in the existing document in real time without modifying it on the server.
Because all aspects of XML modification should be taken into account at the beginning of the design, some methods may never be used by General Web engineers. For example, you can use it to modify HTML comments, but I didn't see what to do. There are also some Dom processing DTD/doctype content that you don't need in your web design, so ignore it and focus on your daily needs.
Node (nodes)
The Document Object Model is a model that describes how multiple elements in a document interact with each other. In Level 1 Dom, each object is a node. So if you write:
<p>This is a paragraph</p>
Then you create two nodes: the element P and the text node whose content is "this is a paragraph. This text node is included in the P element, so it can be considered as a subnode of the p node. Conversely, the P element is the parent node of the text node.
If you write:
<p>This is a <B>Paragraph</B></p>
Then, Element Node P has two subnodes, one of which has its own subnodes.
Finally, it is the parameter node. (It is confusing that they are not child nodes of element nodes. In fact, I did some tests when I wrote this chapter. ie5 does not regard the parameter node as the child node of the element at all .) Therefore:
<P ALIGN="right">This is a <B>paragraph</B></P>The structure of may be as follows:
<P> ----------------
| |
-------------- ALIGN
| | |
This is a <B> |
| right
|
paragraphThis is the element node, text node, and parameter node. 99% of HTML pages are composed of them, and your main task is how to place them. Of course, there are many other nodes that are skipped for the moment.
As you know, P elements also have their own parent nodes, usually document, and sometimes a div. Therefore, the entire document can be viewed 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
|
paragraphTraverse the DOM tree
With the structure of the DOM tree, you can traverse it to find the desired element. For example, assume that element node P has been stored in variable X (wait a moment to explain how this works ). In this case, if we want to access the body:
x.parentNode
We get the parent element of X, and then we can modify it. In this way, you can reach Node B:
x.childNode[1]
Childnode is an array containing all the child nodes of X. Of course, the array is numbered from 0, so childnode [0] is the text node "this is a" childnode [1] is the B node.
X. firstchild indicates the first subnode of X, and X. lastchild indicates the last subnode of X.
Assume that p is the first subnode of the body and the body is the first subnode of the document. To reach Node B, you can use any of the following methods:
document.firstChild.firstChild.lastChild;
document.firstChild.childNodes[0].lastChild;
document.firstChild.childNodes[0].childNodes[1];
etc.The following is even stupid:
document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];Get an element
However, it is too much trouble to traverse documents. The purpose of level 1 Dom design is to allow you to modify the entire DOM tree, so you must know the structure of the DOM tree accurately, which will soon cause some problems.
So there are some ways to quickly reach the elements you want. As long as you arrive here, You can traverse every node of the entire DOM tree.
Let's continue with the previous example. You want to reach Element B. The simplest way is to jump over directly. With document. getelementbytagname, you can quickly create an array containing all the B labels in the document. If we assume that B is the first one, you can simply write:
var x = document.getElementsByTagName('B')[0]X contains Element Node B. First, you command the browser to get all the elements of the entire document B (document. getelementbytagname ('B'), and then you select the first element B ([0]) of the first document to get what you want.
You can also write:
var x = document.getElementsByTagName('P')[0].lastChild;Now you first go to the first section P of the document (assuming our p is the first element), and then reach the last child element of P.
The best way to reach the element accurately without 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:
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 modifications. Suppose we want to change the bold text to 'bold bit of text '. We need to access the correct element and modify its nodevalue. The correct element is not Element B but its child element text node: we want to change the text, not the element. Therefore, you can write:
document.getElementById('hereweare').firstChild.nodeValue='bold bit of text';The element is changed.
You can use nodevalue to modify any text node or parameter. For example, you can modify the align parameter of a paragraph. This is also very simple. First find the required element (in this example, it is the parent element of Element B), and then use the setattribute () method to set the value you want:
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');
}Create and delete Elements
It is useful to modify elements, but it is better to create the elements you need and insert them into the existing documents. I can add an HR element after this section and delete it easily.
Use the following method to create an element:
VaR x = Document. createelemnt ('hr ')
In this way, HR is created and stored in X. Step 2: insert X into the document. I wrote a span whose ID is inserthere, And we inserted it here. So we use the appendchild () method:
document.getElementById('inserthrhere').appendChild(x);It is a little troublesome to delete it. I first create a temporary variable node to store the span, and then I told him to remove his first child element:
var node=document.getElementById(‘inserthere’);
node.removeChild(node.childNode[0]);
In the same way, we can create a new element and add it to Element B whose ID is hereweare.var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);You can try it. You will notice that the old method may not remove the newly added text, because they have become two parts of separation:
<B>
|
------------
| |
paragraph A new text node
has been appended!
(You can merge them using normalize (), but ie5 does not)
I don't want to tell you how to remove it, so it will be rewarding to practice it myself.
Http://www.quirksmode.org/dom/intro.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
