Javascript this.element.queryselectoral（'；li'；）与this.element.children的比较，其中所有子项都是li

当所有子元素都是'li'元素时，为什么this.el.children在this.el.queryselectoral（'li'）时不起作用；是吗

例如：

function RadioGroup(id) {
this.el = document.querySelector(id);
this.buttons = slice(this.el.querySelectorAll('.radio'));
this.focusedIdx = 0;
this.focusedButton = this.buttons[this.focusedIdx];

this.el.addEventListener('keydown', this.handleKeyDown.bind(this));
this.el.addEventListener('click', this.handleClick.bind(this));

this.el.setAttribute('role', 'radiogroup');

// This works
this.el.querySelectorAll('li').forEach(function (item){
  item.setAttribute('role', 'radio');
});

// But this doesn't
this.el.children.forEach(function (item){
  item.setAttribute('role', 'radio');
});
}

这里是HTML：

  <ul id="group1" class="radiogroup">
    <li class="radio">Water</li>
    <li class="radio">Tea</li>
    <li class="radio">Coffee</li>
    <li class="radio">Cola</li>
    <li class="radio">Ginger Ale</li>
  </ul>

水
茶
咖啡
可乐
姜汁汽水

元素。querySelectorAll

返回一个

节点列表

，其中包含

forEach

方法，其中as

节点。children

是一个

HTMLCollection

且不包含

forEach

[1]
[2]

[3]

---

[4]

元素。querySelectorAll

返回一个

节点列表

，其中包含

forEach

方法，其中as

节点。children

是一个

HTMLCollection

且不包含

forEach

[1]
[2]

[3]

---

[4]

使用ES6的spread操作符，您可以使两者以相同的方式工作

function RadioGroup(id) {
this.el = document.querySelector(id);
this.buttons = slice(this.el.querySelectorAll('.radio'));
this.focusedIdx = 0;
this.focusedButton = this.buttons[this.focusedIdx];

this.el.addEventListener('keydown', this.handleKeyDown.bind(this));
this.el.addEventListener('click', this.handleClick.bind(this));

this.el.setAttribute('role', 'radiogroup');

// This works
[...this.el.querySelectorAll('li')].forEach(function (item){
  item.setAttribute('role', 'radio');
});

// And this too ;-)
[...this.el.children].forEach(function (item){
  item.setAttribute('role', 'radio');
});
}

---

使用ES6的spread操作符，您可以使两者以相同的方式工作

function RadioGroup(id) {
this.el = document.querySelector(id);
this.buttons = slice(this.el.querySelectorAll('.radio'));
this.focusedIdx = 0;
this.focusedButton = this.buttons[this.focusedIdx];

this.el.addEventListener('keydown', this.handleKeyDown.bind(this));
this.el.addEventListener('click', this.handleClick.bind(this));

this.el.setAttribute('role', 'radiogroup');

// This works
[...this.el.querySelectorAll('li')].forEach(function (item){
  item.setAttribute('role', 'radio');
});

// And this too ;-)
[...this.el.children].forEach(function (item){
  item.setAttribute('role', 'radio');
});
}

---

因为

HTMLCollection

s没有

forEach

方法。使用（点击

F12

）阅读任何错误。可能重复的我们也可以说，任何时候有人在了解节点列表和HTMLCollection之间的差异时，都是该问题的重复。谢谢你！因为

HTMLCollection

s没有

forEach

方法。使用（点击

F12

）阅读任何错误。可能重复的我们也可以说，任何时候有人在了解节点列表和HTMLCollection之间的差异时，都是该问题的重复。谢谢你！