Documentに繋がってないDOMツリーから要素を探す場合querySelector()を使う

javascript メモ

正確にはDocumentのroot elementが属するツリーのサブツリーでないDOMツリーから要素を探す場合。下記のようなケース。

  • htmlの塊をテンプレートとして使いたいので、Documentに繋がってない要素にinnerHTMLでhtmlの塊を挿入する
  • そのhtmlの塊の中に、属性の変更をしたい要素があるので、何らかの方法でその要素を取り出したい
  • その時点でDocumentに繋がってないので、getElementById()等で取り出せない(DocumentFragmentはDocumentを継承してないのでそのようなIFはない)
  • ツリーをjavascriptの世界で辿るのはやりたくない

querySelector()やquerySelectorAll()はNodeSelector IFのメソッドなので、DocumentFragment, Elementなどが継承している。
よって、これらを利用する。

	var ele = document.createElement('div');
	ele.innerHTML = '<div id="neko1">neko1<div id="neko2">neko2</div></div>';
	console.log(ele.querySelector('#neko2'));