Study and summary of DOM object model

DOM Object Model

is an APIfor HTML and XML , representing and manipulating the contents of a document.

A. Introduction

D: represents the document. The role is to change the page document you are writing to a Document object.

javascript There are three types of objects: User-defined Objects (objects created by programmers themselves), built-in objects (built in javascript ECMA-262  Only two built-in objects are defined, namely   GLOBAL  and   MATH  (they are also local objects, by definition, each built-in object is a local object), and the local object is   ECMA-262  class defined (reference type). They include:

Object Function Array String Boolean number Date REGEXP

Error evalerror rangeerror referenceerror syntaxerror TypeError urierror

The host object (the object provided by the browser, all BOM and DOM objects are host objects).

M: Represents the model. the representation of something, theDOM represents the current page loaded into the browser window, the browser provides a model of the Web page, so you can Read the model (map) through JavaScript.

two. Node type.

DOM1 defines a node interface that will be implemented by all node types in the DOM.

A diagram to illustrate the partial hierarchy of a document node

650) this.width=650; "src=" http://s2.51cto.com/wyfs02/M01/7C/FA/wKiom1bdgfvyprNuAABcb06jdLg273.jpg "title=" 1.jpg " alt= "Wkiom1bdgfvyprnuaabcb06jdlg273.jpg"/>

dom tree, the root of the tree is document node, which represents the entire document, representing html element node, which represents the text node is text node, for example, the following nodes are node

Diagram illustrates the relationship between nodes:

650) this.width=650; "Src=" http://s5.51cto.com/wyfs02/M01/7C/FA/wKiom1bdgiKBqocXAAB_wlCfkWk313.jpg " Title= "Node.jpg" alt= "Wkiom1bdgikbqocxaab_wlcfkwk313.jpg"/>

Each node must have a childNodes property, which holds a NodeList object. Nodelist is a class array object that is The result of executing queries dynamically based on the DOM structure. It accesses nodes, either by square brackets or by using the item () method.

Initial contact and common node types: element nodes, text nodes, attribute nodes.

use a graph to explain these several nodes 650) this.width=650; "Src=" http://s4.51cto.com/wyfs02/M02/7C/FA/ Wkiom1bdgltt324taabxgeff6bw301.jpg "title=" 3.jpg "alt=" wkiom1bdgltt324taabxgeff6bw301.jpg "/> <p tittle= "This is a para" > I am the content of the text node </p>

DOM Several common methods:

three. Select Document Element

(1) Select elements by ID:getElementById (); the function is Document Object-specific functions, with only one argument, must be enclosed in single quotes, or double quotes, and the return value is the object of the element node that has the parameter.

; and there is only one argument, the parameter is the name of the label, but it returns an array of objects (Nodelist ) 1,

css getelementsbyclassname (); also accepts only one parameter, and the class name, to specify more class names, as long as in the string argument, separated by a space in the line

such as element.getelementsbyclassname ("Class2 Class1") will be selected in the elements descendant element and applied at the same time the elements of the Class1 and class2 styles (the style name is not distinguished in order), and the return is also an object array (Nodelist object). Corresponds to a specific set of ELEMENT nodes in the document.

(4)Select elements by name:Getelementbyname (); is also a parameter, name , returns an array of objects ( Nodelist object). the Name attribute, valid only in a few HTML elements, such as: form, form element,<iframe>, elements. This is because the name property is built to facilitate the submission of form data .  also, thegetelementbyname () method, which is not in the document class, is available only for HTML documents, XML but not in use.

(5), selecting elements from CSS selectors:document.queryselectorall ("selector") whereselector is a legitimate CSS Selector Selector, such as: through#id,. class,p[tittle= "AAA"] , var test=document.queryselectorall ("#test"); after you get the object that way, continue with the operation. Wait a minute. return valuealsois aObject Array (Nodelist Object ).

These native elements are chosen in a way that is more JQuery is fast . a lot.

Four. gets and sets the property.

(1)getattribute (); only one parameter, intended to obtain the name of the property;

(2)setAttribute(); Allows modification of attribute node values. Method of Use:object.setattribute (attribute,value);

The simple use example code is as follows : 650) this.width=650; "Src=" http://s4.51cto.com/wyfs02/M02/7C/F9/ Wkiol1bdg3iau01uaacc4aodsew821.jpg "title=" 4.jpg "alt=" wkiol1bdg3iau01uaacc4aodsew821.jpg "/>

: 650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7C/FA/wKiom1bdg_ayIKN9AAA0LYosY3M447.jpg "title=" 4.1. JPG "alt=" wkiom1bdg_ayikn9aaa0lyosy3m447.jpg "/>650) this.width=650; src=" http://s3.51cto.com/wyfs02/M00/7C/F9 /wkiol1bdhufwpuigaaa0ep0drq8239.jpg "title=" 4.2.jpg "alt=" Wkiol1bdhufwpuigaaa0ep0drq8239.jpg "/>

Study and summary of DOM object model