js初心者ですが気付いた事をメモ。

#背景#

テキストエリアの中に画像を挿入してプレビューしながら編集出来るインターフェースをつくっている最中に、<div>タグの中にある<img>タグを取得したいということがあった。

<div>タグの中にはFileReaderクラスで取得したbase64エンコードされた画像データが入っているため、20万文字×(画像数)ぐらいの文字数があった。

<div>
	<img src='data:image/jpeg;base64,/9j/7AARRHVja3kAAQAEAAAAZAAA/+EDG2h0dHA6Ly9ucy5hZG9iZ
	S5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOW
	【略】
	T+fSufBaQA1fy+qoMa1RCEclqNzAgeZlNZIs/EAclCn3EL9p/wBfUpknSiQuv//Z'>
	<img src='data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQ
	FxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/
	【略】
	7wBCugu4BxlCIok4HWrwzvrrFpLSKLiTHXprodYFp5M//2Q=='>
</div>

#結果#

結論としては、querySelectorAllの方が多い文字数に対応している。

//pattern1
var images = div.getElementsByTagName('img');
//pattern2
var images = div.querySelectorAll('img');

pattern1の時はせいぜい２０万文字まで（画像一つまで）しか取得出来なかった。（エラーにはならないが取得は出来ない。）
pattern2の時は10枚程度画像が入っていても問題なく取得出来た。つまり200万文字程度は検索できる。

理由はなぜなのかはわからなかったが、検索のアルゴリズムが違う？
どの程度の文字数まで動作するのかは ~~面倒なので~~調べていないが、ブラウザやPCのスペックによっても違うのかもしれない。