☰

IE11 innerHTML の奇妙な動作 質問する

tag-icon • tag-icon javascript internet-explorer-11 riot.js
IE11 innerHTML の奇妙な動作 質問する

IE11 で element.innerHTML の動作が非常に奇妙です。

ご覧のとおり:出典: amazonaws.com一部のriotjs式は評価されません。

ここに画像の説明を入力してください

原因は 2 つに絞られました:
- その上にあるユーロ記号。これは としてエンコードされていますが、または€でも同じ動作をします。これは通貨記号範囲のすべての文字、および他の範囲で発生します。標準文字を削除または使用しても問題は発生しません。- 方法はカスタム タグとテンプレートを作成します。基本的には次のようになります:\u20AC€
riotjs

var html = "{reward.amount.toLocaleString()}<span>&#8364;</span>{moment(expiracyDate).format('DD/MM/YYYY')}";
var e = document.createElement('div');
e.innerHTML = html;

結果のeノードでは、e.childNodes次の配列が返されます。

[0]: {reward.amount.toLocaleString()}
[1]: <span>€</span>
[2]: {
[3]: moment(expiracyDate).format('DD/MM/YYYY')}

明らかに、ノード 2 と 3 は 1 つだけである必要があります。これらを分割すると、評価する式が認識されなくなり、問題が発生します。

しかし、それだけではありません。この問題は一貫しておらず、たとえばフィドルでは再現できません。https://jsfiddle.net/5wg3zxk5/4/、HTML 文字列が正しく解析されます。

私の質問は、特定の文字によって element.innerHTML が入力を解析する方法がどのように変わるのか、ということだと思います。どうすれば解決できるでしょうか?

ベストアンサー1

.childNodesは、生成された配列 (... NodeList) であり、次の値で埋められますが、次のELEMENT_NODE値で埋められる場合もあります: ATTRIBUTE_NODE、、、、、、、、、、、、、、、...TEXT_NODECDATA_SECTION_NODEENTITY_REFERENCE_NODEENTITY_NODEPROCESSING_INSTRUCTION_NODECOMMENT_NODEDOCUMENT_NODEDOCUMENT_TYPE_NODEDOCUMENT_FRAGMENT_NODENOTATION_NODE

おそらくあなたはノードのみタイプから:ELEMENT_NODE (divとか)そしておそらくまたTEXT_NODE。

単純なループを使用して、 を持つノードだけを保持します.nodeType === Element.ELEMENT_NODE(または、 である列挙型と比較します1)。

よりシンプルな代替手段である を使用することもできます.children。

おすすめ記事