为什么波浪号 ~ 在 Javascript querySelector 中不起作用，但在 CSS 中起作用？

Question

如何在 javascript 的 querySelector 中 select textarea 标签 pre 的同级标签？我已经能够 select 它在 CSS 使用 ~ select 或者。但这似乎在 Javascript?

中不起作用

我知道我可以使用 textarea.parentNode.querySelector('pre')) 方式，但为什么兄弟 select 或 ~ 不能在 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()时，这只能select children.

您也可以使用 + 代替 ~

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>

更新

I am aware of the document way. I was just wondering why tilde can't work? then what's the point of the sibling selector using tilde ~? I read this and it seems to indicate it should work?

您可以将 ~ 与查询 select 一起使用，或者在这种情况下目标元素必须是 children

这是 ~ 与 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>

为什么波浪号 ~ 在 Javascript querySelector 中不起作用，但在 CSS 中起作用？

Why is the tilde ~ not working in Javascript querySelector but works in CSS?

html

javascript

css

queryselector