javascript - 当其中一个子节点的名称为 ="children"时，不能使用 Element.children

Question

我在使用 Element.children 时注意到一个奇怪的问题并且似乎没有找到好的解决方法。

示例 1(预期行为)

拿这个 HTML:

<form>
  <input name="hi">
  <input name="bye">
</form>

还有这个 JS

const formElement = document.querySelector('form');
for (let i = 0; i < formElement.children.length; i++) {
  console.log(formElement.children[i].name);
}

如您所料，控制台打印以下内容:

"hi"
"bye"

示例 2(奇怪的行为)

现在，让我们用 name="children" 添加一个输入字段

<form>
  <input name="hi">
  <input name="bye">
  <input name="children">
</form>

控制台什么都不打印。

我认为为什么会这样

formElement.children返回一个 HTMLCollection。在 HTMLCollection 中，您可以通过索引或直接通过您尝试定位的元素的名称属性访问子元素。

所以为了得到“hi”元素，你可以说formElement.children[0]或 formElement.hi .

然而，当有一个名为 "children" 的元素时在收藏里面，formElement.children将返回名称为“children”的元素，并且不再有任何方法可以遍历所有元素。

我该如何解决这个问题？

这是我的问题。我知道我不能简单地不使用“children”这个名字而选择其他名字，但肯定有一种方法可以让它发挥作用吗？

这里用笔来说明问题:https://codepen.io/pwkip/pen/XWVoXVE

---

编辑:

这似乎与 formElement 是一个 <form> 的事实有关.当我将其更改为 <div> ，一切正常。所以我想问题归结为:如何将 HTMLFormElement 转换为常规 HTMLElement？

Answer 1

这是因为非常不幸的历史原因，HTMLFormElement 有一个 named property getter ，这will return children <input>具有 .name 的元素或者他们的 .id属性值设置为给定名称。 ^{实际上它比那更复杂，但没那么有趣。}

以我的拙见，这确实是规范中的一个怪癖，但它不能在不破坏旧网站的情况下删除，这是规范作者不太喜欢的事情。

所以是的，这个 named getter 将优先于原型(prototype)链中继承的任何其他 getter。

如果您真的不想更改元素的 name , 你可以做的是调用 Element.children明确地在你的 HTMLFormElement 上使用 getter，或者更简单你可以只使用 .querySelectorAll("*") (假设您没有具有此类名称或 ID 的元素；-)

const form = document.querySelector("form");

console.log("with .children:", form.children); // our <input>

const getter = Object.getOwnPropertyDescriptor(Element.prototype, "children").get;
console.log("with Element's getter:", getter.call(form)); // an HTMLCollection

console.log("with querySelectorAll:", form.querySelectorAll("*")); // a NodeList

<form>
  <input name="foo">
  <input name="children">
</form>