querySelector/querySelectorAll selector_html/css_WEB-ITnose の見落としやすい 2 つのポイント

jquery を書きすぎると、ネイティブ js の大きな API を忘れてしまいがちです。これに該当する場合は、HTML5 jquery に似たセレクターの querySelector と querySelectorAll を確認してください。querySelectorAll API には注意が必要な 2 つの点があります。以下を参照してください。

まず querySelector の構文を見てみましょう:

dom.querySelector(selectors)

dom は任意の dom 要素、selector は CSS セレクター文字列です。CSS セレクター文字列とは何ですか? どのような種類のセレクター、ID セレクター、および要素セレクターが CSS セレクター文字列になりますか?

querySelector は、セレクター セレクター文字列に一致する dom のサブ要素内の最初の要素を返します。

<div id="contani">    <div>        Tencent    </div>    <div>        Alibaba    </div></div><script>    console.log( document.querySelector('#contani div') )</script>

結果の出力は

Tencent

this div

querySelectorAll、構文:

dom.querySelectorAll(selectors)

上記と同じですが、異なる点は、一致するすべての要素のリスト (nodeList) を返すことです。 collection であり、非ライブです

例: (HTML 構造は上記と同じです)

console.log( document.querySelectorAll('#contani div') )

結果はもちろん 2 つの子 div が返されます

非ライブとは何ですか? querySelectorAll で一致した要素が変更された場合、その結果はリアルタイムでは更新されないことを理解してください。これが最初の注意点です。

<div id="contani">    <div class="child">        Tencent    </div>    <div class="child">        Alibaba    </div></div><script>    var m = document.querySelectorAll('.child');    var n = document.getElementsByClassName('child');    console.log( 'querySelectorAll: ' + m.length )    console.log( 'getElementsByTagName: ' + n.length )    var newDiv = document.createElement('div');    newDiv.className = 'child';    contani.appendChild(newDiv);    console.log('---------append child---------')    console.log( 'querySelectorAll: ' + m.length )    console.log( 'getElementsByTagName: ' + n.length )</script>

Output:

事実が証明されています。js は子クラスを持つ div を動的に作成し、それを contani コンテナーに挿入します。querySelectorAll の結果セットはリアルタイムで更新されませんが、getElementsByTagName の結果セットはリアルタイムでライブで更新されます。

querySelectorAll についてもう 1 つ注意すべき点は、querySelectorAll のセレクター文字列が 'div div' (dom.querySelectorAll('div div') など) である場合に限り、一致する要素には dom が含まれます。たとえば、dom 要素とその子要素が div div などの親子構造を形成している場合も照合されます。

例:

<div class="contani">    <div class="contani">        Qihoo        <div>Safe</div>    </div>    <div class="child">        Tencent        <div>QQ</div>    </div>    <div class="child">        Alibaba        <div>Alipay</div>    </div></div><div class="child">    Baidu    <div>Family tong</div></div><script>    console.log( document.querySelectorAll('.contani div div').length )    console.log( document.querySelector('.contani').querySelectorAll('div div').length )    console.log( document.querySelectorAll('div div').length )</script>

console.log( document.querySelectorAll('.contani div div').length )console.log( document.querySelector('.contani').querySelectorAll('div div').length )

これら 2 つのマッチング結果は同じように見えますが、実際には同じですか?上記の内容を踏まえて、まず結果がどうなるかを考えてから、この記事の内容を理解しているかどうかを確認するには、ここをクリックして結果を確認してください

著者：神神

出典：http://www. cnblogs .com/wangmeijian

この記事の著作権は著者およびブログパークに帰属しますので、出典を明記してください。

このブログ記事が役に立ったと感じていただけましたら、右下の[おすすめ]をクリックしてください、ありがとうございます!