Menu
The DOM stands for Document Object Model. It can simply be understood as a tree of nodes created by the browser. Each of these nodes has its own properties and methods which can be manipulated using JavaScript. The ability to manipulate the DOM is one of the most unique and useful abilities of JavaScript.
In website development, DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from a website document. DOM manipulation is when you use JavaScript to add, remove, and modify elements of a website. It is very common in web development.
The DOM is a tree-like representation of the web page that gets loaded into the browser. It represents the web page using a series of objects. The main object is the document object, which in turn houses other objects which also house their own objects, and so on.
The DOM is basically an API you use to interface the document with, and is available in many languages as a library ( JS is one of those languages ). The browser converts all the HTML in your web page to a tree based on the nesting. Pop open Firebug and look at the HTML structure. That is the tree I'm talking about.
If you want to change any HTML you can interact with the DOM API in order to do so.
<html>
<head><script src="file.js"></script></head>
<body>blah</body>
</html>
In file.js I can reference the body using:
onload = function() {
document.getElementsByTagName('body')[0].style.display='none';
}
The getElementsByTagName is a method of the document object. I am manipulating the body element, which is a DOM element. If I wanted to traverse and find say, a span I can do this:
onload = function() {
var els = document.getElementsByTagName('*');
for ( var i = els.length; i--; ) {
if ( els[i].nodeType == 1 && els[i].nodeName.toLowerCase() == 'span' ) {
alert( els[i] )
}
}
}
I am traversing the nodeList given back by getElementsByTagName in the snippet above, and looking for a span based on the nodeName property.
It means working with the Document Object Model, which is an API to work with XML like documents.
From w3 on the DOM:
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.
One of the functions mostly used in DOM work is:
getElementById
Manipulating/Changing the DOM means using this API to change the document (add elements, remove elements, move elements around etc...).
Traversing the DOM means navigating it - selecting specific elements, iterating over groups of elements etc...
In short:
When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages.
Source: w3schools - HTML DOM
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With