I always hear people talk about DOM this, manipulate the DOM, change the DOM, traverse the DOM; but what exactly does this mean?
What is the DOM and why would I want to do something with it?
Thanks a bunch for the info guys!
+4
A:
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...
Oded
2010-10-14 15:29:54
+2
A:
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.
meder
2010-10-14 15:30:25
So the DOM is the API that can be used in Javascript to modify HTML?
Serg
2010-10-14 15:31:32
Yes, and there are libraries in other languages as well for the DOM.
meder
2010-10-14 15:32:03
Yeah! This answer is definitely what I was looking for. Now I won't feel like a dunce when people are talking about it. Thanks again!
Serg
2010-10-14 15:33:27
A:
Simply you need to read some about it, because what ever the answer I will list here will not be enough, there are books about it.
But you can get answer to your questions by checking these:
http://en.wikipedia.org/wiki/Document_Object_Model
http://www.w3.org/DOM/
http://www.w3schools.com/htmldom/default.asp
Amr ElGarhy
2010-10-14 15:31:14
I don't expect to know everything about it, but at least what it is. I think this question and the answers given serve this purpose very well! :)
Serg
2010-10-14 15:32:39
A:
D ocument
O bject
M odel
This is the DOM. Either an XML, or HTML, or similar document. All of those terms mean to parse the document and/or make changes to it (usually by using some available tools like JavaScript or C#).
The best example of a DOM when people use those terms is the HTML document in a browser. You might want to manipulate the DOM in this case to add something to the web page.
Gabriel McAdams
2010-10-14 15:33:25