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
選擇，是經過<div>元素

立即將所有<p>元素，所以我嘗試跨度+一個。任何人都能糾正我的錯誤？

Answer 1

您正在使用標籤混合元素。

雖然a的起始標記的span確實開始標籤之後直接a元素是span元素內。

所以，爲了您的示例工作，您可以

1. 變化的查詢選擇到"span > a"爲「直接任意a內span」

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

2. 或改變在span元素之後有a元素

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

（...但不是兩個！）