IE10 の Node.contains

以下の HTML を開くと、画面に true か false と表示する。

ソースコードは以下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>element.contains</title>
<script>
window.onload = function() {
  var element = document.getElementsByTagName("title")[0];
  var result = element.contains(element.firstChild);
  document.getElementById("dst").appendChild(document.createTextNode(result));
};
</script>
</head>
<body>
<h1 id="dst"></h1>
</body>
</html>

title 要素を element 変数に格納し、element.contains(element.firstChild) を実行する。その結果 (true か false) を画面に出力している。

4 行目に <title>element.contains</title> という部分があるが、これ全体が title 要素である。title 開始タグと終了タグの間に、「element.contains」という文字列があるが、これ即ち title 要素の子なり。element.contains(element.firstChild) にて、title 要素は、自分自身で我が子を含んでおるかと問うておる。「contains」とは「含む」という意味であるから。答えはもちろん「はい」であるから、JavaScript language で「はい」を意味する「true」となる。画面に「true」と現れれば、正しい答えである。

以下に、各ブラウザでの結果を示す。

true

「はい」、含んでおります。

true

最先端バージョンでも true!!

true

Firefox も true!!

納得の結果ではなかろうか。一方、その頃・・・

  • IE 10.0.9200.16688
false

false! ぬぁあにぃい！？ 我が子を含んでおらんと申すかぁあァ！？

IE10 の「開発者ツール」で「ブラウザー モード」を変更する。

  • IE10
  • IE10 互換表示
  • IE9
  • IE8
  • IE7
false

どれもすべて false! ナゼダ！！！

W3C の仕様書には、contains についての定義がある。

The contains(other) method must return true if other is an inclusive descendant of the context object, or false otherwise (including when other is null).

とのこと。

Mozilla にもリファレンスがある。

contains は DOM4 であって、現在 Working Draft 段階である。ブラウザごとに挙動が異なるのは、仕方ないね（断言）

追記

…と、思ったが、とあるバグ報告を発見した。

内容は、「IE10 の contains() がおかしい」というものだ。

Microsoft がそれについて回答している。