为什么 document.DOM-object.property 在遗留应用程序中为空

Question

对于 javascript 代码的以下行为，我找不到合理的解释。我不是很熟悉 javascript 以及以下代码是否有效。

在已迁移的遗留应用程序中，有类似这些行的代码：

function myFunctionName(name)
{
    for(k=0; k < document.budget_sections.length; ++k) {
    //...do something
    }
}

请注意document.budget_sections.length部分。在生产中，此代码会抛出一条错误消息，提示无法访问属性长度的 null。在我的开发环境中，这运行良好。由于 budget_sections 是表单元素的 ID (<form id="budget_sections" method="post" runat="server">)，我将代码更改为我所知道的语法：

function myFunctionName(name)
{
    var form = document.getElementById("budget_sections");
    for(k=0; k < form.length; ++k) {
    //...do something
    }
}

此语法/符号在整个应用程序中使用，适用于大多数页面。这里对我来说的问题是：为什么这个旧代码现在仍然有效，为什么现在可能会崩溃？我以前从未读过符号 document.DOM-object.xxx，也找不到有关它的文档。

Answer 1

Since budget_sections is the Id of a element

不，它是表单的名称。

document.formname.length

仍然有效。

I can't find documentation about it.

这是 MDN 中的一个这样的例子 document.images.length

MDN link

所有这些都是properties在你的document。您可以在该页面左侧边栏中阅读更多相关信息。您将找到与 document.DOM_Object.property

类似的所有属性的文档

Answer 2

如果我没记错我使用 IE6 的日子，它应该使用 document.forms['budget_sections'] 来获取表单项...

IE 和 Netscape 处理事情的方式不同。但我不确定，因为那是 15 多年前的事了。

Answer 3

我认为这是旧的表示法。如果您将表单的名称属性设置为 "budget_sections" 而不是 id 那么它将起作用：

<!DOCTYPE html>
<html>
<body>

<form name="xx">
  Form 1
</form>
<form name="xx">
  Form 2
</form>

<button onclick="alert(document.xx.length)">Number of forms</button>

</body>
</html>

或者您可以使用表单而不是名称值获得相同的结果：

<!DOCTYPE html>
<html>
<body>

<form name="xx">
  Form 1
</form>
<form name="xx">
  Form 2
</form>

<button onclick="alert(document.forms.length)">Number of forms</button>

</body>
</html>

为什么 document.DOM-object.property 在遗留应用程序中为空

Why is document.DOM-object.property null in legacy application

javascript

legacy-code