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

2015-12-15

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
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) だと子孫ノードもまとめて複製されます。）

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

1
2
3
4
5
6
7
8
var el1 = document.createElement('input');
el1.type = 'checkbox';
var el2 = el1.cloneNode();
 
el1.checked = true;
el2.checked = false;
 
console.log(el1.isEqualNode(el2));  // => true

参考