Java脚本；选择嵌套元素会引发 "not a function"错误

Question

我需要选择另一个元素中的一个元素(表单中的一个按钮)。我通常会使用 jQuery；看起来像这样:

element = $('#webform-client-form-1812 input[name="op"]');

但是我不能在这个项目上使用 jQuery，所以我尝试了:

element = document.getElementById("webform-client-form-1812").getElementsByName("op")[0];

但是我得到了错误:

Uncaught TypeError: document.getElementById(...).getElementsByName is not a function.

这似乎是解决方案对其他人来说显而易见的尴尬问题之一。但是我已经彻底研究过了，我无法发现我的错误。有人可以帮助我吗？

Answer 1

getElementsByName 只是 document 上的一个方法 - 与 getElementsByClassName 不同，它不能在单个元素上调用。

改用 querySelector，您可以使用与 jQuery 中相同的 CSS 选择器:

const element = document.querySelector('#webform-client-form-1812 input[name="op"]');

尽可能使用 querySelector 或 querySelectorAll 而不是嵌套的 getElement...getElement 调用可能会更好 - 它不会不必要地冗长并且代码更清晰。您可以使用 CSS 选择器字符串轻松表达很多复杂规则，否则编码会非常笨拙。