First of all I’m thinking about to answer to “what is DOM?”. As named Document Object Model is the standardization about the document structures. DOM allows to reach the content, update something on it and also style on document.
There’re 3 types of DOM
- Core DOM
- XML DOM
- HTML DOM
HTML DOM is the standart for HTML. HTML DOM defines objects, properties, methods and events.
All you need is HTML DOM for the manipulate HTML elements.
HTML DOM can be manipulated with JavaScript or another languages, JavaScript. DOM is not a part of JS, but you can use it.
All HTML elements are the objects.
# HTML is document element, child of root node.
<html>
<head> # HEAD is a child of document element.
<title> Welcome! </title>
</head>
<body> # BODY is a child of document element.
<p> Hello, programming world! </p>
</body>
</html>
HTML document is formed with tree of nodes to represent by DOM. It allows to manipulate as your needs as add, remove, modify.
Document is the root node. Root node as a child named HTML. HTML element is named document element, child of the root node.
<html>
<head>
<title>Welcome!</title>
<script>
console.log(document.getElementById('hello').innerHTML)
</script>
</head>
<body onload="alert('Welcome to my home page!');">
<p id="hello">Hello, programming world!</p>
</body>
</html>
You can access the elements with different ways, manipulate the document also. For example by above, you can do something like send alert while body loads or you can reach the element with its id. Samples can be vary, but simply we can do anything on it. You can also disable the functionality about document to prevent security issues. Full access may cause critical vulnerabilities like XSS.
You can create new elements by writing functions. For example, let’s create a simple dropdown list with a small function. Before, we have an empty list given id as my_select. When the window loads, function will run and fill the dropdown list till i reach to 9 .
<html>
<head>
<script>
window.onload = function() {
const select_element = document.getElementById("my_select");
for(let i=0; i< 10; i++){
let option = document.createElement("option");
option.text=`Option ${i}`;
select_element.add(option);
}
}
</script>
</head>
<body>
<select id="my_select"></select>
</body>
</html>
I sampled a few You can freely try above codes by copy&paste and start to manipulate DOM. You can do anything; change background, hide elements, create a table, whatevery you want!
Node and Element ( Isn’t it same? )
Distinction between node and element is easy but if you don’t know the difference it would be confusing. Any object in the DOM tree is named as node. Node can be built-in or one of the HTML tags like “div”, element is specific type of node.
Node functionality depends on its subclasses, there is no such thing as Node object, it’s a generic type of element. Main things are Document, Element and DocumentFragment.
Nodes have relationships with other nodes in DOM tree. With below sample, HTML node is parent of BODY, and BODY is child node of HTML. HEAD and BODY nodes are siblings because of both have same parent as HTML.
<html>
<head>
</head>
<body>
</body>
</html>
getElementById(), querySelector() returns an Element type of object,
getElementsByTagName(), querySelectorAll() returns collection of nodes.
[SOURCE]
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://www.javascripttutorial.net/javascript-dom/
Top comments (0)