DOM is the abbreviation of Document Object Model.
The Document Object Model (DOM for short) is a standard programming interface recommended by the W3C organization for dealing with extensible markup languages. On a web page, the objects that organize the page (or document) are organized in a tree structure, and the standard model used to represent the objects in the document is called the DOM. 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 fight for life and death between JavaScript and JScript, the two sides endowed the browser with powerful functions on a large scale. Microsoft has added a lot of exclusive things to the web page technology, including VBScript, ActiveX, and Microsoft's own DHTML format, etc., so that many web pages cannot be displayed normally on non-Microsoft platforms and browsers. DOM is a masterpiece that was brewed at that time. Dom technology enables users to change pages dynamically, such as dynamically showing or hiding an element, changing their properties, adding an element, etc. Dom technology greatly enhances the interactivity of the page.
2. Knowledge analysis
What is a DOM node?
Everything in an HTML document is a node;the entire document is a document node;
each HTML element is an element node;
text within an HTML element is a text node; text
within an HTML element is a text node;
comments are comment nodes.
Common DOM Operations
Find Nodes; New Nodes; Add New Nodes; Delete Nodes; Modify Nodes
find node
Find by id: document.getElementById
Find by class name: document.getElementsByClassName Findby tag name: document.getElementsByTagName create a
new node
document.createElement('element name'); create a new element node
document.createAttribute('attribute name'); create a new attribute node
document .createTextNode('text content'); create a new text node
add new node
element.setAttribute(attributeName, attributeValue ); add the specified attribute to the element and set the attribute value
element.setAttributeNode(attributeName ); add an attribute node to the element
delete Node
parentNode.removeChild(existingChild ); delete existing child nodes, the return value is to delete the node
DOM. You need to know the element you need to delete, as well as its parent element. Find the child element you want to remove, then use its parentNode property to find the parent:
3. Frequently Asked Questions
4. Solutions
5. Coding practice
6. Think outside the box
Modify the nodeparentNode.replaceChild(newChild, existingChild ); replace the existing child node in the parent node with the new node
7. References
Common dom tree operations
Summary of DOM manipulation in js - very interesting - Blog Park
DOM manipulation of Javascript - do you really understand? - CSDN Blog
w3school online tutorial / rookie tutorial
8. More discussion
Question one
Difference and connection between JavaScript and HTML DOM?
answer:the difference:
1、javascript
JavaScript is a popular browser scripting language. user-friendly.
JavaScript is used by web pages to improve designs, validate forms, detect browsers, create cookies, and more.2、HTML DOM
HTML DOM is a W3C standard (the abbreviation of HTML Document Object Model, Document Object Model for HTML).
The HTML DOM defines a standard set of objects for HTML and standard methods for accessing and manipulating HTML documents.
Through the DOM, you can access all HTML elements, along with the text and attributes they contain. Content can be modified and deleted, and new elements can be created.HTML DOM is platform and programming language independent. It can be used by any programming language such as Java, JavaScript and VBScript.
connect:
1. Through JavaScript, the entire HTML document can be reconstructed. Items on the page can be added, removed, changed or rearranged. To change something on the page, JavaScript needs to gain access to all the elements in the HTML document. This entry, along with methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).2. Javascript mainly uses HTML DOM to obtain, change, and create HTML elements, so as to achieve the goal of beautifying pages and manipulating page elements. Therefore, the most common in Javascript are the various HTML DOM elements and their respective attributes. In addition to these DOM elements, Javascript has its own objects, such as arrays.
3. It can be considered that Javascript mainly manipulates the HTML DOM. The two are not the same. Javascript is a language, and DOM is a model that can dynamically modify documents in various languages (not only js, but also php).
What are the advantages and disadvantages of DOM?
Answer:
The advantages of DOM are mainly manifested in: strong ease of use, when using DOM, all XML document information will be stored in memory, and the traversal is simple, XPath is supported, and the ease of use is enhanced.
The shortcomings of DOM are mainly manifested in: low efficiency, slow parsing speed, high memory usage, and almost impossible to use for large files. In addition, the low efficiency is also manifested in a lot of time consumption, because when using DOM for parsing, an object will be created for each element, attribute, processing-instrUCtion and comment of the document, so that the creation of a large number of objects used in the DOM mechanism and destruction will undoubtedly affect its efficiency.
Question three
What is the difference between core DOM and html DOM?answer:
The core DOM is suitable for manipulating nodes like create, delete, find, etc. HTML DOM is suitable for manipulating properties, such as reading or modifying the value of the property.