JS DOM - document.getElementById 和按名称选择之间的区别

Question

我有这样的代码：

<form name="selectForm">
    <select multiple name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select><br />
    <input type="button" value="Select Cars" onclick="alert('You selected ' + howMany(document.selectForm.cars) + ' cars')" />
</form>

我的主要问题是关于这一行：document.selectForm.cars

这是做什么的，我在哪里可以找到相关信息来阅读它？为什么不使用通常的 getElementBy...？ Mozilla只给出与此无关的接口

Answer 1

您不太可能在最近的教程中看到这种模式，因为它有点陈旧：

document.selectForm

指的是 form 元素具有 selectForm 的 name（或可能 id）属性。 document.selectForm.cars 是其中名为 cars 的 <select> 元素。在现代代码中，这种使用 document.*name* 来引用页面上的元素的旧样式应替换为 document.getElementsByName 或（在给表单 ID 之后）document.getElementById。

您可以通过转到控制台并输入 document.selectForm 来解决这个问题，并且您会看到显示的元素

JS DOM - document.getElementById 和按名称选择之间的区别

JS DOM - Difference between document.getElementById & selecting by name

javascript

dom