Detailed sample code of javascriptDOM

This article mainly introduces the detailed explanation of javascriptDOM and the related information of the Instance code. If you need it, you can refer to this article to introduce the detailed explanation of the javascript DOM and the related information of the Instance code, for more information, see

Javascript DOM Summary

I always thought that DOM (Document Object Model) is the simplest part of JS. It is undeniable that it is really very simple, because the DOM thinking mode is a bit fixed, just remember some fixed methods, so DOM can be said to be all js (here it refers to the client js) the starting point for getting started.

Recently, when I was doing some exercises useful to DOM, I found that my DOM knowledge is very scattered (I always thought it was good). Many friends may think that DOM, that is to call several methods, or I will use jQuery directly without considering the details of DOM. Yes, that's true. jQuery's DOM encapsulation is unprecedented, but just like growth, it must be done before running, so I think we must have a more detailed understanding of DOM, so I have summarized some usage methods of DOM as follows.

There are some very common and rarely useful DOM specifications in W3C summary. Here we will mainly discuss some common DOM operations (the basic concepts of DOM will not be introduced here ):

Node level

The so-called node hierarchy refers to the existence of nodes (such as tags) with their own characteristics, data, and methods in html documents ), the relationship between nodes constitutes a hierarchy (in fact, it can be imagined as a tree structure ). The W3C DOM1-level Specification defines a NODE interface. This interface has some very useful methods:

Node. ELEMENT_NODE; (element Node)

Node. TEXT_NODE; (text Node)

Node. DOCUMENT_NODE (document Node)

Each node has its own node type flag, that is, the NodeType attribute. For example, the element node's nodeType = '1'; the text node's nodeType = '3 '; nodeType = '9' of the document node ';

1. Document Node

The document node is represented by a document object in a document. Its basic features are as follows:

Console. log (document. nodeType); // 9 console. log (document. nodeName); // # document console. log (document. nodeValue); // null console. log (document. parentNode); // null (it is already the top-level node, the root node of the tree)

Tip one (subnode of the document ):

1.document.doc umentElement can be used to obtain html objects, and can also be obtained through document. childNodes [0] and document. firstchild. However, documentElement can be accessed more quickly and directly.

Tip two (document information ):

1. Obtain the document title: document. title;

2. Obtain the complete url: document. URL;

3. Obtain the domain name (ip): document. domain;

4. Get the URL of the page: document. referrer;

Tip three (document search element ):

1. Use id: document. getElementById ("xxx"); generally, the page id will be different. If there are multiple identical IDs, obtain the first element with this id.

2. Use tagName: document. getElementsByTagName ("xxx"); to return the Element Set named "xxx!

3. Use name: document. getElementByName ();

Understanding the document object is very simple, and its compatibility is also relatively advanced.

2. Element nodes

Element nodes provide access to element label names, subnodes, and features. Its basic features are as follows:

Var ele = document. getElementById ("element"); // obtain a tag object console through document. log (ele. nodeType); // 1 console. log (ele. nodeName); // The Tag Name console of the returned element. log (ele. nodeValue); // returns null forever!

Tip one (html element ):

　
　　　　var p = document.getElementById("p");　　　　1. console.log(p.id); // "myp"　　　　2. console.log(p.className); // "bd"　　　　3. console.log(p.title); // "Body text"　　　　4. console.log(p.lang); // "en"　　　　5. console.log(p.dir); // "ltr"

Tip two (obtain, set, and delete features ):

1. p. getAttribute ("id"); // "myp" 2. p. setAttribuye ("id", "yourp"); // id changed 3. p. removeAttribute ("id"); // id deleted

Note: In IE7 and earlier versions, there are some abnormal behaviors in the three methods. When you set the class and style features through set, especially for event handlers, there is no effect, get is the same. Therefore, the above three methods should be avoided in general development. It is recommended to set features through attributes.

Tip three (subnode of the element ):

Here is the focus. The following code is available:

 
 
   
  
  
Item 1
   
  
  
Item 2
   
  
  
Item 3
 
 
 
Var mL = document. getElementById ("myList"); // obviously, the mL object has three element nodes. We also know that the number of nodes can be found using the childNodes attribute, but the trap comes with the console. log (mL. childNodes); // 7 //?! How can there be 7? // The reason is that childNodes contains not only element nodes, but also four text nodes. Therefore, you need to filter for (var I = 0, len = ml. childNodes. length; I
 
  
// The best way to do this
  
// If the label names inside the Element Object are the same
  
Var items = ml. getElementsByTagName ("li"); // you can obtain three li node objects.
 

3. text nodes

A text node contains plain text content that can be interpreted literally. plain text can contain HTML characters after escaping, but cannot contain HTML code. The basic features of a text node are as follows:

123
Var myp = document. getElementById ("myp") // obtain the Element Node var tx = myp. childNodes [0] // the features of childNodes are also mentioned earlier. This time, the console of the text node is obtained. log (tx. nodeType) // 3 console. log (tx. nodeName) // The nodeName of all text nodes is "# text"; console. log (tx. nodeValue) // 123 (the text contained by the node). Note that the element node cannot obtain the text of the text node it contains. // Therefore, its parent node is obviously an element node.

Tip one:

Two methods for creating a text node: document. createTextNode (), document. createText ();

After being created, it is not directly embedded in the document and must be referenced.

var a = document.createElement("p");　　　　var b = document.createTextNode("123");　　　　a.appendChild(b);　　　　document.body.appendChild(a);

This will appear at the end of the body

123

Such a label

I personally think DOM is definitely an entry point for learning js, but it also takes a long time to polish it. I have read DOM no less than three times. It is just a DOM1-level specification, and every time there is something new. If you are learning DOM, you must pay attention to some traps and spend more time thinking.

The above is a detailed explanation of the javascript DOM Sample Code. For more information, see other related articles in the first PHP community!