A brief analysis of Dom in JavaScript

This article is a brief introduction to what is the DOM, the dynamic operation of the DOM elements, the use of JSJS operation style and the introduction of the Form object, is a personal understanding of the DOM in JavaScript, the summary, recommended to the small partners.

What is DOM?

1. Introduction

Document Object model, called DOM, is a standard programming interface recommended by the Consortium for processing extensible flag languages. The history of Document Object model dates back to the "browser wars" between Microsoft and Netscape in the late 1990, and the two sides gave the browser powerful features on a massive scale in order to live and die in JavaScript and JScript. Microsoft has added a number of proprietary things to Web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, so many Web pages using non-Microsoft platforms and browsers do not display properly. Dom is the masterpiece that was brewed at that time.

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

The Document Object model, in fact, is an internal representation of various elements in HTML, such as headers, paragraphs, lists, styles, IDs, and so on in HTML, all of which are accessible through the DOM.

JavaScript is ultimately about manipulating HTML pages, making HTML into DHTML, and using DOM to manipulate HTML pages. Dom is the simulation of HTML pages into an object, if JavaScript is only performing some calculations, loops and other operations, and can not manipulate the HTML will lose its meaning.

Dom is the model of an HTML page that makes each label an object, and JavaScript can programmatically control the text boxes, layers, and so on in the Web page by invoking the properties and methods in the DOM. 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.

2. Graphic

about Windows The entire page or the window is a Windowed Object---------------window is a top-level object

The variables and methods defined in the page are all windows

Window.id

document.getElementById ()

You can omit windows 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

Can not write Windows do not write, so you can reduce the number of JS file bytes.

Copy code code as follows:

Window.alert (' Everyone good! '); /Pop-up warning dialog box

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

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

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

Dynamically manipulating DOM elements

1. Get Dom

getElementById (), (very often), gets the object based on the ID of the element, and the ID in the Web page cannot be duplicated. You can also refer to an element directly by its ID, but with a valid range,

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

getElementsByTagName (), gets an array of elements for the specified label name, such as getElementsByTagName ("input") to get all theLabel. * Indicates all labels

2. Add, remove, replace

Document.Write can only be created dynamically during page loading.

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 corresponding element by calling the AppendChild () of an element. The parent Element object. RemoveChild (child element object);

createelement (' element '); Create a node

AppendChild (node); Append one node

RemoveChild (node); Remove a node

ReplaceChild (new,old); replace one node

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

Method:

Property:

FirstChild

LastChild

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

How do you manipulate the elements of a page by innerHTML or createelement (), AppendChild (), and removechild ()?

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

2. For the use of the innerhtml= ' approach to delete nodes, there may be memory problems in some cases. For example: There are many other elements under the div, and each element is bound with an event handler. At this point, innerHTML only removes the current element from the node tree, but those event handlers still occupy memory.

JS Operation style

The style of modifying an element is the ClassName property.

(class is a reserved word for JavaScript, attributes cannot be used with keywords, reserved words so it becomes classname) the effect of the page switch light.

Modifying the style of an element cannot this.style= "background-color:red".

Properties that modify the style individually use the style. Property name. Note the attribute names may not be the same when the property name is manipulated in JavaScript in CSS, mainly in attributes that are contained in those attribute names, because JavaScript-cannot be a property, 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 ()//is the equivalent of an event that triggers an element's clicks, gets focused, and loses focus through a program.

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 left the control immediately after the page submission, rather than only submit button after submission, when the cursor left to trigger the onblur event, in the onblur call form's Submit method.

After clicking submit the form's onsubmit event is triggered, the data can be verified in the onsubmit, if there is a problem, return False to cancel the submission

The above is the personal understanding of JavaScript dom, I hope you can enjoy it.