HTML and DOM

Tram Ho

Answer open

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 .

Basic concept

1.HTML

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.

2.DOM

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:

  1. Document node
  2. Element node
  3. Text node

Inside :

Root node: Document is the root node. The starting point for building a DOM tree is an HTML document, usually represented by the <html> tag.

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 <h1> tag

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.

We need to distinguish Attribute as attribute of DOM element. Property is the property of a Javascript object.

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).

DOM object

In javascript a DOM Element is an object that should have the following characteristics:

  • 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 classification

Here are 8 commonly used DOM types in JavaScript:

  1. DOM Document: is responsible for storing all components in the document of the website.
  2. DOM Element: is responsible for accessing certain HTML tags through properties such as class name, id, and name of HTML tag.
  3. DOM HTML: Specialized in handling issues related to the content and attributes of HTML tags
  4. DOM CSS: is responsible for changing the CSS format of the HTML tags.
  5. DOM Event: is responsible for assigning events like onclick (), onload () to HTML tags
  6. DOM EventListener: is responsible for listening for events acting on that HTML tag.
  7. DOM Navigation: used to manage and manipulate HTML tags, showing the parent-child relationship of HTML tags.
  8. 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, …

  1. Original DOM
  2. Shadow DOM
  3. Virtual DOM

Just like Javascript is powered by a multitude of libraries and different frameworks. Therefore, the DOM is an object that is managed by Javascript. It makes it easy for programmers to interact with the DOM more and more magic than the original pure.

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.

Reference source:

DOM creation process: ( https://viblo.asia/p/dom-in-details-hieu-ro-hon-ve-document-object-model-ByEZkppolQ0

JavaScript and HTML DOM Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Basic DOM: https://viblo.asia/p/nhung-khai-niem-co-ban-ve-dom-DzVkpoDgenW

Working with the DOM: https://viblo.asia/p/dom-in-javascript-can-ban-jdWrvwrGw38D

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo