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

編集履歴

回答編集履歴

markdown修正

2017/07/02 15:44

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -1,13 +1,15 @@
 ### DOMParser#parseFromString
 `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)
 ###Interface ParentNode
-https://triple-underscore.github.io/DOM4-ja.html#interface-parentnode より引用。
+下記URLより引用。
+- [3.2.6. mixin ParentNode - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-parentnode)
 > ```
 > interface ParentNode {
 >   [SameObject] readonly attribute HTMLCollection children;
@@ -23,8 +25,10 @@
 ### Interface Node
-https://triple-underscore.github.io/DOM4-ja.html#interface-node より引用。
+下記URLより引用。
+- [3.4. インタフェース Node - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-node)
 > ```
 > interface Node : EventTarget {
 > (中略)
@@ -35,8 +39,9 @@
 ### Interface NonElementParentNode
-https://triple-underscore.github.io/DOM4-ja.html#interface-nonelementparentnode より引用。
+下記URLより引用。
+- [3.2.4. mixin NonElementParentNode - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-nonelementparentnode)
 > ```
 > interface NonElementParentNode {
@@ -50,8 +55,10 @@
 ### Interface Document
-https://triple-underscore.github.io/DOM4-ja.html#interface-document
+下記URLより引用。
+- [3.5. インタフェース Document - 3.2.4. mixin NonElementParentNode](https://triple-underscore.github.io/DOM4-ja.html#interface-document)
 > ```
 > interface Document : Node {
 >   (中略)
@@ -63,8 +70,10 @@
 ### Interface Element
-https://triple-underscore.github.io/DOM4-ja.html#interface-element より引用。
+下記URLより引用。
+- [3.9. インタフェース Element - DOM Standard 日本語訳](https://triple-underscore.github.io/DOM4-ja.html#interface-element)
 > ```
 > interface Element : Node {
 >   HTMLCollection getElementsByTagName(DOMString
@@ -75,8 +84,10 @@
 ### Interface Element の拡張
-https://w3c.github.io/DOM-Parsing/#extensions-to-the-element-interface より引用。
+下記URLより引用。
+- [2.3 Extensions to the Element interface - DOM Parsing and Serialization](https://w3c.github.io/DOM-Parsing/#extensions-to-the-element-interface)
 > ```
 > partial interface Element {
 >   (中略)
@@ -106,8 +117,10 @@
 ### innerHTML のIE実装バグ
-https://msdn.microsoft.com/en-us/library/ms533897.aspx より引用。
+下記URLより引用。
+- [innerHTML property (Internet Explorer) - MSDN](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オブジェクトでは**読み取り専用**です。

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

2017/07/02 15:44

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -177,6 +177,21 @@
 console.log("<3>"+xmlDoc.getElementsByTagName("root")[0].children.length);  // 未定義または NULL 参照のプロパティ 'length' は取得できません
 ```
+### 未知の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);
+```
 ### 修正案
 Edge38 では `Document#evaluate` が使えます。

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

2017/07/02 03:43

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -129,4 +129,61 @@
 エラーメッセージがコンソールに出力されていませんか。
+### 実装状況の検証 (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

スコア18194

answer CHANGED Viewed

@@ -113,7 +113,7 @@
 innerHTMLプロパティは、col、colGroup、frameSet、html、head、style、table、tBody、tFoot、tHead、titleおよびtrオブジェクトでは**読み取り専用**です。
 従って、IE ではtable要素ノードをinnerHTMLで書き換える事は出来ません。
 (このバグはどこかのバージョンで修正されたような記憶があったようななかったような…、失念しました。)
-table関係要素ノードのAPIを使うか、appendChild等の単純なDOM API出操作して下さい。
+table関係要素ノードのAPIを使うか、appendChild等の単純なDOM APIで操作して下さい。
 ### 不具合の詳細について

markdown修正

2017/07/01 02:20

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -118,6 +118,7 @@
 ### 不具合の詳細について
 > Chromeで動いているとても簡単なJavaScriptなのですが、IEやEdgeで動かないのです。
 IEやEdgeのバージョンはいくつですか。
 > 下記サンプルコードにあるように、DOM操作をしているのですが、ChildNodesは動くのですがChildrenが動きません。

innerHTML

2017/07/01 02:17

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -104,4 +104,28 @@
 この通りに動かないブラウザがあるなら、**未実装もしくは実装バグ**と思われます。
 http://caniuse.com やMDNに実装状況は載っているので、そちらを参照して下さい。
+### 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

スコア18194

answer CHANGED Viewed

@@ -99,7 +99,7 @@
 - `DOMParser#parseFromString` は「Document インターフェースを持つオブジェクト」を返します。
 - Interface Document は getElementsByTagName, getElementById, childNodes, children を持ちます。
 - Interface Element は getElementsByTagName,  childNodes, children を持ち、getElementById を持ちません。
-- Interface Element は innerHTML を持ちますが、それがXML文書であるならば、XML構文を正しくなければ例外を返します。
+- Interface Element は innerHTML を持ちますが、それがXML文書であるならば、XML構文が正しくなければ例外を返します。
 この通りに動かないブラウザがあるなら、**未実装もしくは実装バグ**と思われます。
 http://caniuse.com やMDNに実装状況は載っているので、そちらを参照して下さい。

typo修正

2017/07/01 01:54

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -96,7 +96,7 @@
 まとめると、下記のようになります。
-- `DOMParser#parseFromString` は」Document インターフェースを持つオブジェクト」を返します。
+- `DOMParser#parseFromString` は「Document インターフェースを持つオブジェクト」を返します。
 - Interface Document は getElementsByTagName, getElementById, childNodes, children を持ちます。
 - Interface Element は getElementsByTagName,  childNodes, children を持ち、getElementById を持ちません。
 - Interface Element は innerHTML を持ちますが、それがXML文書であるならば、XML構文を正しくなければ例外を返します。