Question

我正在尝试控制台记录应该包含数组的变量。但是，在Codepen中，它返回一个空数组。我希望它返回列表项的内容。

以下是带有一些代码段的Codepen：

这是一个React项目，顺便说一句，这就是为什么我使用className而不是class的原因。

HTML

      <ul className="nav">
        <li>
          <a>Products</a>

          <div className="subnav-block">
            <ul>
              <li>
                <a>Product A</a>
              </li>
              <li>
                <a>Product B</a>
              </li>
            </ul>
          </div>
        </li>
      <li>
      <a>About</a>

      <div className="subnav-block">
        <ul>
          <li>
            <a>About Us</a>
          </li>
          <li>
            <a>Press</a>
          </li>
        </ul>
      </div>
    </li>
      </ul>

JS

const nav = document.querySelectorAll('.nav > li');

console.log(nav)

Codepen正在返回：

[Object NodeList] {Length: 0}

Answer 1

如果这是在React应用程序中，请确保您在正确的位置调用代码，以便在调用查询之前，实际上已使用您的标记更新了dom。如果您使用的是类组件，请在componentDidMount

中移动代码

componentDidMount() {
  const nav = document.querySelectorAll(".nav > li");
  console.log(nav);
}

如果使用钩子，请将其放在useEffect

内

useEffect(() => {
  const nav = document.querySelectorAll('.nav > li')
  console.log(nav)
}, [])

这是一个使用钩子的工作示例：https://codesandbox.io/s/currying-monad-t6104?fontsize=14

Answer 2

因为className不是添加HTML类的方式-仅仅是class。

const nav = document.querySelectorAll(".nav > li");

console.log(nav);

<ul class="nav">
  <li>
    <a>Products</a>

    <div class="subnav-block">
      <ul>
        <li>
          <a>Product A</a>
        </li>
        <li>
          <a>Product B</a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <a>About</a>

    <div class="subnav-block">
      <ul>
        <li>
          <a>About Us</a>
        </li>
        <li>
          <a>Press</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

要继续使用className，请使用属性选择器：

const nav = document.querySelectorAll("[className='nav'] > li");

console.log(nav);

<ul className="nav">
  <li>
    <a>Products</a>

    <div className="subnav-block">
      <ul>
        <li>
          <a>Product A</a>
        </li>
        <li>
          <a>Product B</a>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <a>About</a>

    <div className="subnav-block">
      <ul>
        <li>
          <a>About Us</a>
        </li>
        <li>
          <a>Press</a>
        </li>
      </ul>
    </div>
  </li>
</ul>

Codepen期待少量项目时返回空数组

2 个答案: