DOM - what is it? A good idea?

[doubleman]

What is DOM? I hear it's like ordering your code in a certain way. I heard somewhere that someone thought something around the lines of "standardized programming", was bad. Is DOM standardized programming?

If it's good for ordering your code so you can read it, can't everyone else read it then too? Is that a bad thing?

[mutants_r_us_guild]

DOM is basically the system of giving every element of a page a name. Say for instance we want to edit the background color of an HTML document. In javascript we would use document.bgColor='#colorcodehere'. That document.bgColor is a DOM reference. Its a way to find exactly what we want on the page. Background color is easy, however; certain things can be harder. An example would be the greasemonkey script I wrote to assist with Prog1. The list of words wasn't command-line-friendly. (one line seperated by spaces). So I wrote a script to change this. First I had to find the words in the DOM. I knew that since it was a list.. the words were inside <li> tags. So I used this to find them document.getElementsByTagName('li'). But that gets every <li> tag in the source. So then I take it a step further and find the number of <li> tags and the number of the corresponding number of the tag that I want. In this case, the first listed word, the word I want, appeared in the document as the 41st <li> tag. So its number is 40 (DOM starts at 0 not 1). So I used document.getElementsByTagName('li)[40]. Now that gets me the whole tag.. but that's still not what I want. I want what is INSIDE the tag, for this I used innerHTML. So the final DOM address for the first listed word would be:

document.getElementsByTagName('li')[40].innerHTML

Voila. That's DOM in a nut shell.

P.S. In the basic missions when you use document.cookie, thats the DOM address for the cookie.

[nathandelane]

DOM stands for Document Object Model. It's mostly used in correlation with HTML and XHTML. The DOM allows you to generate web pages dynamically, traverse the components of a web page, and change the components of a web page. DOM has also been used in correlation with rich media documents, including Microsoft Word and OpenOffice.org documents. Basically it boils down to exactly what D-O-M stands for and can be abstracted for any object-based system.

As for standardized programming being bad - whoever thought that up is foolish. Standardizing programming makes it possible to even learn programming. Otherwise you would need to learn the machine code for each computer you were programming on. C, C++, HTML, JavaScript (called ECMAScript in the standard), CSS, Java, Python, Perl, PHP, ADA, Delphi, RPG, Bash, Batch, VBScript, C#, VisualBasic, Smalltalk, Lisp, Flash, and any of the other programming languages that you will likely encounter are standardized by probably one or more of the four major standardization committees, W3C (World Wide Web Consortium), ISO (International Standards Organization), ANSI (American National Standards Institute), and ECMA (European Computer Manufacturers Association). All of these standardization committees make it even possible to have an Internet and personal computers that interoperate. So standardization is a VERY good thing in the world of computers, programming, and even hacking.

[doubleman]

So DOM is like standardized commands? Is it like Netscape and IE used to have different Javascript commands, which required the standardization?

[mutants_r_us_guild]

Do you have a brain tumor?

[nathandelane]

The DOM isn't commands, it is just a way of organizing data and HTML or XML tags. See Wikipedia: Document Object Model. The DOM is interpreted by a web browser. You can use JavaScript or XPath (done via JavaScript) to access components of the DOM. The DOM is JUST a model or in other words data. Your web browser reads this data to create web pages, and you can use JavaScript to manipulate the DOM or in other words manipulate the data that creates a web page.

[doubleman]

Yeah, so like DOM is a way of ordering objects? This one website, http://www.learn-javascript-tutorial.com/, explained that the a HTML DOM is Window>Document>and then branches off to images[] anchors[] forms[] (all equal on the DOM), and forms branches out to textboxes, radio buttons, checkboxes, select lists, textareas, and buttons.

It then gave an example of dot notation, and showed a form named "loginform" object and said that one could refer to the form in the following way

window.document.loginform

So is that DOM? The ordering of objects? I'm gonna read the Wikipedia page now.

[mutants_r_us_guild]

yes... basically. But theres more to it than that. I don't think a login form would be window.document.loginform... where's the body? Theres also the whole childNodes thing.

[nathandelane]

Yeah, so like DOM is a way of ordering objects?

You're beginning to understand now. It's not really a way of ordering objects, rather it is the way objects are related in xml/html as in a web page. For example a window contains a document

Code: Select all

window.document


A document then contains a root tag. In html this tag is the <html> tag:

Code: Select all

<html>
</html>


In an html document though you only usually need to worry about the tags contained in the <body> tag:

Code: Select all

<html>
    <head>
        <!-- other tags like <title> and <link> go here -->
    </head>
    <body>
        <!-- this is the main part of an html document, where DOM objects are mostly found -->
    </body>
</html>


You shouldn't read as heavily into the DOM as you are. It's simply a model given in order to create an manipulate web pages dynamically. You utilize the DOM when you write a web page, but you don't have to know what the DOM is or how it works when you DO write a web page.

[doubleman]

Okay, I think I get it mostly now. Thanks for the help.

As for the "window.document.loginform", I don't know. It may be an outdated tutorial, but I decided to supplement with other tutorials which more delved you into stuff you can do instead of general rules - so I could practice and not forget, as a result of inapplicability.

Just another question for those answering this post. The possibly outdated website (yourhtmlsource.com) gave me these lines of code

<script type="text/javascript">
<!--
document.write("<i>Hello World!</i>");
//-->
</script>

and then it said "The comments around the script code are there so that old browsers that don't understand the script tag won't display the code as text on the page. Any browser that can do JavaScript will disregard the comments. Also note that for Netscape's benefit, the end of the comment is itself commented out using a JavaScript comment (two forward-slashes to comment out the rest of the line). This stops errors from occurring in old versions of Netscape."

Is this kind of <!-- //--> comment outdated? I see the comment tag (//) in there, but I don't understand why there would be the exclamation points and the arrows. I was taking a w3cschools.com tutorial, and they didn't mention this. Is this kind of technique still used? On w3cschools.com , they said that if you put an actual comment line between a piece of code, it will deactivate the code, since the browser perceives it only as a comment.

then again, it may be outdated since it keeps talking about stuff like I.E 3, when IE 7 is already out.