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 говорит

элемент + элемент
ДИВ + р
Выбирает все <p> элементы, которые расположены сразу после <div> элементов

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

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> 
   

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