For Web programming, the App knowledge of DOM and the ability to manipulate the DOM are the two most important factors.
Simply because the DOM gives you the power to change everything of a website, when all content can be added, removed, deleted, edited to bring the best experience and content. In this series will help you understand the nature and usage of the DOM.
The browser process forms the DOM
Details of the learning process here .
As you all know HTML is a hypertext markup language. When we look at an HTML file we see text, and the browser looks at the DOM tree.
DOM stands for Document Object Model, roughly translated as a model of objects in HTML documents.
The DOM is a tree-like structure, telling the browser the structure of the text, which is then presented as a visual image.
As you know, each HTML tag will have properties (Properties) and a parent-child hierarchy with other HTML tags.
The hierarchy and attributes of this HTML tag are called selectors and in the DOM will be responsible for handling issues such as changing the tag’s attributes, changing the HTML structure of the tag, …
Let’s take a look at the tree structure that the DOM represents:
In addition, the DOM helps manipulate data in an object-oriented model.
The elements within a structured document are defined as objects, methods, and properties that can be easily accessed while maintaining structure: each element is an object, possessing objects. attributes and methods to work with such properties like add, delete, edit, update.
Besides, you can also add and remove elements as you like, keeping the content and structure of the website always dynamically updated.
DOM structure like
For the HTML DOM, each component is considered a node, represented on a tree structure tree called DOM Tree.
Different elements will be classified into different nodes but the most important are 3 types:
- Document node
- Element node
- Text node
Root node: Document is the root node. The starting point for building a DOM tree is an HTML document, usually represented by the
Button element: represents an HTML element.
Text button: Each character string in an HTML document, inside an HTML tag, is a text button.
It can be a paragraph represented by the
<p>tag, or the title of the title in the
There is also an attribute node and a comment node, in which the attribute node describes the properties of an element node with its own characteristics.
Relationship between nodes
- The root node (document) is always the first node.
- All non-root nodes have only one parent.
- A node may have one or more children, but may not have any.
- Nodes with the same parent node are called sibling nodes.
- In sibling nodes, the first node is called the first child (firstChild), the last node is called the youngest (lastChild).
- Has attributes (DOM HTML & DOM CSS): innerHTML, name, className, attributes, accessKey …
- There are methods: getAttribute (), getElementsByClassName (), getElementsByTagName (), querySelectorAll (), removeAttribute (), scroll (), …
- There are events (DOM Event & DOM EventListener :): click, mousedown, wheel, focusin, copy, …
- There is inheritance (DOM Node): Node.localName, Node.prefix, Node.removeChild (), ..
- DOM Document: is responsible for storing all components in the document of the website.
- DOM Element: is responsible for accessing certain HTML tags through properties such as class name, id, and name of HTML tag.
- DOM HTML: Specialized in handling issues related to the content and attributes of HTML tags
- DOM CSS: is responsible for changing the CSS format of the HTML tags.
- DOM Event: is responsible for assigning events like onclick (), onload () to HTML tags
- DOM EventListener: is responsible for listening for events acting on that HTML tag.
- DOM Navigation: used to manage and manipulate HTML tags, showing the parent-child relationship of HTML tags.
- DOM Node, Nodelist: is responsible for manipulating HTML through objects (Object).
Technology changes create new DOM concepts often used in famous Framwork like ReachJS, VueJS, …
- Original DOM
- Shadow DOM
- Virtual DOM
DOM is a very complicated concept for anyone who wants to start working with it.
In the beginning of this series I would like to introduce the concepts, processes of formation, structure, and listing of the DOM types that we will begin and gradually go into exploring each more specific concept.
Once we have an overall picture of how the DOM works, we can learn and challenge with basic to advanced DOM processing techniques without much difficulty.
In the next section, we will continue to explore the methods of manipulating the DOM as mentioned above.
DOM creation process: ( https://viblo.asia/p/dom-in-details-hieu-ro-hon-ve-document-object-model-ByEZkppolQ0