Introduction to DOM basics and dom

Introduction to DOM basics and dom
DOM: Document Object Model (DOM) is an Object-oriented Document Model. Concept: common methods used to represent and process an HTML or XML document. DOM is designed based on the conventions of Object managers, so it can be used in any programming language.
D: The document can be understood as the webpage document loaded on the entire Web; O: object call attributes and methods (document Object); M: The model can be understood as the tree structure of the webpage document.
DOM nodes: the DOM can not only find nodes, but also create, copy, insert, delete, and replace nodes. When an HTML page is loaded, the Web browser generates a tree structure to indicate the internal structure of the page.

• The entire document is a document Node
• Each HTML element is an element node.
• The text in the HTML element is a text node.
• Each HTML attribute is an attribute node.
• Annotation is a comment node.

Common Element Node methods: 1. getElementById (): Take a parameter and obtain a specific ID. Example:

If (document. getElementById) {// determine whether getElementById alert is supported ("the current browser supports getElementId ");}

2. getElementsTagName () obtains the list of nodes with the same element.
Example:

Document. getElementByTagName ('lil') // Retrieves all li elements and returns an array.

When passing parameters, not all browsers must be case-sensitive. To prevent unnecessary errors and troubles, we need to develop a case-sensitive habit. 3. getElementsByName (): Get the node list with the same name
Example:

Document. getElementByName ('add') // obtain the input element.

DOM defines standards for accessing HTML and XML documents. W3C DOM standards are divided into three different parts. The core DOM is a standard model for any structured documents. In addition, there are html dom and xml dom.
Html dom: defines the objects and attributes of all HTML elements and the methods to access them.
Example of html dom: for example, in the examination system, when a student answers a question, the function of submitting a answer record is obtained from getting the focus to losing the focus, and when there are unfinished questions, the focus can be obtained, locate the unanswered question directly. The following is a Demo written in html dom that gets and loses focus.
JavaScript code:

function getfocus(){document.getElementById('baidu').focus()}function losefocus(){document.getElementById('baidu').blur()}

Html code:

<! Doctype html> <title> gain/lose focus </title> <script type = "text/javascript" src = 'jiaodian. js'> </script> 

Conclusion: DOM is easy-to-use and simple to traverse, but it has low efficiency, slow parsing speed, and high memory usage. It has an effect on the creation and destruction of a large number of objects.

PS: A summary is not very easy to understand. It should be useful to really understand it. I learned how to use it. More exchanges. O (distinct _ distinct) O ~