Analysis of DOM_javascript techniques in javascript

This article briefly introduces what DOM is, how to dynamically operate DOM elements, how to use jsjs operation styles, and how to use Form objects. it is a summary of my understanding of DOM in javascript, recommended to friends. What is Dom?

1. Introduction

Document Object Model (DOM) is a standard programming interface recommended by W3C for processing extensible markup language. The history of the Document Object Model can be traced back to the "browser war" between Microsoft and Netscape in the late 1990 s. The two sides decided to survive and survive JavaScript and JScript, so they granted powerful functions to the browser on a large scale. Microsoft has added a lot of exclusive items in webpage technology, including VBScript, ActiveX, and Microsoft's own DHTML format, which makes it impossible for many webpages to be displayed normally on non-Microsoft platforms and browsers. DOM is a masterpiece developed at that time.

DOM (Document Object Model) is an application interface (API) for HTML and XML ). DOM plans the entire page as a document at the node level.

The so-called Document Object Model is an internal representation of various elements in the HTML of a webpage, such as headers, paragraphs, lists, styles, and IDs in HTML, all elements can be accessed through DOM.

JavaScript eventually requires operations on Html pages to convert Html into DHtml, and DOM is required for operations on Html pages. DOM simulates an Html page as an object. If JavaScript only performs some computation, loop, and other operations, and cannot operate Html, the meaning of its existence will be lost.

DOM is the model of Html pages. every tag is used as an object. by calling the attributes and methods in DOM, JavaScript can program and control the text box, layer, and other elements in the webpage. For example, you can read the value in the text box and set the value in the text box by operating the DOM object of the text box.

2. Illustration

For a window, the entire page or window is a window object ------------- window is a top-level object.

The variables and methods defined on the page are all windows

Window. id

Document. getElementById ()

Window can be omitted when the properties and methods of window objects are used.

For example:

Window. alert ('Hello ');

It can be omitted as alert ('Hello ');

Window.doc ument can directly write document

You do not need to write it without writing a window, which can reduce the number of bytes in the js file.

The code is as follows:

Window. alert ('Hello! '); // The Warning dialog box is displayed.
Window. confirm ('are you sure you want to delete it? '); // Confirmation or cancellation dialog box, return true or false;
Window. navigate (url); // navigate the webpage to the url again. IE and Opera11.6 are supported. Not Recommended. some browsers do not work,

We recommend that you use window. location. href = 'URL'; // supports most browsers.

Dynamically operate DOM elements

1. get DOM

GetElementById (), (frequently used). the object is obtained based on the element Id. the IDs in the webpage cannot be repeated. You can also reference an element directly through the element id, but it has a valid range,

GetElementsByName () is used to obtain the object based on the element name. because the names of elements on the page can be repeated, for example, multiple RadioButton names are the same, the returned value of getElementsByName is an array of objects.

GetElementsByTagName () to obtain the array of elements with the specified tag name. for example, getElementsByTagName ("input") can obtain allLabel. * Indicates all labels.

2. add, remove, and replace

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

You can call the createElement method of document to create a DOM object with the specified tag, and then call appendChild () of an element to add the newly created element to the corresponding element. // Parent element object. removeChild (child element object); delete an 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 the node to the front (insert to a node)

Method:

Attribute:

FirstChild

LastChild

3. use innerHTML, createElement (), appendChild (), and removeChild ()?

When operating on page elements, is the innerHTML method used? createElement (), appendChild (), and removeChild () methods?

1. for a large number of node operations, the use of innerHTML is better than frequent Dom operations (there is an html parser specifically written in C or C ++ .). First, write the HTML code of the page, and then call innerHTML once instead of repeatedly calling innerHTML.

2. memory problems may occur in some cases when innerHTML = ''is used to delete nodes. For example, there are many other elements under p, and each element is bound with an event handler. At this time, innerHTML only removes the current element from the node tree, but those event handlers still occupy the memory.

Js operation style

The style of the modified element is the className attribute.

(Class is a reserved word of JavaScript, and the attribute cannot use keywords or reserved words, so it becomes className.

The style of the element cannot be this. style = "background-color: Red ".

Use "style. attribute name" to modify the style attributes separately ". Note that the attribute names in css may be different when they are operated in JavaScript, mainly including those attributes whose names contain, in JavaScript,-attributes and class names are not allowed.

When operating the float style

IE: obj. style. styleFloat = 'right ';

Other browsers: obj.style.css Float = 'right ';

Form object

Commonly used: click (), focus (), blur (); // It is equivalent to triggering the click, focus, and focus events of elements through a program.

Form object is the form Dom object.

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

Implement autopost, that is, the page is submitted immediately after the focus leaves the control, instead of submitting the submit button. when the cursor leaves, the onblur event is triggered and the form submit method is called in onblur.

After you click submit, the form onsubmit event is triggered. you can perform data verification in onsubmit. if there is a problem with the data, return false to cancel submission.

The above is my personal understanding of the javascript DOM, and I hope everyone will like it.