JavaScript's common operation with Dom--"JavaScript DOM programming Art" Reading summary

After reading a book must be harvested to collate, or the equivalent of white read. "JavaScript DOM programming Art" is indeed a good JavaScript primer, short refining, and now use an article to summarize some of the knowledge points in this book.

The first thing to understand is what the DOM is. The DOM is the Document Object model, which refers to the Web document, and object, which has three objects in JavaScript, namely user-defined objects, built-in objects (Array, Date, math, and so on) and the host object (the object provided by the browser). The model refers to the Web document can be understood as a kind of node tree rendering, the entire page under the

• element node;
• Text node;
• The attribute node.

　　Each layer of the node is represented by a different label, of course, these tag elements are divided into inline elements (<a><span><b><e>, etc.) and block-level elements (< Div><p><li>, etc.) as well as invisible elements (<script>, etc.). And our operation on these elements is done through the operation of the node, and we must get the elements first, while the methods of acquiring the elements in the DOM are as follows three kinds:

1. document.getElementById (), that is, by ID to get the element, such as document.getElementById (' wrap ') , then get the element with the ID of wrap;
2. document.getElementsByTagName (), that is, the tag name to get the element, such as document.getelementsbytagname (' div '); You get all of the div's Elements ;
3. document.getelementsbyclassname (), this method is practiced in the HTML5, so the prevalence is not high, but this method is really a very method, we expect it to be a great day.

In this way, we can get the elements we need, then we can set their related properties, and this is not an overnight, we need to get the attributes of the element, this time will use the GetAttribute () method, this method does not belong to the Document object method, We can only invoke it through the element node, which has the following grammatical form:

　　Object.getattribute (attribute);

For example, if we want to get a link address for a hyperlink, we can do this: document.getelementsbytagname (' a '). getattribute (' href '); so it's OK. After obtaining the properties of this hyperlink, we find that the link is empty, we want to link it to Baidu, you can set the property through the SetAttribute () method, it can only be used for element nodes, the syntax is as follows:

　　Object.setattribute (Attribute,value);　　

For the above problems can be resolved as follows:

1 var a1 = document.getElementsByTagName (' a '); 2 a1.setattribute (' href ', ' http://www.baidu.com ');

In this way we will be successful to link the hyperlink link to Baidu Network.

After understanding these basic operations, the DOM also provides some convenient node properties, which are described below.

1.ChildNodes Property . Used to get all the child elements of any one element, it gets an array containing all the child elements.

2.NodeType Property . This property is used to get the type of a node, which can return 12 values, and earlier we said that the common node types are element nodes, attribute nodes, and text nodes, the NodeType values of the three are 1, 2, 3, respectively.

3.DOM also provides a way to get the contents of a text node:nodevalue Property , note that it can only be used to get the value of a text node whose syntax format is node.nodevalue.

4. In all childnodes of a node, there are two special nodes, the DOM takes special care of it, which is the first and last, which are represented by FirstChild and LastChild, which means, in fact, Node.firstchild is completely equivalent to node.childnodes[0], and Node.lastchild is completely equivalent to node.childnodes[childnodes.length-1].

At this point, we know the basic common methods of getting nodes and getting some special nodes and manipulating their properties. Later, you will learn about the methods for dynamically writing nodes.

JavaScript's common operation with Dom--"JavaScript DOM programming Art" Reading summary