为什么 nextelementsibling 返回 null | dom遍历js

Question

当我单击标题（标题位于此处）文本时。我得到的是 null 而nextElementSibling不是a元素...

编辑

您可以在 an 中嵌套任何元素，但以下元素<a>除外：

1. <a>

2. <button>

<a>并且<button>两者均无效..

但我的a标签为空......而不是button标签......我正在寻找更清晰和有效的来源......

如果我控制台日志console.log(document.links)..它会给出三个HTMLCollection集合...

结束编辑

下面的示例代码

  console.log(document.links)

document.querySelectorAll(".viewAbstractToggleTitle").forEach(function(item) {

  item.addEventListener("click", function(e) {

    if (e.target.parentElement.classList.contains('viewAbstractToggleTitle')) {

      console.log(e.target.parentElement.nextElementSibling.nextElementSibling)

      console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling);

 console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling);

    }

  })

})

<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">

  <a href="javascript:void(0)">

    <span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">

      <span  style="font-weight: 600;font-size:16px;">

        Title Goes Here

      </span>

      <span> ( 1-10 page )</span>

    </span>

    <br>

    <div class="authors">

      <span><i class="fa fa-user" aria-hidden="true"></i>

        Author

      </span>

      <span><i class="fa fa-user" aria-hidden="true"></i>

        Author

      </span>

    </div>

      <button>

       button tag

      </button>

    <a class="inlineBlock" href="" download>

      <i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>

    <a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>

    <div class="showTabe sTab">

      <div class="tabBox">

        <div class="tab">

          <label class="label" for="tab1_">Abstract</label>

          <label class="label" for="tab2_">Graphical of Author </label>

Answer 1

您的 HTML 无效。您不允许使用嵌套超链接之类的内容。这意味着 HTML 解析器（其设计目的是容忍错误）必须对元素树提出新的解释。Firefox 至少将其翻译为：<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">&nbsp; <a href="javascript:void(0)">&nbsp; &nbsp; <span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">&nbsp; &nbsp; &nbsp; <span style="font-weight: 600;font-size:16px;">&nbsp; &nbsp; &nbsp; &nbsp; Title Goes Here&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; <span> ( 1-10 page )</span>&nbsp; &nbsp; </span>&nbsp; &nbsp; <br>&nbsp; &nbsp; <div class="authors">&nbsp; &nbsp; &nbsp; <span><i class="fa fa-user" aria-hidden="true"></i>&nbsp; &nbsp; &nbsp; &nbsp; Author&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; <span><i class="fa fa-user" aria-hidden="true"></i>&nbsp; &nbsp; &nbsp; &nbsp; Author&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; span tag&nbsp; &nbsp; </span>&nbsp; </a>&nbsp; <a class="inlineBlock" href="" download="">&nbsp; &nbsp; <i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>&nbsp; <a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>&nbsp; <div class="showTabe sTab">&nbsp; &nbsp; <div class="tabBox">&nbsp; &nbsp; &nbsp; <div class="tab">&nbsp; &nbsp; &nbsp; &nbsp; <label class="label" for="tab1_">Abstract</label>&nbsp; &nbsp; &nbsp; &nbsp; <label class="label" for="tab2_">Graphical of Author </label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="box">&nbsp; &nbsp; &nbsp; &nbsp; <div class="content"><input id="tab1_"> Description&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="content"><input id="tab2_">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>image</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <br></li>您可以通过从浏览器的 DOM 检查器复制 HTML 来亲自获取此信息。正如您所看到的，其他<a/>元素不是 的兄弟元素.viewAbstractToggleTitle。这是因为 DOM 解析器必须插入第一个<a/>元素的结束符，因为您无法嵌套它们。