トップ JavaScriptに関する質問 DOM操作がChromeで動くのにIEやEdgeで動かない (childrenやinnerHTMLが動かない)

編集履歴

回答編集履歴

markdown修正

2017/07/02 15:44

投稿

think49

スコア18189

test CHANGED Viewed

@@ -4,9 +4,9 @@
 `DOMParser#parseFromString` は「Document インターフェースを持つオブジェクト」を返します。
-https://w3c.github.io/DOM-Parsing/#the-domparser-interface
+- [2.1 The DOMParser interface - DOM Parsing and Serialization](https://w3c.github.io/DOM-Parsing/#the-domparser-interface)
@@ -14,7 +14,11 @@
+下記URLより引用。
-https://triple-underscore.github.io/DOM4-ja.html#interface-parentnode より引用。
+- [3.2.6. mixin ParentNode - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-parentnode)
@@ -48,7 +52,11 @@
+下記URLより引用。
-https://triple-underscore.github.io/DOM4-ja.html#interface-node より引用。
+- [3.4. インタフェース Node - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-node)
@@ -72,9 +80,11 @@
+下記URLより引用。
-https://triple-underscore.github.io/DOM4-ja.html#interface-nonelementparentnode より引用。
+- [3.2.4. mixin NonElementParentNode - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-nonelementparentnode)
@@ -102,7 +112,11 @@
+下記URLより引用。
-https://triple-underscore.github.io/DOM4-ja.html#interface-document
+- [3.5. インタフェース Document - 3.2.4. mixin NonElementParentNode](https://triple-underscore.github.io/DOM4-ja.html#interface-document)
@@ -128,7 +142,11 @@
+下記URLより引用。
-https://triple-underscore.github.io/DOM4-ja.html#interface-element より引用。
+- [3.9. インタフェース Element - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-element)
@@ -152,7 +170,11 @@
+下記URLより引用。
-https://w3c.github.io/DOM-Parsing/#extensions-to-the-element-interface より引用。
+- [2.3 Extensions to the Element interface - DOM Parsing and Serialization](https://w3c.github.io/DOM-Parsing/#extensions-to-the-element-interface)
@@ -214,7 +236,11 @@
+下記URLより引用。
-https://msdn.microsoft.com/en-us/library/ms533897.aspx より引用。
+- [innerHTML property (Internet Explorer) - MSDN](https://msdn.microsoft.com/en-us/library/ms533897.aspx)

未知のHTML要素ノード \(HTMLUnknownElement\)

2017/07/02 15:44

投稿

think49

スコア18189

test CHANGED Viewed

@@ -356,6 +356,36 @@
+### 未知のHTML要素ノード (HTMLUnknownElement)
+> parseFromStringの2つ目のパラメータで、text/xmlのところをtext/htmlにするとエラーがなくなるところにもヒントがありそうです。
+そこまで検証する時間がとれなかったので未確認ですが、HTML文書には未知のタグ名を持つ要素ノード(HTMLUnknownElement)は HTMLElement を継承する仕様があり、IE11がHTMLUnknownElement を実装している可能性があります。
+これは `Object.prototype.toString`, `instanceof` 演算子を使うことではっきりします。
+https://triple-underscore.github.io/HTML-dom-ja.html#htmlunknownelement
+```JavaScript
+var root = xmlDoc.getElementsByTagName("root")[0];
+console.log(Object.prototype.toString.call(root));
+console.log(root instanceof HTMLElement);
+```
 ### 修正案

実装状況の検証 \(IE11, Edge38\)、修正案

2017/07/02 03:43

投稿

think49

スコア18189

test CHANGED Viewed

@@ -260,4 +260,118 @@
+### 実装状況の検証 (IE11, Edge38)
+> SCRIPT5007: Unable to get property 'length' of undefined or null reference
+> というエラーが出た個所が、
+> xmlDoc.getElementsByTagName("root")[0].children.length
+> です。
+エラーメッセージを言葉通りに読むと、**Element インターフェースが children を持っていない(undefined)**と読めます。
+私の環境で検証したところでは、次のようになりました。
+- IE11 は `Element.prototype.innerHTML`, `Element.prototype.children`, `Document.prototype.children` を実装していない
+- Edge38 は `Element.prototype.children`, `Document.prototype.children` を実装していない
+```JavaScript
+'use strict';
+console.log('children' in Element.prototype);     // false (IE11, Edge38)
+console.log('children' in HTMLElement.prototype); // true (IE11, Edge38)
+console.log('children' in Document.prototype);    // false (IE11, Edge38)
+console.log('innerHTML' in Element.prototype);      // false (IE11) / true (Edge38)
+console.log('innerHTML' in HTMLElement.prototype);  // true (IE11, Edge38)
+console.log('getElementsByTagName' in Document.prototype); // true (IE11, Edge38)
+console.log('getElementsByTagName' in Element.prototype);  // true (IE11, Edge38)
+console.log('getElementById' in Document.prototype); // true (IE11, Edge38)
+console.log('evaluate' in Document.prototype);    // false (IE11) / true (Edge38)
+```
+HisayukiIgeta さんが書かれたコードを私の環境で検証したところ、Edge38 ではエラー無く実行できましたが、
+```JavaScript
+var xmlDoc = new DOMParser().parseFromString('<?xml version="1.0" encoding="UTF-8"?><root id="11" result="abc"><test id="22">てすと</test>\n<test id="33"><test2></test2></test></root>', "text/xml");
+console.log("<1>"+document.getElementById("table01").children.length+", "+document.getElementById("table01").innerHTML);  // <1>1, <tbody><tr><td>あいうえお</td></tr></tbody>
+console.log("<2>"+xmlDoc.getElementsByTagName("root")[0].childNodes.length+", "+xmlDoc.getElementsByTagName("root")[0].childNodes[2].innerHTML);  // <2>3, <test2/>
+console.log("<3>"+xmlDoc.getElementsByTagName("root")[0].children.length);  // <3>2
+```
+IE11では <2> の innerHTML が `undefined` を返し、<3> は例外で処理が停止されました。
+```JavaScript
+var xmlDoc = new DOMParser().parseFromString('<?xml version="1.0" encoding="UTF-8"?><root id="11" result="abc"><test id="22">てすと</test>\n<test id="33"><test2></test2></test></root>', "text/xml");
+console.log("<1>"+document.getElementById("table01").children.length+", "+document.getElementById("table01").innerHTML);  // <1>1, <tbody><tr><td>あいうえお</td></tr></tbody>
+console.log("<2>"+xmlDoc.getElementsByTagName("root")[0].childNodes.length+", "+xmlDoc.getElementsByTagName("root")[0].childNodes[2].innerHTML);  // <2>3, undefined
+console.log("<3>"+xmlDoc.getElementsByTagName("root")[0].children.length);  // 未定義または NULL 参照のプロパティ 'length' は取得できません
+```
+### 修正案
+Edge38 では `Document#evaluate` が使えます。
+IE11 にはありませんが、`Function#call` を併用すれば実用だと思います(そこまで時間が取れなかったので、未確認)。
+```JavaScript
+document.evaluate.call(xmlDoc, ...);
+```
 Re: HisayukiIgeta さん

typo修正

2017/07/02 03:07

投稿

think49

スコア18189

test CHANGED Viewed

@@ -228,7 +228,7 @@
 (このバグはどこかのバージョンで修正されたような記憶があったようななかったような…、失念しました。)
-table関係要素ノードのAPIを使うか、appendChild等の単純なDOM API出操作して下さい。
+table関係要素ノードのAPIを使うか、appendChild等の単純なDOM APIで操作して下さい。

markdown修正

2017/07/01 02:20

投稿

think49

スコア18189

test CHANGED Viewed

@@ -238,6 +238,8 @@
 > Chromeで動いているとても簡単なJavaScriptなのですが、IEやEdgeで動かないのです。
 IEやEdgeのバージョンはいくつですか。

innerHTML

2017/07/01 02:17

投稿

think49

スコア18189

test CHANGED Viewed

@@ -210,4 +210,52 @@
+### innerHTML のIE実装バグ
+https://msdn.microsoft.com/en-us/library/ms533897.aspx より引用。
+> The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.
+innerHTMLプロパティは、col、colGroup、frameSet、html、head、style、table、tBody、tFoot、tHead、titleおよびtrオブジェクトでは**読み取り専用**です。
+従って、IE ではtable要素ノードをinnerHTMLで書き換える事は出来ません。
+(このバグはどこかのバージョンで修正されたような記憶があったようななかったような…、失念しました。)
+table関係要素ノードのAPIを使うか、appendChild等の単純なDOM API出操作して下さい。
+### 不具合の詳細について
+> Chromeで動いているとても簡単なJavaScriptなのですが、IEやEdgeで動かないのです。
+IEやEdgeのバージョンはいくつですか。
+> 下記サンプルコードにあるように、DOM操作をしているのですが、ChildNodesは動くのですがChildrenが動きません。
+> またinnerHTMLも動きませんし、getElementByIdも動かないようです。
+childNodes は複数ありますが、全ての場所で動かないのですか。動く場所と動かない場所があるのではありませんか。
+他のプロパティ(children, innerHTML, getElementById,, getElementsByTagName)についても同様に確認していますか。
+エラーメッセージがコンソールに出力されていませんか。
 Re: HisayukiIgeta さん

typo修正

2017/07/01 02:15

投稿

think49

スコア18189

test CHANGED Viewed

@@ -200,7 +200,7 @@
 - Interface Element は getElementsByTagName,  childNodes, children を持ち、getElementById を持ちません。
-- Interface Element は innerHTML を持ちますが、それがXML文書であるならば、XML構文を正しくなければ例外を返します。
+- Interface Element は innerHTML を持ちますが、それがXML文書であるならば、XML構文が正しくなければ例外を返します。

typo修正

2017/07/01 01:54

投稿

think49

スコア18189

test CHANGED Viewed

@@ -194,7 +194,7 @@
-- `DOMParser#parseFromString` は」Document インターフェースを持つオブジェクト」を返します。
+- `DOMParser#parseFromString` は「Document インターフェースを持つオブジェクト」を返します。
 - Interface Document は getElementsByTagName, getElementById, childNodes, children を持ちます。