What is html dom – Troubleinthepeace

Javascript is a language used in Browsers and plays an important role in web applications. And the task of Javascript is to manipulate HTML documents in combination with its own syntax to create the “magic” of the website. To manipulate HTML tags, we have to go through a mechanism called DOM.

You are viewing: What is Html dom

So in this article, let’s learn with Hybrid Technologies what the DOM is and how to manipulate the DOM with Javascript!

What is DOM?

DOM stands for Document Object Model, roughly translated as the model of objects in HTML documents. In each HTML tag, there will be 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, etc.

The DOM is used to access HTML and XML documents, which takes the form of a tree of data structures, and normally the DOM model is independent of the operating system and relies on object-oriented programming techniques to describe the document. .

You can refer to the figure below to better understand the DOM.


It can be seen that all the HTML tags will be managed in the document object, the highest tag is the HTML tag, followed by the body and head branching. Inside the head, there are tags like style, title, … and inside the body are countless other HTML tags.

What is HTML DOM?

HTML DOM is a standard object model and programming interface for HTML:

HTML elements as objectsProperties of all HTML elementsMethods to access all HTML elementsEvents for all HTML elements

The HTML DOM is a standard that allows you to perform manipulations with any web page: get, change, add, or delete HTML elements.

DOM structure tree


For HTML DOM, a tree structure called DOM Tree means that every element is considered as a node, represented on a tree. Different elements will be classified differently, but the most important are 3 types: document node, element node, text node.

See also: What is High School – Vocabulary About School Part 1

Root node: is the HTML document itself, usually represented by the tag. document. It can be the website name in the tag, the title in the tag, or a paragraph in the tag

.There are also attribute nodes and comment nodes.Relationships between nodes The root node (document) is always the first node. All non-root nodes have only 1 node. parent. A node can have one or more children, but it can also have no children. Nodes with the same parent are called siblings. Among sibling nodes, the first node is the parent. is called the eldest child (firstChild) and the last node is the youngest (lastChild). Let’s take a look at the DOM tree structure example below:


The root node is .2 sibling node and is a brother because they are all children of .The node has 3 children, in which is the eldest child and the tag.

the second is the youngest child. The element node has 2 children, including 1 text node and 1 attribute node.

DOM manipulation

Manipulating the DOM gives you the power to “change the world”, as any content can be dynamically updated through the DOM properties and methods. Everything from changing the text format, text content to changing the button structure and even adding new buttons, you can do it. Therefore, to create good content, you need to clearly understand how to manipulate the DOM and the meaning of each attribute and method.

Common properties and methods
Properties: id: Identifier – is unique for each element so it is often used for quick and direct DOM access. className: Class name – Also used for direct access like id, but 1 className can be used for multiple parts element.tagName: HTML tag name.innerHTML: Returns the HTML code inside the current element. This HTML snippet is a string containing all elements inside, including element nodes and text nodes.outerHTML: Returns the HTML code of the current element. In other words, outerHTML = tagName + innerHTML.textContent: Returns a character string containing the contents of all text nodes inside the current element.attributes: Set of attributes such as id, name, class, href, title …style: Set of formats of the current element.value: Gets the value of the selected element into a variable.

See also: What is an IP address – Detailed Answers


getElementById(id): Refers to a single node whose id attribute is the same as the search id.getElementsByTagName(tagname): Refers to all nodes whose tagName attribute is the same as the searchable tag name, or more simply understood. is to find all DOM elements that carry HTML tags of the same type. If you want to access all the tags in the HTML document, use document.getElementsByTagName(‘*’).getElementsByName(name): Refers to all nodes with the required name attribute.getAttribute(attributeName): Gets value of attribute.setAttribute(attributeName, value): Edit value of attribute.appendChild(node): Add 1 child node to current node.removeChild(node): Remove 1 child node from current node.

On the other hand, DOM elements are all nodes in the DOM structure tree. They possess additional relational properties to represent the dependencies between the nodes. Thanks to these relational properties, we can access the DOM indirectly based on the relationship and position of the elements:
Relationship properties:

parentNode: node chachildNodes: ConfirstChild nodes: First child nodelastChild: Last child nodenextSibling: Next adjacent sibling nodepreviousSibling: Previous adjacent sibling Node Retrieve the DOM

Indirect access:
Each node in the DOM tree has 6 relational properties to help you get indirect access to the node’s position:

Node.parentNode: refers to the parent node of the current node, and this parent node is unique for each node. Therefore, if you need to find the root root of a node, you have to join the attribute multiple times, for example Node.parentNode.parentNode.Node.childNodes: refer to the direct children of the current node, and bind The result is an array of objects. Note that child nodes are not differentiated by node type, so the resulting array can include many different types of nodes.Node.firstChild: refers to the first child of the current node, and is equivalent. with calling Node.childNodes<0>.Node.lastChild: refers to the last child node of the current node, equivalent to calling Node.childNodes.Node.nextSibling: refers to the sibling node that is next to the current node.Node.previousSibling: refers to the sibling node that is next to the current node.


Direct access:
Direct access will be faster, simpler when you do not need to know much about the relationship and location of the node. There are 3 methods for direct access that are supported in all browsers:

document.getElementById(‘id_to_find’)document.getElementsByTagName(‘div’)document.getElementsByName(‘required_name’)So together we have learned the basics of DOM and how to manipulate DOM with Javascript. Although that’s just the surface knowledge, but you can also see how important and beneficial the DOM is. Hope the article will help you in your work. I wish you every success!

Source: internet

About Troubleinthepeace

Troubleinthepeace specializing in synthesizing information about daily life activities

View all posts by Troubleinthepeace →

Trả lời

Email của bạn sẽ không được hiển thị công khai.