Summary of JavaScript (3. DOM)

Overview

The theory of Dom has been mentioned above (JavaScript Summary (1: Basic concepts). The following describes the specific content in Dom. After the browser supports JavaScript, the corresponding API functions are provided for users. When we use the DOM mechanism to operate the document, we only need to call the corresponding API. After the browser receives the HTML document, it will interpret it as a tree and manage it as follows:

 

Let's take a look at some Dom APIs and see if we use these systems to provide functions to access and manipulate the content in the HTML document.

Common dom

// Obtain the corresponding tag in HTML in some way // access an element var objelement = document through the tag ID attribute. getelementbyid ("button1"); // button1 is the tag's idalert (objelement. tagname); // access a group of elements (arrays) through tags var objelements = document. getelementsbytagname ("input"); // The input is the HTML Tag alert (objelements [0]. tagname); // access a group of elements (arrays) through the name attribute var objelementsn = document. getelementsbyname ("button"); // The namealert (objelementsn [0]. tagname); // Method for retrieving an element from an element array var OBJ = objelementsn [0]; var OBJ = objelementsn. button1; // button1 is the tag's idvar OBJ = objelementsn. item (0); // access its parent element through an element. The child element or the same-level element var OBJ = objelement. parentnode; // parent element, which can only have one var OBJ = objelement. previussibling; // var OBJ = objelement on the same layer. nextsibling; // The element var OBJ = objelement under the same layer. childnodes; // array of child elements. The child element may have multiple label elements var OBJ = objelement. firstchild; // The first child element var OBJ = objelement. lastchild; // the last child element // content in the access element (content: string between the start tag and the end; content: HTML (nesting of HTML tags), which needs to be explained; the content is text and displayed directly;) objelement. innerhtml: the modified content of the tag is htmlobjelement. innertext: Label-modified content is treated as text objelement. firstchild. nodevalue: equivalent to the value of the innertext attribute // access element. You can also set Alert (objelement. ID); // element name. attribute name. In this way, the attribute value of an element is objelement. setattribute ("attribute name", attribute value); // Add a new node var objimg = document. createelement ("IMG"); // create a new element, objimg. setattribute ("src", "a.gif"); // you can specify an attribute value for the new element. appendchild (objimg); // Add a child element to the objfather element. appendchild ();