Help me understand objects in DOM

Question

I have a question about DOM objects.

What I have learned is that everything in a document are objects?

<form name="myform" action="script.js">
    <input type="text">type something</input>
</form>

If we look at the example, is form an object with properties name and action?

But are name and action themselves also objects? i don't quite understand the difference between objects and properties.

And what is the difference between object element and node?

I know basics of html, css, javascript and dom. but can someone describe the big picture for me here how these parts are communicating with each other.

because there are so many elements, properties and methods. so im all lost

Answer 1

This article is a good place to start learning the DOM.

http://w3schools.com/htmldom/default.asp

Answer 2

HTML attributes are exposed as properties on the element object.

• http://www.w3.org/TR/DOM-Level-2-HTML/html.html
• http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614

Element = object, property = attribute. A method is just an invocable property, eg onclick.

<form
onsubmit="alert('hi');"
id="contact-form"
>

onsubmit is a method, id is a property, form is a node with a node type of 1 which means it's an HTMLElement and inherits generic HTML properties.

Answer 3

in your example, the name and action are attributes of the form object. if you had something like this in a JSP page

<form name="frm" action="somepage.jsp" onSubmit=" return validateForm();">
  <input type="text" name="txtField" id="txtField"></input>
  <input type="submit" value="submit"></input>
</form>

and a js function defined like so that checks to see if any text was entered into a text box.

<script>
  function validateForm(){
    if(document.frm.txtField.value="")
       return false;
    else
       return true;
  }
 </script>

you can use the document object to access the form object in the dom and from that access the input element held by the form.

Answer 4

Seems to me your trouble is not understanding the concept behind object-oriented programming. JavaScript is an object-oriented language. You should probably take a quick tour of the concepts.

Briefly, though, objects are a way to encapsulate both data (the "properties" you are referring to) and functionality (the "methods" or "functions" you can ask an object to perform).

In the case of the JavaScript DOM, there is a tree of objects, where each object contains properties that are, themselves, objects. So you can have a Form object with methods like onSubmit() and properties like "elements", which is an array of form fields. Each element in the array is another object, like perhaps a TextField object or a Checkbox.

So now you know about objects. One thing about objects is that they can inherit properties from a parent class of object. For example, in JavaScript, there is an Element class and each of the form field objects is an instance of a "subclass" of the Element class. So, since Element defines the "name" property, and TextField and Checkbox and all their friends inherit from Element, they all automatically have this "name" property available too.

The term "node" refers to a particular location in a tree or graph structure. In this case, the DOM (Document Object Model) defines the types of objects that are allowed to be nodes in the tree that represents the webpage. For each webpage you visit, the browser constructs a "DOM tree", which is a big tree of objects representing each of the elements in the webpage.

Notice that HTML is naturally in a tree-like structure: the html tag contains head and body, the head tag contains title, meta, and script tags, the meta tag contains attributes like name and content. All this is arranged by the browser into a tree of objects, and that is what you are manipulating when you use JavaScript to do DOM programming.

So to recap: objects are the fundamental representation of data and functionality in JavaScript. Elements are particular classes of object that are subclasses of the "Element" class, and which represent some kind of form field. These can be found in the form.elements array, which is a property of the form object. Finally, nodes are points in the tree of tags, text, script, and other objects that make up a webpage.

Hope it helps!

Answer 5

I've taught people about the DOM before and found that seeing the DOM in action.

Go get firebug, if you don't have it. http://getfirebug.com/

After you of course restart Firefox...

Open up any web page and right-click on something, there will be an option called "Inspect Element". This will display the rendered code of the page. When I say rendered I'm referring to the page after it has been modified by any javascript, different from the standard source code which is just the straight HTML sent from the server.

The element which you are inspecting will be highlighted. Now, right click on that highlighted element and select "Inspect in DOM Tab".

Once you're in the DOM tab, this shows you all of the properties of the element you inspected. In here you may see attributes of the element like type="input", methods of the element like focus(), maybe custom prototypes, Firefox proprietary attributes, and much much more.

Here are some methods, functions, and attributes on your need to know list, look these up in the Mozilla Developer Center. Spend some time writing scripts which move you around the DOM and allow you to alter it using these, don't use innerHTML to do anything.

• createElement
• createTextNode
• appendChild
• insertBefore
• removeChild
• cloneNode
• setAttribute
• removeAttribute
• getElementById
• getElementsByTagName
• childNodes
• firstChild
• lastChild
• nextSibling
• hasChildNodes
• tagName
• attachEvent (IE) / addEventListener (all others)
• detachEvent (IE) / removeEventListener (all others)