DOMおれおれAdvent Calendar 2015 – 15日目分

2015-12-15

ノードが同じかどうか確認するには、普通に == ないし === で確認できます。

var el1 = document.body;
var el2 = document.querySelector('body');
console.log(el1 === el2);  // => true

当たり前ですね。普通ですね。

そして複製した場合は同じにはなりません。

var el1 = document.createElement('div');
var el2 = el1.cloneNode();
console.log(el1 === el2);  // => false

中身は一緒でもインスタンスが違うっていう、JavaScript初心者さんがつまづくやつです。

DOMノードの場合、その「中身は一緒」かどうかを確認する isEqualNode() というAPIが用意されています。

var el1 = document.createElement('input');
el1.id = '123';
el1.setAttribute('data-foo', 'bar');
el1.type = 'checkbox';
// <input id="123" data-foo="bar" type="checkbox" />

var el2 = el1.cloneNode();
console.log(el1 === el2);  // => false
console.log(el1.isEqualNode(el2));  // => true

確認する条件は以下の通りです。

  • 二つのノードの種類が同じである事
  • 要素名や文字列内容等が同じである事
  • 要素の属性が全て同じである事
  • 子ノード childNodes も同じである事（ちなみに cloneNode(true) だと子孫ノードもまとめて複製されます。）

属性は確認するけどプロパティは確認しないので、「同じようなチェックボックスで片方はチェックあり、片方はチェックなし」の場合にも「同じ」と判断されるみたいです。

var el1 = document.createElement('input');
el1.type = 'checkbox';
var el2 = el1.cloneNode();

el1.checked = true;
el2.checked = false;

console.log(el1.isEqualNode(el2));  // => true

参考