Home >Web Front-end >JS Tutorial >JavaScript DOM Learning Chapter 1 Introduction to W3C DOM_Basic Knowledge
JavaScript DOM Learning Chapter 1 Introduction to W3C DOM_Basic Knowledge
- WBOYOriginal
- 2016-05-16 18:34:301116browse
In this chapter I mainly introduce the W3C first-level DOM that has been supported by the new generation of browsers. Gives you a general idea of how they work and gives you an idea of what you can do with them.
First, some suggestions for DOM and the purpose of DOM design, then I will tell you what nodes are and how to traverse nodes through the DOM tree. Next is how to get a specific node and how to change its values and attributes. Finally, there is the ultimate goal of DOM: how to create a new node of your own.
Recommendation
Level 1DOM is developed by W3C to provide any programming language to access XML documents. No matter what language program you use to process XML documents, as long as it is the methods and attributes in Level 1DOM. Whether it's Perl, VBScript or JavaScript you can read any value you want and modify them.
As you may guess, this paragraph describes an ideal situation, and differences still exist (such as browsers). However, this part of the content is still relatively small, and learning how to process XML in JavaScript will also be helpful to your learning in other languages.
To some extent, HTML can also be regarded as an XML document. As long as the browser can handle the corresponding scripts, Level 1 DOM can also run very well in HTML.
You can read the text and attributes of each HTML tag, you can delete each tag and their content, and you can also insert a new tag into an existing document in real time without modifying it on the server. .
Because all aspects of modifying XML must be considered at the beginning of the design, there are some methods that may never be used by ordinary web engineers. For example, you can use it to modify HTML comments, but I don't see why you want to do this. There is also some DOM handling of DTD/Doctype content that you don't need in your web design, so ignore it and focus on your daily needs.
Nodes
The Document Object Model is a model of how multiple elements within a document are related to each other. In Level 1 DOM, every object is a node. So if you write:
This is a paragraph
Then you create two nodes: the element P and the text node whose content is "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:
This is a < ;B>Paragraph
Then the element node p has two child nodes, one of which has its own child node.
The last is the parameter node. (Confusingly, they don't count as children of element nodes. In fact, I did some testing while I was writing this chapter, and IE5 doesn't treat parameter nodes as children of elements at all.) So :
This is a paragraph
The structure of
may be like this:
<P> ----------------<br><br> -------------- ALIGN<br><br> This is a <B> |<br> | right<br><br> paragraph
This 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, which will be skipped for now.
As you know, the p element also has its own parent node, which is usually the document, but sometimes it may be a DIV. So the entire document can be viewed as a tree composed of many nodes, and most of these nodes have their own child nodes.
<BODY><br><br> |-------------------------------------<br><br> <P> ---------------- lots more nodes<br><br> -------------- ALIGN<br><br> This is a <B> |<br> | right<br><br> paragraph
Traverse the DOM tree
Once you know the structure of the DOM tree, you can traverse it to find the elements you want. For example, assume that the element node p is already stored in the variable x (we will explain how this is done in a moment). If we want to access BODY at this time:
We get the parent element of x, and then we can modify it. This way you can reach node B:
childNode is an array containing all the child nodes of x. Of course, the array is numbered starting from 0, so childNode[0] is the text node "This is a " childNode[1] is the B node.
Two special ones: x.firstChild represents the first child node of x; x.lastChild represents the last child node of x.
Assume p is the first child node of BODY, and BODY is the first child node of document, so in order 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];
Even this stupid one:
gets an element
However, Traversing the document this way is too cumbersome. Because the goal of Level 1 DOM design is to allow you to modify the entire DOM tree, you must accurately know the structure of the DOM tree, which will quickly lead to some problems.
So there are some ways to get to the element you want quickly. Once you get 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 easiest way is to just jump over. With document.getElementByTagName you can quickly create an array containing all B tags in the document. Assuming our B is the first one, then you can simply write:
x contains element node B. First you instruct the browser to get all 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:
Now you first reach the first paragraph 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 requiring a DOM structure is to give B an ID:
This is a paragraph< ;/B>
Now you can simply write: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 bit of text to 'bold bit of text'. We need to access the correct element and modify its nodeValue. Now the correct element is not element B but its child element text node: what we want to change is the text, not the element. So you can write:
element changes.
You can modify any text node or parameter through nodeValue. For example, you can modify the ALIGN parameter of a paragraph. This is also very simple, first find the element you need (in this case the parent element of the B element), and then use the setAttribute() method to set the value you want:
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');
}
创建和删除元素
修改元素固然有用，但是还是不如创建你需要的元素然后插入到现有的文档中。我可以很简单的在这个段落后面添加一个HR元素然后很简单的删除它。
创建元素使用下面的方法:
var x=document.createElemnt(‘HR')
这样HR就创建并且存储在x中。第二步就是把x插入到文档之中。我写了一个ID是inserthere的SPAN，我们就把它插入到这。所以我们使用appendChild()方法：
删除它稍稍有点麻烦。我先创建一个临时变量node来存储SPAN，然后我告诉他移除他的第一个子元素：
var node=document.getElementById(‘inserthere');
node.removeChild(node.childNode[0]);
同样的方法我们也可以创建一个新的元素然后添加在ID是hereweare的B元素上。
var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);
你可以试一试，你会注意到用老的办法可能不会移除新加的文本，那是因为他们已经成为分离的两部分了：
<B><br><br> ------------<br><br> paragraph A new text node<br> has been appended!
(可以通过normalize()来把他们合并，但是IE5不支持）
我不打算告诉你怎么移除它，自己练习会比较有收获
翻译地址：http://www.quirksmode.org/dom/intro.html
转载请保留以下信息
作者：北玉(tw:@rehawk)
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills