dlaczego nextelementsibling return null | dom traversing js

Question

kiedy kliknę tekst tytułu (Tytuł idzie tutaj). Otrzymuję wartość null nextElementSiblingzamiast aelementu ...

Edytować

możesz zagnieżdżać dowolne elementy wewnątrz z <a>wyjątkiem następujących :

1. <a>
2. <button>
3. podążaj za linkiem

<a>i <button>oba są nieważne ...

ale otrzymuję wartość null dla atagu .. nie dla buttontagu .... szukam większej przejrzystości i prawidłowego źródła ...

jeśli zaloguję się na konsolę console.log(document.links)... to daje trzy HTMLCollectionkolekcje ...

Zakończ edycję

Poniżej przykładowy kod

  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

Twój kod HTML jest nieprawidłowy. Zabroniłeś takich rzeczy, jak zagnieżdżone hiperłącza. Oznacza to, że parser HTML, który został zaprojektowany tak, aby wybaczał pomimo błędów, musi wymyślić nową interpretację twojego drzewa elementów. Oto, na co Firefox przynajmniej tłumaczy 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>

Możesz uzyskać te informacje dla siebie, kopiując kod HTML z inspektora DOM przeglądarki.

Jak widać, pozostałe <a/>elementy nie są rodzeństwem .viewAbstractToggleTitle. Dzieje się tak, ponieważ parser DOM musiał wstawić zamknięcie pierwszego <a/>elementu, ponieważ nie można ich zagnieździć.