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

Question

当我单击标题（标题位于此处）文本时。我得到的是 null 而nextElementSibling不是a元素...编辑您可以在 an 中嵌套任何元素，但以下元素<a>除外：<a><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;">

  <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>

    <span>

      span tag

    </span>

  </a>

  <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>

      </div>

      <div class="box">

        <div class="content"><input id="tab1_"> Description

        </div>

        <div class="content"><input id="tab2_">

          <p>image</p>

        </div>

      </div>

    </div>

  </div>

  <br>

</li>

您可以通过从浏览器的 DOM 检查器复制 HTML 来亲自获取此信息。

正如您所看到的，其他<a/>元素不是 的兄弟元素.viewAbstractToggleTitle。这是因为 DOM 解析器必须插入第一个<a/>元素的结束符，因为您无法嵌套它们。