perché nextelementsibling restituisce null | dom attraversando js

Question

quando faccio clic sul testo del titolo (Title Goes Here). Ottengo null per nextElementSiblinginvece di aelement ...

modificare

puoi annidare qualsiasi elemento all'interno di un <a>eccetto quanto segue :

1. <a>
2. <button>
3. segui il link

<a>ed <button>entrambi non sono validi ..

ma ottengo null per il atag .. non per il buttontag .... Sto cercando maggiore chiarezza e fonte valida ...

se consolo il log console.log(document.links)... ne do tre HTMLCollectionraccolta ...

Fine modifica

Sotto il codice di esempio

  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>

Answer 1

Il tuo codice HTML non è valido. Hai disabilitato cose come i collegamenti ipertestuali nidificati. Ciò significa che il parser HTML, progettato per perdonare nonostante gli errori, deve trovare una nuova interpretazione dell'albero degli elementi. Ecco in cosa almeno Firefox lo traduce:

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

Puoi ottenere queste informazioni da solo copiando l'HTML dall'ispettore DOM del tuo browser.

Come puoi vedere, gli altri <a/>elementi non sono fratelli di .viewAbstractToggleTitle. Questo perché il parser DOM ha dovuto inserire una chiusura del tuo primo <a/>elemento poiché non puoi nidificarli.