basic DOM for basic developer as a newbie on JavaScript

Tram Ho

— Document Object Model —

Opening

Everyone knows that the task of Javascript is to manipulate html to create smooth magic things to increase the user experience. (colorful)

So how to make Javascript – another programming language (or PHP , Python , … interpreter languages ​​can manipulate HTML). There must be something to bridge.

The answer is through a mechanism called DOM.

So how is the DOM mechanism?

DOM is a model ( Model ) of objects in html Document file of web page, quadrants within a document are defined as Objects with methods and properties that make it easy to access nooks and crannies in html Document. = >> Bummchiuu merge 3 keywords I highlight, we have the concept of Document Object Model.

DOM is interpreted similarly to a tree:

  • A document with root (<html>) is also known as the root node .
  • There are hierarchical branches that are tags (<head>, <body>, <a>, …), also known as element nodes .
  • Within each tag (each element node) the hierarchy:
    • Attribute (the attribute of the tag) is also known as an attribute node
    • Text (which is the text content in the tag) is also known as the text node .
    • The comment code written in any tag is counted as the tag’s bit node (that element node). Look at the picture for easy understanding.

DOM properties and methods

DOM is basically an object that is an object, it has properties and methods (according to oop)

DOM properties and methods, you read through it to know what it has and save the doc when you need it, but in the scope of the article, I will not list all of it too long. https://www.w3schools.com/jsref/dom_obj_all.asp

The purpose of using DOM as well as the main purpose that has the introduction of DOM as mentioned above is to help our interpreted programming language have access to HTML elements. So how to access DOM?

Use available DOM methods to access HTML elements (nodes in the DOM tree). DOM methods have separate duties and are divided into the following groups for ease of use and management:

  • DOM document: is responsible for storing all elements in the document of the website
  • DOM element: is responsible for accessing certain HTML tags through attributes such as class name, id, name of HTML tag.
  • DOM HTML: is responsible for changing the content value and attribute value of HTML tags
  • DOM CSS: is responsible for changing the CSS formatting of the HTML tag
  • DOM Event: is responsible for assigning events such as onclick (), onload () to HTML tags
  • DOM Listener: responsible for listening to events affecting that HTML tag
  • DOM Navigation is used to manage and manipulate HTML tags, express the parent-child relationship of HTML tags
  • DOM Node, Nodelist: is responsible for manipulating HTML through an object (Object)

Virtual DOM

Real DOM virtual DOM. oh the normal mannn DOM still doesn’t understand. So how is DOM real DOM fake.

“Mai” I will continue ..

Share the news now

Source : Viblo