why nextelementsibling return null | dom traversing js

Question

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>

The `li` element only has a child single element (the `a`). Your HTML is invalid as you are nesting `a` elements. You probably forgot an `` somewhere. — Quentin, Nov 04 '20 at 15:41
@Quentin probably not.. there are three `a` tag .. but I try to toggle class by dom traversing ... .. this html structure I found from my client's project... that is it. — نور, Nov 04 '20 at 15:52
@Quentin there are also nested `span` elements... title text are in span element ...i update question .. would review it ? — نور, Nov 04 '20 at 16:16
Still the same problem. The HTML is invalid and the `` that is a child of the `
Please fix your HTML: it is invalid. `` should at the very least be closed with ``, but abusing an `` that way is all kinds of wrong, and it just shouldn't even be there. Fix your HTML structure first (there are plenty of tools that let you validate HTML both online and offline, even in the various popular code editors) and _then_ try to fix your JS now that your HTML isn't part of the problem anymore. — Mike 'Pomax' Kamermans, Nov 04 '20 at 16:18
I am not clear ... . _Only childs don't have siblings by definition_ ? — نور, Nov 04 '20 at 16:26
@noor — If someone is an only child then they have no brothers or sisters. That is what being an only child means. — Quentin, Nov 04 '20 at 16:46
I believe my html structure is invalid . from this [doc](https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element) an `a` tag can hold block level element . _`a` tag can not hold `a` tag as a child_ ... any doc or reference ? would anyone help ? — نور, Nov 05 '20 at 10:09
I think Jacob answered your question. Why you get a `null` for the 3rd sibling is because there is none. The browser parser closed your first `` tag when it saw a second one. -- About a [valid source](https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling) read the first paragraph: *The ... read-only property returns ... or null if the specified element is the last one in the list.* — Louys Patrice Bessette, Nov 12 '20 at 15:11

Jacob · Accepted Answer · 2020-11-04T16:38:16.037

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.

why nextelementsibling return null | dom traversing js

1 Answers1

Linked