sample: get deepest elements

by sii_side

HTML

<!-- パターン1:単純なネスト -->
<div>
  <div>hoge
    <p>fuga
      <span>piyo</span>  <!-- 最下層 -->
    </p>
  </div>
</div>

<hr>

<!-- パターン2:最下層に兄弟要素有り -->
<div>
  <div>hoge
    <p>fuga</p>  <!-- 最下層 -->
    <p>piyo</p>  <!-- 最下層 -->
    <p>foo</p>   <!-- 最下層 -->
  </div>
</div>

<hr>

<!-- パターン3:子要素を持たないが最下層ではない要素あり -->
<div>
  <div>hoge
    <p>fuga</p>  <!-- 最下層ではない -->
    <p>
      <span>piyo</span>  <!-- 最下層 -->
    </p>
    <p>foo</p>  <!-- 最下層ではない -->
  </div>
</div>

JavaScript

var getDeepestElements = function() {
	//一旦body内のすべての要素を取得
	var elements = document.body.querySelectorAll("*");

	//子要素を1つでも持つ要素を除外する
	elements = [].slice.call(elements).filter(function(elm) {
  	return elm.querySelectorAll("*").length === 0;
  });
  
  //残った要素のうち、兄弟要素が子要素を持つ要素を除外する
  elements = elements.filter(function(elm) {
  	var siblings = elm.parentNode.querySelectorAll(":scope > *");
    for(var i = 0; i < siblings.length; i++) {
    	if(siblings[i].querySelectorAll("*").length > 0) {
      	return false;
      }
    }
    return true;
  });
  
  //残った要素を返す
  return elements;
};

var deeps = getDeepestElements();
deeps.forEach(function(elm) {
	elm.style.color = "#f00";  //最下層の文字色を赤に
});