Javascript Ajax初学者对DOM引用感到困惑

我正在学习Ajax，我对一些事情感到困惑。在教程中，包括这两行

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>

document.myForm.time.value=ajaxRequest.responseText；
//代码
名称：

时间：

这个代码有效。我尝试将此代码更改为以下代码

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

document.tree.innerHTML=document.tree.innerHTML+ajaxRequest.responseText；
//代码

但我得到一个错误“document.tree未定义”。为什么?

变化：

document.tree

致：

或者更好的办法是改变：

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

致：

---

document

对象包含页面上所有表单的集合，您可以通过名称访问它们，这就是

document.myForm

工作的原因。但这并不适用于页面上的所有元素——表单是特殊的

要按id访问div，可以使用

document.getElementById("tree")

因此，您的代码将成为

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

---

参考

document.tree

告诉浏览器要查找：

<form name="tree">

---

第一种方法是回溯到现代dom存在之前的“DOM0”。它之所以有效，是因为您可以直接按名称引用表单，但不能以相同的方式引用其他DOM对象。无论如何，应该避免这种方法。更好的方法是使用

document.getElementsById（'tree'）

或使用jQuery，

$（“#树”）

---

我强烈建议您阅读

文档。任何东西

都是一个文档，它不支持所有命名元素，只支持表单、图像、框架等。现在主要的模式是。与

DOM0

的主要区别在于使用了如下方法：

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

而不是

文档树

遍历：

文档.anyChild.\u任何孩子的孩子_

---

在您的情况下，最好使用

document.getElementById（“tree”）

而不是

document.tree

处理表单时主要使用name属性。提交表单时，服务器将收到表单名称以及表单中控件的名称。由于表单的处理有些特殊，因此可以直接从JavaScript“文档”全局文件中通过名称访问表单

其他HTML元素的工作方式不同

您可以使用此小提琴查看它：

您需要使用：

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

我建议看看jQuery。它使处理DOM元素变得更加容易。例如，在jQuery中执行相同的操作如下：

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

---

请检查@

DIV元素没有属性名称！这是window.tree，不是document.tree。。。只是“树”也是有效的，因为窗口是隐含的。如果需要旧的IE兼容性，可以额外键入25个字符的“document.getElementById（）”。

document.getElementById("tree")

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

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