The Document object model for the JavaScript starter article

Preface:

The Document Object model, or DOM, is the standard programming interface recommended by the Organization for the processing of extensible superscript languages. It is a platform-and language-independent application interface (API) that dynamically accesses programs and scripts, updates its content, structure, and the style of the WWW document (currently, HTML and XML documents are defined through the Description section).

The Document Object model provides a way to access and modify the contents of an HTML document. DOM is a standard defined by the World Wide Web Consortium. Most Internet browsers have implemented the DOM in various forms and have achieved varying degrees of success. As with other standards, especially those related to Web programming, DOM has been developed for many years. It has three specifications, the so-called DOM level, and a fourth specification is in the making. Dom of the mighty far fly me one or two words can be clearly discussed. This article provides a brief introduction to using JavaScript to access and manipulate the DOM.

first, get the element

When programming with JavaScript, getting the elements of a document is the basic way to use the DOM. Here are two basic methods for getting elements: getElementById () and getElementsByTagName ().

1. Get elements by ID

The getElementById () method is a frequently used method in the DOM. It gets a specific element of the HTML document and returns a reference to it. In order to get an element, it must have an id attribute.

Examples are as follows:

    <div id= "Div1" >        <p id= "P1" >            I was the first p</p> <p        id= "P2" >            I was the second p</p>    </div>        window.onload = function () {            var str = document.getElementById ("P1"). InnerHTML;            alert (str);        Pop Up    I'm the first P        }

2. Access by tag name

The getElementById () method works fine when you get only one or a few elements, but when I need to get more than one element at the same time, I find the getElementsByTagName () method more appropriate. The latter is the return of all elements of the specified label type through an array or list format.

Examples are as follows:

    <div id= "Div1" >        <p id= "P1" >            I was the first p</p> <p        id= "P2" >            I was 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 get the index of 1 p, index starting 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];    Get alert (node1.innerhtml) from the acquired element again            ;    }

second, Operation Properties1, GetAttribute () and setattribute ()

GetAttribute () is the Read attribute content, the SetAttribute () method changes the document, which will make the document display in the browser window and/or behavior of the action changes, but we are in the browser view Source (view source) option to see the source code of the document will still be the original property value-that is, the changes made by the SetAttribute () method are not reflected in the source code of the document itself. This "duplicity" phenomenon stems from the DOM's working mode: loading The static content of the document, and then dynamically refreshing them, dynamic refresh does not affect the static content of the document. This is the real power and allure of Dom: The refresh of page content does not require the end user to perform a page refresh in their browser.

2. Example

    
Iii. Creating, deleting, replacing, inserting node objects
We are not constrained by the interaction with existing elements. We can use the DOM to add elements to the document. Here are a few common ways to manipulate node objects.
1. Create
<div id= "Div1" >            <p id= "P1" > I was the first p</p> <p            id= "P2" > I was 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 was the first p</p> <p            id= "P2" > I was 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 was the first p</p> <p            id= "P2" > I was 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
The Xml,xml document, combined with the previous one, is a node tree, and all nodes in the tree are connected. JavaScript is the use of the DOM to manipulate nodes in XML. The interpreter translates XML into JavaScript-accessible DOM objects, which makes it easier to manipulate XML documents using the JavaScript language.
The Document object model for the JavaScript starter article