Getting started with JavaScript Document Object Model, getting started with javascript

Getting started with JavaScript Document Object Model, getting started with javascript
Preface:

The Document Object Model (DOM) is a standard programming interface recommended by W3C for processing Extensible slogans. It is a platform-and language-independent application interface (API) that can dynamically access programs and scripts and update their content, structure, and www document style (currently, HTMl and XML documents are defined by instructions ).

 

The Document Object Model provides a method to access and modify HTML document content. DOM is a standard defined by the W3C. Most Internet browsers implement DOM in various forms and achieve different degrees of success. Like other standards, especially those related to web programming, DOM has been developing for many years. It has three specifications, namely the level of DOM, and the fourth specification is being formulated. One or two sentences can be clearly explained about the power of DOM. This article briefly introduces how to use Javascript to access and operate the DOM.

 

 

1. Obtain Elements

 

When using Javascript programming, getting document elements is the basic way to use DOM. The following describes two basic methods for getting elements: getElementById () and getElementsByTagName ().

 

1. Get elements by ID

The getElementById () method is frequently used in DOM. It obtains a specific element of an HTML document and returns a reference to it. To obtain an element, it must have an ID attribute.

 

Example:

<Div id = "div1"> <p id = "p1"> I am the first P </p> <p id = "p2"> I am the second P </ p> </div> window. onload = function () {var str = document. getElementById ("p1 "). innerHTML; alert (str); // the pop-up is my first P}

 

2. Get it by Tag Name

When only one or several elements are obtained, the getElementById () method works well. But when I need to obtain more than one element at the same time, it is found that the getElementsByTagName () method is more suitable. The latter returns all elements of the specified tag type in array or List format.

Example:

<Div id = "div1"> <p id = "p1"> I am the first P </p> <p id = "p2"> I am the second P </ p> </div> window. onload = function () {var str = document. getElementsByTagName ("p") [1]. innerHTML; alert (str); // output I am the second P, because I got the P with the index of 1 and the index starts from 0} window. onload = function () {var arr = document. getElementsByTagName ("p"); for (var I = 0; I <arr. length; I ++) {alert (arr [I]. innerHTML) ;}} window. onload = function () {var node = document. getElementById ("div1"); var node1 = document. getElementsByTagName ("p") [1]; // obtain alert (node1.innerHTML) from the obtained element );}

 

 

Ii. Operation attributes 1. getAttribute () and setAttribute ()

 

GetAttribute () is used to read the attribute content. The setAttribute () method changes the document Display Effect and/or action in the browser window, however, when we use the view source (view source Code) option in the browser to view the source code of the document, we still see the original property value -- that is, setAttribute () the changes made by the method are not reflected in the source code of the document. This phenomenon of "Table inconsistency" originates from DOM's working mode:Load the static content of the document first, and then refresh them dynamically. Dynamic Refresh does not affect the static content of the document.This is the real power and attraction of DOM: Refreshing page content does not require end users to perform page refresh operations in their browsers.

2. Example

 

    
 
 
3. Create, delete, replace, and insert node objects
We are not limited by interaction with existing elements. We can use DOM to add elements to a document. The following describes several common methods to operate Node objects.
 
1. Create
 
<Div id = "div1"> <p id = "p1"> I am the first P </p> <p id = "p2"> I am the second P </ p> </div> window. onload = function () {var textNode = document. createTextNode ("<p> I am a new javascript node </p>"); document. getElementById ("div1 "). appendChild (textNode );}

 
2. Delete
 
<Div id = "div1"> <p id = "p1"> I am the first P </p> <p id = "p2"> I am the second P </ p> </div> window. onload = function () {var div1 = document. getElementById ("div1"); div1.removeChild (document. getElementById ("p2 "));}

 
3. Substitution
 
<Div id = "div1"> <p id = "p1"> I am the first P </p> <p id = "p2"> I am the second P </ p> </div> window. onload = function () {var div1 = document. getElementById ("div1"); var span1 = document. createElement ("span"); span1.textContent = "I am a new span"; div1.replaceChild (span1, document. getElementById ("p2 "));}

 
 
4. insert
<Div id = "div1"> <p id = "p1"> I am the first P </p> </div> window. onload = function () {var pNode1 = document. createElement ("p"); pNode1.textContent = "insertBefore inserted node"; var pNode2 = document. createElement ("p"); pNode2.textContent = "appendChild inserted node"; document. getElementById ("div1 "). appendChild (pNode2); document. getElementById ("div1 "). insertBefore (pNode1, document. getElementById ("p1 "));}

 
Iv. Summary
In combination with the XML learned in the previous stage, the XML document is a node tree, and all nodes on the tree are associated. Javascript uses DOM to operate nodes in XML. The interpreter translates XML into a DOM object that can be accessed by Javascript, which facilitates the use of Javascript to operate XML documents.