How can I use previously cached selectors with certain aspects of querySelector() ?
例如，我有这个HTML / JavaScript:
let L1, L2, L3;
L1 = document.querySelector('#L1');
L2 = L1.querySelector('div:nth-child(1)');
L2.classList.add('L2');
L3 = L1.querySelector('div:nth-child(2)');
L3.classList.add('L3');
console.log(L2);
console.log(L3);<div id="L1">
<div id="L2">
<div id="L2a"></div>
<div id="L2b"></div>
</div>
<div id="L3"></div>
</div>Notice that div#L2b gets the className 'L3' instead of div#L3 getting it.
我真正想做的是这样的事情:
L3 = L1.querySelector('> div:nth-child(2)');
强制querylog() Select 正确的nth-child(2). 例如，在这个不缓存 Select 器的演示中:
let L1, L2, L3;
const $ = document.querySelector.bind(document);
L1 = document.querySelector('#L1');
L2 = L1.querySelector('div:nth-child(1)');
L2.classList.add('L2');
L3 = document.querySelector('div#L1 > div:nth-child(2)');
L3.classList.add('L3');
console.log(L2);
console.log(L3);<div id="L1">
<div id="L2">
<div id="L2a"></div>
<div id="L2b"></div>
</div>
<div id="L3"></div>
</div>Is there any way this can be done with the L1 cached selector?
在我的真实用例中，L1 Select 器看起来更像是:
const $ = document.querySelector.bind(document);
$('body > div > div#main > div:nth-child(3) > div:nth-child(1) > div > div#L1');
我不敢在必须缓存的15个 Select 器之前输入该字符串.