2015.02.28

what is DOM?

1. Introduction

The Document Object model, or DOM, is the standard programming interface recommended by the Organization for the processing of extensible flag languages. The Document Object model dates back to the late 1990 's "browser Wars" between Microsoft and Netscape, which gave the browser powerful features in order to make life and death in JavaScript and JScript. Microsoft has added a number of proprietary things to Web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, making it impossible for many Web pages to be displayed using non-Microsoft platforms and browsers. Dom is the masterpiece of the time.

The DOM (Document Object model) is an application interface (API) for HTML and XML. The DOM will plan the entire page into a document composed of node hierarchies.

The so-called Document Object model, in fact, is an internal representation of various elements in the HTML of a Web page, such as headers, paragraphs, lists, styles, IDS, etc. in HTML, all of which can be accessed through the DOM.

Dom is the model of the HTML page, each tag as an object, JavaScript by invoking the DOM properties, methods can be in the Web page text boxes, layers and other elements of programmatic control. For example, by manipulating the DOM object of a text box, you can read the value in the text box and set the value in the text box.

JavaScript is ultimately about manipulating HTML pages, making HTML a DHTML, and manipulating HTML pages to use the DOM. The DOM is the HTML page that simulates an object, and if JavaScript just performs some calculations, loops, and so on, and cannot manipulate HTML, it loses its meaning.

about Window

The entire page, or window, is a Windows Object---------------window is a top-level object

The variables and methods defined in the page are the window's

Window.id

document.getElementById ()

You can omit window when you use the properties and methods of the Window object.

Like what:

Window.alert (' Hello ');

Can be omitted as alert (' Hello ');

Window.document can write document directly

Do not write the window can not write, this can reduce the number of JS file bytes.

Window.alert (' Hello everybody! ')//Popup warning dialog box

Window.confirm (' Are you sure you want to delete it? ');//OK, cancel dialog box, return True or false;

Window.navigate (URL);//re-navigating the Web page to the URL, ie, Opera11.6 support. Not recommended, some browsers do not,

We recommend using window.location.href= ' URL ';//support for most browsers

dynamic manipulation of DOM elements

1. Get Dom

getElementById (), (very common), gets an object based on the ID of the element, and the ID in the Web page cannot be duplicated. Elements can also be referenced directly through the ID of the element, but there are valid ranges,

Getelementsbyname (), gets the object based on the name of the element, because the name of the element in the page can be duplicated, such as the name of multiple RadioButton, so the Getelementsbyname return value is an array of objects.

getElementsByTagName (), an array of elements with the specified tag name, such as getElementsByTagName ("input"), can get all the <input> tags. * Denotes all labels

2. Add, remove, replace  

Document.Write can only be created dynamically during the page load process.

You can call the document's CreateElement method to create a DOM object with the specified label, and then add the newly created element to the appropriate element by calling the AppendChild () of the element. The parent Element object. RemoveChild (child element object); Delete element.

createelement (' element '); Create a node

AppendChild (node); Append a node

RemoveChild (node); Remove a node

ReplaceChild (new,old); Replace a node

InsertBefore (new, reference); Add a node to the front (plug in front of a node)

Method:

Property:

FirstChild

LastChild

3. with innerHTML or createelement (), AppendChild () and removechild ()?

Do you use innerHTML or createelement (), AppendChild (), and removechild () to manipulate the elements of the page?

1. For a large number of node operations, using innerHTML performance is better than frequent DOM operations (there are HTML parsers written specifically in C or C + +. )。 Write the HTML code for the page first, and then call innerHTML once instead of repeatedly calling innerHTML.

2. In some cases, there is a memory problem in the way that the node is deleted using Innerhtml= '. For example: There are many other elements under the Div, each of which is bound to an event handler. At this point, innerHTML only removes the current element from the node tree, but those event handlers still consume memory.

JS operation Style

The style of the modified element is the ClassName property.

(class is a reserved word for JavaScript, attributes cannot be classname with keywords, reserved words, and so on) the effect of a web switch.

Modifying the style of an element cannot be this.style= "padding:0px; Font-family:verdana, Arial, Helvetica, Sans-serif; font-size:14.4444446563721px; line-height:15.75pt; " > Modify the properties of the style individually using "style. Property name". Note that in CSS, property names may be different when manipulated in JavaScript, primarily in attributes that contain attributes in the attribute name, because JavaScript--is not a property, a class name.

When manipulating the float style

Ie:obj.style.stylefloat= ' right ';

Other browsers: obj.style.cssfloat= ' right ';

Form Object

Commonly used: Click (), Focus (), blur ();//equivalent to a program that triggers an element's Click, gets focus, and loses focus.

The Form object is the DOM object of the form.

Method: Submit () submits the form, but does not trigger the onsubmit event.

Implement Autopost, that is, the focus leaves the control after the page commits immediately, rather than only submit the submit button after the submission, when the cursor left to trigger the onblur event, in onblur call form's Submit method.

After clicking Submit, the onsubmit event of the form is triggered, the data can be verified in the onsubmit, and if there is a problem with the data, return False to cancel the submission.

2015.02.28