代码之家 › 专栏 › 技术社区 › sudoExclamationExclamation

为什么tilde~在Javascript querySelector中不起作用,但在CSS中起作用?[副本]

queryselector css html javascript

sudoExclamationExclamation · 技术社区 · 4 年前

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

我知道我可以用 textarea.parentNode.querySelector('pre')) 但是为什么兄弟选择符

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

<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

1 回复 | 直到 4 年前

dippas 4 年前

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>

更新

我知道文件的方式。我只是想知道为什么蒂尔德不能工作?那么使用tilde~的同级选择器有什么意义呢?我读了这篇文章,似乎表明它应该工作?

你可以用但在这种情况下,目标元素必须是子元素

下面是一个例子 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>