Ajax beginner confused about DOM reference

Question

I'm learning Ajax and I'm confused about something. In a tutorial, these two lines are included

document.myForm.time.value = ajaxRequest.responseText;
//code
<form name='myForm'>
Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
Time: <input type='text' name='time' />
</form>

This code works. I try changing this code to the following

document.tree.innerHTML = document.tree.innerHTML + ajaxRequest.responseText;
//code
<div name='tree' id='tree'></div>

But I get an error "document.tree is undefined". Why?

Answer 1

The document object has a collection of all of the forms on the page, and you can access them by name, which is why document.myForm works. But this does not apply to all elements on the page -- forms are special.

To access your div by id, you can use

document.getElementById("tree")

so your code would become

document.getElementById("tree").innerHTML = document.getElementById("tree").innerHTML + ajaxRequest.responseText;

Answer 2

The reference document.tree tells the browser to look for:

<form name="tree">

What you're looking for instead is

document.getElementById("tree")

Answer 3

document._anything_ is a DOM0 model and it don't have support for all named elements, only forms, images, frames and something more. Now main model is DOM2. Main difference DOM2 from DOM0 is using methods like:

• document.getElementById
• document.getElementsByTagName
• document.getElementsByClassName

instead of document tree walking:

document.anyChild._childOfAnyChild_

In your case better use document.getElementById("tree") instead of document.tree

Answer 4

Change:

document.tree

To:

document.getElementById("tree")

Or better yet, change:

document.tree.innerHTML = document.tree.innerHTML + ajaxRequest.responseText;

To:

var tree = document.getElementById("tree");
tree.innerHTML = tree.innerHTML + ajaxRequest.responseText;

Answer 5

The first method is a throwback to the "dom 0" days before the modern DOM existed. It works because you can reference forms directly by name, but you can't reference other DOM objects the same way. Regardless, this method should be avoided. The better way is to use document.getElementsById('tree'); or, with jQuery, $('#tree').

I strongly recommend reading https://eloquentjavascript.net/

Answer 6

The name attribute is largely used when dealing with forms. When you submit the form, the server will receive the form name as well as the name of controls within the form. Since forms are treated somewhat special, they can be accessed by name directly off the JavaScript "document" global.

Other HTML elements do not work the same way.

You can check it out using this Fiddle: http://jsfiddle.net/XLvwh/

You would need to use:

document.getElementById("tree").innerHtml = document.getElementById("tree").innerHtml + ajaxRequest.responseText;

I would suggest taking a look at jQuery. It makes dealing with DOM elements a lot easier. For instance, to do the same in jQuery would look like:

var treeHtml = $('#tree').html() + ajaxRequest.responseText;
$('#tree').html(treeHtml);

Check it out @ http://jquery.com