为什么波浪~不工作在Javascript querySelector，但在CSS工作?

Question

我如何在javascript的querySelector中选择textarea标签pre的兄弟姐妹?我已经能够使用~选择器在CSS中选择它。但这似乎在Javascript中不起作用?

我知道我可以使用textarea.parentNode.querySelector('pre'))方式，但为什么兄弟选择器~不在JS中工作，但在CSS中工作?

我有这个简单的测试用例设置:

https://jsfiddle.net/jqdh4ruL/1/

<div>
<textarea id="name" placeholder="Full Name">$This is a long text for full name</textarea>
<pre></pre>
</div>

textarea ~ pre {
background: rgba(255, 0, 0, 0.372);
}
pre {
width: 100px;
height: 100px;
}
var textarea = document.getElementById('name')
console.log(textarea.outerHTML)// returns the correct texture
console.log(textarea.parentNode.querySelector('pre'))//returns correct pre tag
console.log(textarea.querySelector('* ~ pre'))//returns null

Answer 1

使用document代替textarea，因为当您使用textarea.querySelector()时，这只能选择子元素。

也可以用+代替~

const textarea = document.getElementById('name')
console.log(textarea.outerHTML)// returns the correct texture
console.log(textarea.parentNode.querySelector('pre'))//returns correct pre tag
console.log(document.querySelector('textarea + pre'))//returns correct pre tag

<div>
<textarea id="name" placeholder="Full Name">This is a long text for full name</textarea>
<pre></pre>
</div>

更新

我知道文档的方式。我只是想知道为什么波浪不能工作?那么使用波浪号的同胞选择器有什么意义呢?我读了这个，它似乎表明它应该工作?

您可以使用~查询选择器，但在这种情况下，目标元素必须是子元素

下面是~与querySelector()一起工作的例子

const textarea = document.getElementById('name')
const div = document.querySelector('div')
console.log(div.querySelector('textarea + pre'))
console.log(div.querySelector('pre ~ pre'))

<div>
<textarea id="name" placeholder="Full Name">This is a long text for full name</textarea>
<pre>+</pre>
<div>text</div>
<pre>~</pre>
</div>