javascript - document.formname.checkbox[0].checked 与 document.getElementById ('checkbox' ).checked

Question

在 Javascript 中，我通常使用语法document.formname.checkbox[0].checked，但我注意到几乎其他人都使用 document.getElementById('checkbodi').checked 。如果这看起来是一个愚蠢的问题，我很抱歉，但我想知道我的首选语法是否已被弃用，或者其他人是否只是使用更方便的语法？

Answer 1

各自的含义:

document.formname.checkbox[0].checked

这使用表单和元素的 name= 属性来选择所需的元素。这很好，因为有时您不想到处都用 ID 弄脏您的标记，并且您更喜欢使用名称，这是大多数表单都具有的内容(因为默认提交使用名称作为键)。

这样做的潜在问题是它有点冗长，并且可能不太可读。

document.getElementById('checkboxId').checked

这很简单，只需插入一个 ID 并获取正确的元素，但要获取表单中的任何元素，它还必须有一个 ID，这可能非常烦人。

<小时/>

document.querySelectorAll('#myForm input[type=checkbox]')[0].checked

这里有一个替代解决方案，它使用CSS选择器和document.querySelectorAll()，我觉得它更具可读性，特别是对于那些精通CSS而不是JavaScript的人来说。

<小时/>

哪个更好？取决于您的特定用例和偏好。我喜欢使用 querySelector 和 querySelectorAll，特别是如果我已经在变量中拥有表单 DOM 对象:

myForm.querySelector('input[type=checkbox]').checked;

这取决于你。