3

たとえば、ドキュメントのスニペットがある場合：

<div> <!-- I have a reference to this: "outerDiv". -->
  <p> <!-- This is the <p> I want to select. -->
    <div>
      <p> <!-- I don't want to select this <p>. --> </p>
    </div>
  </p>
</div>

（これは架空のドキュメントです。HTMLパーサーは実際にはこのようなDOMを構築しません。）

そして、最も外側の<div>要素への参照、私はどういうわけか、外側の直接の子である要素outerDiv.querySelectorAll('p')のみを選択するために使用したいと思います。<p><div>

実際にはよりもはるかに長いセレクターがあるため、要素を使用outerDiv.childNodesして検索することはできません（たとえば、のように見える場合があります）。また、HTMLを制御できず、jQueryやその他のJavaScriptライブラリを使用できません。<p>"p""p > a > b"

また、内部もに一致"div > "するため、セレクターの前に追加して適用するだけでは不十分です。outerDiv.parentNode<p>"div > p"

CSSセレクターを自分で解析しすぎずにこれを行うためのクリーンな方法はありますか？

4

2 に答える 2

2

あなたはbody > div > p、または最も外側のdivの外側にあるものを使用できますか？

于 2011-04-08T01:40:39.190 に答える
0

外側のdivへの参照があるとすると、次の式を使用できます。

outerDiv.querySelectorAll(":scope > p");

この式は、 developer.mozilla.orgで参照されているため、outerDiv要素の直接の子であるすべてのp要素を選択します。

querySelector（）、querySelectorAll（）、matches（）、Element.closest（）などのDOM APIから使用する場合、：scopeはメソッドを呼び出した要素と一致します。

唯一の欠点は、：scopeがInternetExplorerでサポートされていないことです。

（次のコードスニペットでは、要素内にdivまたは要素を配置するのが間違っているため、段落付きの例は使用しません。これに関するリンクを確認してください：Stack Overflow＆Mozilla Developerpp）

//reference to outer div
let outerDiv = document.getElementById("outerDiv");

let selected = outerDiv.querySelectorAll(":scope > div");

console.log(selected);//it returns only the direct child div
<div id="outerDiv"> <!-- I have a reference to this: "outerDiv". -->
  <div class="I want this"> <!-- This is the <div> I want to select. -->
     <div class="I dont want this"> <!-- I don't want to select this <div>. --></div>
  </div>
</div>

于 2020-05-27T18:01:03.273 に答える