javascript - 元素的 name 属性对 querySelectorAll 不可见，并且不会出现在其 HTML 中

Question

我想选择名称为 'viewer' 的所有列表项。

这会返回一个空的NodeList:

document.querySelectorAll('[name="viewer"]');

但这会返回一个包含正确项目的数组:

[...document.querySelectorAll('li')].filter(({ name }) => name == 'viewer');

列表项是这样创建的:

const listItem = document.createElement('li');
listItem.name = 'viewer';
listItem.id = 'viewer-1337';

当我在控制台中检查它们时，我在它们的 HTML 中看到了它们的 id，但没有看到它们的 name。例如

<li id="viewer-1337">foo</li>

似乎他们确实设置了 name 属性，但无法通过 document.querySelectorAll 访问或在其 HTML 中可见。

为什么不呢？

const names = ['foo', 'bar'];
names.forEach(name => {
  const li = document.createElement('li');
  li.id = 'viewer-' + name;
  li.name = 'viewer';
  li.innerHTML = name;
  const ul = document.querySelector('ul');
  ul.appendChild(li);
});

const nodeList = document.querySelectorAll('[name="viewer"]');
console.log([...nodeList]);

const array = [...document.querySelectorAll('li')].filter(({ name }) => name == 'viewer');
console.log(array);

<ul></ul>

Answer 1

这是因为 name属性为 reserved :

name gets or sets the name property of an element in the DOM. It only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.

当您设置 name如果元素的属性 不是 其中一种类型，则元素将 not 接收该值作为属性值。它仍然会被放到 name JavaScript 对象的属性，但不会放入属性中。

const div = document.createElement('div');
console.log(div.attributes.length);
div.name = 'foo';
console.log(div.attributes.length);
console.log(div.hasOwnProperty('name'));

所以查询字符串[name="viewer"]不选择元素(因为它们没有 name 属性)，但 [...document.querySelectorAll('li')].filter(({ name }) => name == 'viewer')有效，因为 filter回调成功检索 name来自元素的 JavaScript 表示的属性。

您可以通过将其放入数据集中来修复它:

const names = ['foo', 'bar'];
names.forEach(name => {
  const li = document.createElement('li');
  li.id = 'viewer-' + name;
  li.dataset.name = 'viewer';
  li.innerHTML = name;
  const ul = document.querySelector('ul');
  ul.appendChild(li);
});

const nodeList = document.querySelectorAll('[data-name="viewer"]');
console.log(nodeList.length);

<ul></ul>