使用javascript更快地选择元素

Question

我想知道是否有更快的方法可以选择：

document.getElementById('container')
.getElementsByTagName('p')[0]
.getElementsByTagName('strong')[1]
.innerText

结构为：

<div id='container'>
<p>
<strong></strong>
<strong> what I would like to get</strong>
</p>
<div id='moredivs'>
</div>
<div id='moredivs'>
</div>
</div>

Answer 1

更快，不-更优雅，是的：

首先，您需要有效的HTML:

console.log(
document.querySelector("#container > p > strong:last-child").textContent
);

<div id='container'>
<p>
<strong></strong>
<strong>Text I'd like to get</strong>
</p>
</div>

Answer 2

这是我经常使用的一个方便的技巧。它看起来很像jQuery，但事实并非如此。

const $ = document.querySelector.bind(document);
const it = $('container').innerText

或

const $$ = document.querySelectorAll.bind(document);
const it = $$('#container p')[0].getElementsByTagName('strong')[1].innerText

不完全是jQuery，但在整个javascript文件中键入的内容比不键入要少一些，并且可重复使用。

当然，mplugian的有价值的答案(这个答案线程(也可以包含在这个方便的速记中

const $ = document.querySelector.bind(document);
const txt = $('#container > p:first-of-type > strong:nth-child(2)').innerText
console.log(txt);

<div id='container'>
<p>
<strong></strong>
<strong> what I would like to get</strong>
</p>
<div id='moredivs'>
</div>
<div id='moredivs'>
</div>
</div>

参考：

https://dev.to/mrahmadawais/use-instead-of-document-queryselector-all-in-javascript-without-jquery-3ef1

Answer 3

<div id='container'>
<p>
<strong></strong>
<strong id='thisText'> what I would like to get</strong>
</p>
<div id='moredivs1'> //classes are reusable, ids "aren't"
</div>
<div id='moredivs2'>
</div>
</div>

带有：

document.querySelector('#thisText').innerText

这是我最常使用的