2

ノードが特定のセレクターに一致する子を持っているかどうかをテストする最新の簡潔で高速な方法は何ですか?

「簡潔」とは、ループを回避するなど、jQuery または関数型スタイルに似たものを意味します。ネイティブセレクターがこの種のものをますます増やしていることは知っていますが、開発に追いついていません. そのようなものがブラウザー間でまだ存在しない場合は、私も知りたいです。

私はそれが簡単だと思っていましたが、Google と SO を検索すると、jQuery を使用して多くの誤ったヒットを見つけたり、直接の子だけでなく任意の深さで任意の子孫を見つけたりします。多くの関数型スタイルのメソッドが追加され、ブラウザー間で標準化される前の時代遅れの質問もあります。

4

4 に答える 4

6

1 つのオプションは、直接の子コンビネータ>と:scope疑似クラスを使用することです。

var children = parentElement.querySelectorAll(':scope > div');


var parentElement = document.querySelector('.container');
var children = parentElement.querySelectorAll(':scope > div');

for (var i = 0; i < children.length; i++) {
  children[i].style.background = '#f00';
}
.level2 { background-color: #fff; }
<div class="container">
  <span>Span</span>
  <span>Span</span>
  <div class="level1">Direct 'div'
    <div class="level2">Nested 'div'</div>
  </div>
  <div class="level1">Direct 'div'
    <div class="level2">Nested 'div'</div>
  </div>
  <div class="level1">Direct 'div'
    <div class="level2">Nested 'div'</div>
  </div>
</div>

:scope疑似クラスはまだ実験的なものと見なされており、完全なブラウザー サポートがないことに注意してください。それにもかかわらず、それはおそらく最も「現代的な」ソリューションです（あなたが求めたように）。

または、.filter()メソッドを使用して、親要素の子が特定のセレクターと一致するかどうかを確認できます。

function getChildren(parent, selector) {
  return Array.prototype.filter.call(parent.children, function(node) {
    return node.matches(selector);
  });
}

使用法：

getChildren(parentElement, 'div'); // Direct children 'div' elements


function getChildren(parent, selector) {
  return Array.prototype.filter.call(parent.children, function(node) {
    return node.matches(selector);
  });
}

var parentElement = document.querySelector('.container');
var children = getChildren(parentElement, 'div');

for (var i = 0; i < children.length; i++) {
  children[i].style.background = '#f00';
}
.level2 { background-color: #fff; }
<div class="container">
  <span>Span</span>
  <span>Span</span>
  <div class="level1">Direct 'div'
    <div class="level2">Nested 'div'</div>
  </div>
  <div class="level1">Direct 'div'
    <div class="level2">Nested 'div'</div>
  </div>
  <div class="level1">Direct 'div'
    <div class="level2">Nested 'div'</div>
  </div>
</div>

于 2016-01-27T02:41:38.097 に答える