document.querySelectorAll("span + a") не работает?

Question

У меня есть такой HTML-код.

<span class="vm-video-side-notification-text-item">
    <a href="/video_copynotice?v=4XrAMcXy0co" class=" yt-uix-sessionlink " data-url="/video_copynotice?v=4XrAMcXy0co" data-sessionlink="ei=DTr_V7jrJM2luAKd1JSgCQ">Includes copyrighted content</a>
</span>

я использую

var x = document.querySelectorAll("span + a");

alert(x.length);

предупреждение "0"... я не знаю почему.
Я вижу, что w3school говорит

Элемент + элемент
div + p
Выбирает все <p> элементы, которые размещаются сразу после <div> элементы

поэтому я стараюсь span + a. Кто-нибудь может исправить мою ошибку?

Answer 1

Вы объединяете элементы с тегами.

В то время как начальный тег a непосредственно после начального тега span действительно, a элемент находится внутри span стихия

Итак, чтобы ваш пример работал, вы можете либо

1. изменить селектор запросов на "span > a" для любого a прямо внутри span"

   var x = document.querySelectorAll("span > a");
   
   alert(x.length);
   

2. или измените HTML, чтобы иметь a элемент после span элемент

   <span class="vm-video-side-notification-text-item">
   </span>
   <a href="/video_copynotice?v=4XrAMcXy0co" class=" yt-uix-sessionlink " data-url="/video_copynotice?v=4XrAMcXy0co" data-sessionlink="ei=DTr_V7jrJM2luAKd1JSgCQ">Includes copyrighted content</a>
   

(... но не оба!)