JavaScript QuerySelector 不返回最后一个孩子答案

【问题标题】：JavaScript QuerySelector not returning last childJavaScript QuerySelector 不返回最后一个孩子
【发布时间】：2019-11-12 14:46:49
【问题描述】：

我正在尝试选择 .nav-item 类的最后一个子元素，我已经尝试了几种方法。它不抓取项目，只返回“null”，应用样式将抓取第一个项目或返回以下错误：

main.js:25 Uncaught TypeError: Cannot read property 'style' of null 在 main.js:25

我的代码：

顶部工作正常并且确实应用了边框，但我想在最后一个项目的右侧应用一个边框，在第一个项目的左侧应用一个边框。最后一项不起作用。

谁能指出我的错误？ HTML 如果有帮助：

let items = document.querySelectorAll('.nav-item');

for (let i = 0; i < items.length; i++) {
  items[i].style.borderTop = '0.2em solid white';
  items[i].style.borderBottom = '0.2em solid white';
}

// First and Last Item
// var secondItem = document.querySelector('.list-group-item:nth-child(2)');
// secondItem.style.color = 'coral';

let lastItem = document.querySelector('.nav-item:nth-child(4)');

console.log(lastItem);

lastItem.style.borderRight = '0.2em solid white';

<nav>
  <h1>Item Lister</h1>
  <ul class="nav" id="list">
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
  </ul>
</nav>

【问题讨论】：

首先，ul 应该只包含li 作为直接子代。其次，每个li 当前都是锚点的第一个子节点。
像这样移动li内部的锚点：<li class="nav-item"><a href="#">One</a></li>

标签： javascript

【解决方案1】：

所以你的<nav> 元素有一个子元素：<ul>。 <a> 元素是 <ul> 的子元素。

要解决此问题，您需要 querySelect .nav-item ul:nth-child(4)。

这里有一些东西可以更好地可视化它。 <nav> 是 <ul> 的父级，<a>s 是父级。这使得<nav> 成为<a>s 的祖父母。

nav
  ul
    a
      li
    a
      li
    a
      li
    a
      li

像 Karl-André Gagnon 所说的确保 <li> 是 <ul> 的子代也很重要：

nav
  ul
    li
      a
    li
      a
    li
      a
    li
      a

【讨论】：

【解决方案2】：

要达到预期的效果，请使用以下使用 document.querySelectorAll 的选项

获取类的所有元素 - nav-item 不考虑父子关系
使用 Array.from 将 HTML 集合转换为数组
使用 pop() 方法获取最后一个元素的样式
let lastItem = Array.from(document.querySelectorAll('.nav-item')).pop();

示例工作代码供参考

let items = document.querySelectorAll('.nav-item');

for (let i = 0; i < items.length; i++) {
  items[i].style.borderTop = '0.2em solid white';
  items[i].style.borderBottom = '0.2em solid white';
}

// First and Last Item
// var secondItem = document.querySelector('.list-group-item:nth-child(2)');
// secondItem.style.color = 'coral';

let lastItem = Array.from(document.querySelectorAll('.nav-item')).pop();

console.log(lastItem);

lastItem.style.borderRight = '0.2em solid black';

<nav>
  <h1>Item Lister</h1>
  <ul class="nav" id="list">
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
    <a href="#"><li class="nav-item">One</li></a>
  </ul>
</nav>

Codepen - https://codepen.io/nagasai/pen/jOOvVjq

问题：：
:nth-child 与兄弟元素一起使用，因此 :nth-child(4) 不可用

根据 MDN

:nth-child() CSS 伪类根据元素在一组兄弟元素中的位置匹配元素。

【讨论】：

【解决方案3】：

我使用了选项 lastElementChild 和 firstElementChild。这些奏效了。

【讨论】：

【解决方案4】：

请将 .nav-item 更改为 a。它可以满足您的目的，因为它是父 ul 的子元素，而不是 .nav-item。

let lastItem = document.querySelector('a:nth-child(4)');

它对我有用。让我知道它是否适合您。

【讨论】：