why nextelementsibling return null | dom traversing js

问题

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

Edit

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

<a>
<button>
follow link

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

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

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

End Edit

Below Example Code

  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>

回答1:

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>

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

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.

来源：https://stackoverflow.com/questions/64678251/why-nextelementsibling-return-null-dom-traversing-js

标签

javascript

html

dom