javascript - 如何使用查询选择器获取标签内的元素？

Question

var divElement = document.createElement("div");
divElement.setAttribute('id', 'Items');

var ulElement = document.createElement("ul");
var liElement = document.createElement("li");
var spanElement1 = document.createElement("span");
var spanElement2 = document.createElement("span");
liElement.appendChild(spanElement1);
liElement.appendChild(spanElement2);
ulElement.appendChild(liElement);

当我输入选择器查询时，我无法获取元素。

document.querySelectorAll("divElement ul li"); 应该给
document.querySelectorAll("#Items ul li");

但它不起作用，如何在运行时获取 id？？？？

Answer 1

终于想出了解决办法。我们可以使用getElementById从用户那里获取“id”，然后简单地应用查询选择器。

document.getElementById(id).querySelectorAll('ul li');

Answer 2

您可以通过 id 获取元素，然后使用查询选择器，如下所示： console.log(document.getElementById('details').querySelectorAll('ul li'))

<ul id="details"> == $0
    <li>
      <span>
         <label>TEST</label>
         <p>GEORGE</p>
        </span>
    </li>
    <li>
      <span>
        <label>TEST_TWO</label>
        <p>2131</p>
          </span>
    </li>
  </ul>

Answer 3

如果divElement.querySelectorAll('ul li')您仍然可以访问divElement或document.querySelectorAll('div ul li')无法访问，请使用。

注意没有点。.用于 CSS 中的类。对于元素，您只需使用标签名称。

divElement是您在 JS 中创建的元素的引用，但它的 CSS 选择器div不是divElement. JS 名称变量不能在选择器字符串中使用。

很好地阅读了主题querySelectorAll 文档以及css 选择器的工作原理

Answer 4

你需要先querySelectorAll学习

基本语法

elementList = document.querySelectorAll(selectors);

在你的情况下

elementList = document.querySelectorAll(div ul li);

这是有用的链接