为什么nextelementsibling返回null |dom遍历js [英] why nextelementsibling return null | dom traversing js

问题描述

当我单击标题(标题转到此处")文本时.我得到的 nextElementSibling 为空，而不是 a 元素...

when I click on title ( Title Goes Here) text. I am getting null for nextElementSibling instead of a element...

编辑

除了

you can nest any elements inside an <a> except the following :

1. < a>
2. < button>
3. 关注链接

< a> 和< button> 都无效..

<a> and<button> both are invalid..

，但是 a 标记为空..而不是 button 标记....我正在寻找更清晰，更有效的信息来源...

but I am getting null for a tag.. not for button tag.... I am looking for more clarity and valid source...

如果我控制台登录 console.log(document.links) ..它会提供三个 HTMLCollection 集合...

if I console log console.log(document.links) .. it's give three HTMLCollection collection...

结束编辑

下面的示例代码

  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>
        </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>
  </a>
</li>

推荐答案

您的HTML无效.您不允许使用嵌套超链接之类的东西.这意味着尽管有错误也被原谅的HTML解析器必须对元素树提出新的解释.这是Firefox至少将其翻译为的内容:

Your HTML is invalid. You have disallowed things like nested hyperlinks. This means the HTML parser, which is designed to be forgiving in spite of errors, has to come up with a new interpretation of your element tree. Here's what Firefox at least translates it to:

<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来自己获取此信息.

You can get this information for yourself by copying the HTML from your browser's DOM inspector.

如您所见，其他< a/> 元素不是 .viewAbstractToggleTitle 的同级元素.这是因为DOM解析器必须插入第一个< a/> 元素的结尾，因为您不能嵌套它们.

As you can see, the other <a/> elements are not siblings of .viewAbstractToggleTitle. This is because the DOM parser had to insert a closing of your first <a/> element since you cannot nest them.

这篇关于为什么nextelementsibling返回null |dom遍历js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！