A brief analysis of DOM_javascript techniques in javascript

What is a Dom?

1. Introduction

The Document Object Model (DOM) is a standard programming interface for processing extensible markup languages ​​recommended by the W3C organization. The history of the Document Object Model can be traced back to the "browser war" between Microsoft and Netscape in the late 1990s. In order to compete for life and death in JavaScript and JScript, both parties gave browsers powerful functions on a large scale. Microsoft has added many proprietary things to web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, which makes many web pages unable to display properly using non-Microsoft platforms and browsers. DOM is the masterpiece brewed at that time.

DOM (Document Object Model) is the application programming interface (API) of HTML and XML. DOM will plan the entire page into a document composed of node levels.

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

JavaScript ultimately needs to operate Html pages, turning Html into DHtml, and operating Html pages requires the use of DOM. DOM simulates the Html page into an object. If JavaScript only performs some calculations, loops and other operations, but cannot operate Html, it will lose the meaning of its existence.

DOM is the model of the Html page. Each tag is treated as an object. JavaScript can programmatically control text boxes, layers and other elements in the web page by calling the properties and methods in the DOM. For example, by manipulating the DOM object of the text box, you can read and set the value in the text box.

2. Illustration

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

The variables and methods defined in the page are all window

window.id

document.getElementById()

Window can be omitted when using the properties and methods of the window object.

For example:

window.alert(‘hello’);

can be omitted as alert(‘hello’);

window.document can directly write document

Don’t write window if you can. This can reduce the number of bytes in the js file.

Copy code The code is as follows:

window.alert('Hello everyone!');//Pop up warning dialog box
window.confirm('Are you sure you want to delete?');//Confirm and cancel the dialog box, return true or false;
window.navigate(url);//Re-navigate the web page to the url, supports IE and Opera11.6. Not recommended, some browsers don’t work,

It is recommended to use window.location.href=‘url’;//Supports most browsers

Dynamic manipulation of DOM elements

1. Get DOM

getElementById(), (very commonly used), obtains an object based on the ID of the element. The ID cannot be repeated in the web page. You can also reference the element directly by its id, but there is a valid range,

getElementsByName(), obtains an object based on the name of the element. Since the names of elements in the page can be repeated, such as multiple RadioButtons with the same name, the return value of getElementsByName is an object array.

getElementsByTagName(), obtains the element array of the specified tag name. For example, getElementsByTagName("input") can obtain all tags. * means all tags

2. Add, remove, replace

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

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

Method:

Properties:

firstChild

lastChild

3. Use innerHTML or createElement(), appendChild() and removeChild()?

When manipulating the elements of the page, should I use innerHTML or createElement(), appendChild() and removeChild()?

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

2. For deleting nodes using innerHTML='', there will be memory problems in some cases. For example: there are many other elements below the div, and each element is bound to an event handler. At this point, innerHTML just removes the current element from the node tree, but those event handlers still occupy memory.

js operation style

Modify the style of an element using the className attribute.

(class is a reserved word in JavaScript, attributes cannot use keywords or reserved words, so it becomes className) The effect of turning on and off the light on the web page.

You cannot modify the style of an element this.style="background-color:Red".

To modify the style attributes individually, use "style.property name". Note that the attribute names in CSS may be different when operated in JavaScript. The main focus is on those attributes whose attribute names contain -, because - cannot be used as attribute or class names in JavaScript.

When operating float style

IE:obj.style.styleFloat=‘right’;

Other browsers: obj.style.cssFloat=‘right’;

Form object

Commonly used: click(), focus(), blur(); // Equivalent to triggering the click, focus and loss of focus events of an element through a program.

The form object is the Dom object of the form.

Method: submit() submits the form, but the onsubmit event will not be triggered.

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

After clicking submit, the onsubmit event of the form is triggered. Data verification can be performed in onsubmit. If there is a problem with the data, return false to cancel the submission

The above is my personal understanding of JavaScript’s DOM. I hope you all like it.