createDocumentFragmentとcreateRangeとinsertAdjacentHTMLとcompareDocumentPositionとパフォーマンスとブラウザ互換

自己紹介

createDocumentFragmentとcreateRangeとinsertAdjacentHTMLとcompareDocumentPositionとパフォーマンスとブラウザ互換

「割りと使えるのにあんまり使われてないAPI」をあげてみた

createDocumentFragment （DocumentFragment）

「兄弟要素を一括で扱いたい」場合に使う
（他の用途でも使える）

  var fragment = document.createDocumentFragment();
  fragment.appendChild(document.createTextNode('text'));
  fragment.appendChild(document.createElement('br'));
  var div = document.createElement('div');
  div.appendChild(fragment);
  div.innerHTML; // "text<br>"

どういう場面で使えるか

縦に長い画面で、一定個数ごとに要素を一括で書き出したい場合
（appendChildだと一つづつしか書き出せない）

iOS3.2、Android 2.1以降で動作
（もっと古い可能性もあり）

次

createRange （Range object）

「兄弟要素を一括で扱いたい」場合に使う
（「選択中の要素を取得する」用途でも使える）

  // 子要素の削除
  var div = document.createElement('div');
  div.innerHTML = '12345';
  var range = document.createRange();
  range.selectNodeContents(div);
  range.deleteContents();
  div.innerHTML; // ""

  // 部分削除
  var div = document.createElement('div');
  div.innerHTML = '12345';
  var range = document.createRange();
  range.selectNodeContents(div);
  range.setStart(div.firstChild, 1);
  range.setEnd(div.firstChild, 4);
  range.deleteContents();
  div.innerHTML; // ”15”

どういう場面で使えるか

縦に長い画面で、一定個数ごとに要素を一括で消したい場合
（removeChildだと一つづつしか消せない）

サポートブラウザは不明ですが、Safari 1.2くらいからある

次

insertAdjacentHTML （insertAdjacentText）

jQuery.before, jQuery.prepend, jQuery.append, jQuery.afterを素で扱いたい場合に使う

  var div = document.createElement('div');
  var child = document.createElement('div');
  div.appendChild(child);
  child.insertAdjacentHTML('beforebegin', '1');
  child.insertAdjacentHTML('afterbegin', '2');
  child.insertAdjacentHTML('beforeend', '3');
  child.insertAdjacentHTML('afterend', '4');
  div.innerHTML; // "1<div>23</div>4"

どういう場面で使えるか

DOM操作を高速化したい場合

iOS4.2、Android 2.2以降で動作
（もっと古い可能性もあり）

次

compareDocumentPosition

jQuery.delegateを素で扱いたい場合に使う

  var div = document.createElement('div');
  document.body.appendChild(div);
  window.addEventListener('click', function (event) {
    var res = div.compareDocumentPosition(event.target);
    if (res === 0 || res & Node.DOCUMENT_POSITION_CONTAINED_BY) {
      alert('click!');
    }
  }, false);
  div.click();

どういう場面で使えるか

DOM操作を高速化したい場合

  while(target !== elm) {
    elm = elm.parentNode;
  }
の代わり

iOS4.2、Android 1.6以降で動作
（もっと古い可能性もあり）

ご清聴ありがとうございました