Question

我正在学习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.tree.innerHTML = document.tree.innerHTML + ajaxRequest.responseText;
//code
<div name='tree' id='tree'></div>

但是我收到错误“document.tree is undefined”。为什么？

Answer 1

document对象包含页面上所有表单的集合，您可以按名称访问它们，这就是document.myForm有效的原因。但这并不适用于页面上的所有元素 - 表格都很特殊。

要按ID访问您的div，您可以使用

document.getElementById("tree")

所以你的代码会变成

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

Answer 2

引用document.tree告诉浏览器查找：

<form name="tree">

你要找的是

document.getElementById("tree")

Answer 3

document._anything_是DOM0 model，它不支持所有命名元素，只支持表单，图像，框架等。现在主要模型是DOM2。来自DOM2的主要差异DOM0正在使用以下方法：

的document.getElementById
document.getElementsByTagName
document.getElementsByClassName

代替document tree步行：

文档。 anyChild ._ childOfAnyChild _

在您的情况下，最好使用document.getElementById("tree")代替document.tree

Answer 4

变化：

document.tree

要：

document.getElementById("tree")

或者更好的是，改变：

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

要：

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

Answer 5

第一种方法是在现代DOM存在之前的“dom 0”天回归。它的工作原理是因为您可以直接通过名称引用表单，但不能以相同的方式引用其他DOM对象。无论如何，应该避免这种方法。更好的方法是使用document.getElementsById('tree');或使用jQuery $('#tree')。

我强烈建议您阅读https://eloquentjavascript.net/

Answer 6

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

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

你可以使用这个小提琴来查看它：http://jsfiddle.net/XLvwh/

您需要使用：

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

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

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

查看@ http://jquery.com

Ajax初学者对DOM参考感到困惑

6 个答案: