What is Dom?
1. Introduction
Document Object Model (DOM) is a standard programming interface recommended by W3C organizations to handle extensible logo languages. Document Object Model can be traced back to the "browser battle" between Microsoft and Netscape in the late 1990s. In order to fight life and death with JScript in JavaScript, the two sides gave the browser powerful functions on a large scale. Microsoft has added many exclusive things to web page technology, including VBScript, ActiveX, and Microsoft's own DHTML format, which makes many web pages unable to display normally using non-Microsoft platforms and browsers. DOM is a masterpiece that was brewed at that time.
DOM (Document Object Model) is an application program interface (API) for HTML and XML. The 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 web page HTML, such as headers, paragraphs, lists, styles, IDs, etc. in HTML. All elements can be accessed through DOM.
JavaScript ultimately needs to operate the Html page and turn the Html into DHtml, and DOM is required to operate the Html page. DOM is to simulate the Html page into an object. If JavaScript only performs some calculations, loops and other operations, and cannot operate Html, it will lose its meaning.
DOM is the model of the Html page. Each tag is used as an object. JavaScript can programmatically control text boxes, layers and other elements in the web page by calling properties and methods in the DOM. For example, by operating the DOM object of the text box, you can read the values in the text box and set the values in the text box.
2. Illustration
About window the entire page or window is a window object----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
The variables and methods defined in the page are window
window.id
document.getElementById()
When using properties and methods of window objects, window can be omitted.
for example:
window.alert('hello');
Can be omitted to alert('hello');
window.document can be written directly with document
If you can do not write window, don’t write it, as this can reduce the number of bytes in the js file.
The code copy is as follows:
window.alert('Hello everyone!');//The warning dialog box pops up
window.confirm('Are you sure you want to delete it?');//Confirm, cancel the dialog box, return true or false;
window.navigate(url);//Re-navigate the web page to url, supporting IE and Opera11.6. Not recommended, some browsers don't work,
It is recommended to use window.location.href='url';//Support most browsers
Dynamically operate DOM elements
1. Obtain the DOM
getElementById(), (very commonly used), obtain the object according to the element's Id, and the id in the web page cannot be repeated. You can also refer to elements directly through the id of the element, but there is a valid scope.
getElementsByName(), get the object according to the element's name. Since the names of elements in the page can be repeated, such as the names of multiple RadioButtons, the return value of getElementsByName is an object array.
getElementsByTagName(), get an array of elements with the specified tag name. For example, getElementsByTagName("input") can get all <input> tags. *Indicates all labels
2. Add, remove, replace
document.write can only be created dynamically during page loading.
You can call the createElement method of the document to create a DOM object with the specified tag, and then add the newly created element to the corresponding element by calling the appendChild(); method of a certain element. // Parent element object.removeChild(child element object); delete element.
createElement('element'); create a node
appendChild(node); Append a node
removeChild(node); removeChild(node); remove a node
replaceChild(new,old); replace a node
insertBefore(new, refer to); add node to front (insert to front of a node)
method:
property:
firstChild
lastChild
3. Use innerHTML or createElement(), appendChild() and removeChild()?
When manipulating elements of the page, should we use innerHTML, createElement(), appendChild() and removeChild()?
1. When performing a large number of node operations, the performance of using innerHTML is better than frequent Dom operations (there are html parsers specially written in C or C++.). First write the HTML code of the page, and then call innerHTML once, instead of repeatedly calling innerHTML.
2. For deleting nodes using innerHTML='', there will be memory problems in some cases. For example: There are many other elements under the div, and each element is bound to an event handler. At this time, innerHTML simply removes the current element from the node tree, but those event handlers still occupy memory.
js operation style
The style of the element is the className property.
(class is a reserved word in JavaScript. The attribute cannot use keywords or reserved words, so it becomes className) The effect of web page switching lights.
Modify the style of the element cannot be this.style="background-color:Red".
Use "style. Attribute Name" to modify the attributes of the style separately. Note that when the attribute names are operated in JavaScript in css, the attribute names may be different, mainly focusing on attributes containing - in attributes, because - cannot be used in JavaScript.
When operating float style
IE:obj.style.styleFloat='right';
Other browsers: obj.style.cssFloat='right';
Form object
Commonly used: click(), focus(), blur();//Equipment is the event that triggers the click of an element, obtains focus and loses focus through a program.
The form object is a 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 submitting only after the submit button is submitted. When the cursor leaves, the onblur event is triggered, and the form submit method is called in onblur.
After clicking submit, the onsubmit event of form is triggered. Data verification can be performed in onsubmit. If there is any problem with the data, return false to cancel the submission
The above is my personal understanding of javascript's DOM, and I hope everyone can like it.