0

DOM 内の単一のテーブルを見つけて、その最初の子を操作しようとする Javascript コードがありますthead(実際には、その子の子であるtrエントリを反復処理しますが、それは質問にとって重要ではありません)。これを行うコードは次のとおりです。

var tableNode = document.getElementById("table").firstChild;

これは Firefox ESR (10/17/24) と IE9 では正常に動作しますが、IE10 では失敗します。その理由は、IE10 が奇妙な DOM エントリを挿入しており、それfirstChildが目的のthead. tableNode.dataこれは、文字列型に設定されているという事実とともに、以下の DOM ダンプに基づいています。

IE10 互換モード (動作する場合) の DOM は次のようになります。

ここに画像の説明を入力

DOM が実際に理にかなっているように見えることがわかります。ただし、通常の IE10 モードで DOM を調べると、次のようになります。

ここに画像の説明を入力

それだけの価値があるため、Chrome は次のことを提供してくれます。

ここに画像の説明を入力

そしてFF17esrは私に与えます：

ここに画像の説明を入力

どちらも空のテキスト要素を持っていないようです。

現在、サイトを互換モードで実行できますが、それをすべての顧客に伝えなければならないのは煩わしいことです。どうやら恐ろしいものを追加することもできます：

<meta http-equiv="X-UA-Compatible" content="IE=9">

私の出力にはありますが、他にどのような影響があるかは完全にはわかりません。

まず、IE9/FF/IE10compat では追加されていないのに、IE10 ではこれらのノードが追加されている理由を理解したいと思います。HTMLの空白が原因である可能性があるという議論がいくつかありますが、これによりランダムなノードが作成されることはないように思われます。いずれにせよ、余分な白はないと思いますスペース。上記の string 型の値は実際にはであることに言及する必要がありますが、これは、行末の改行がこの DOM エントリを作成している可能性があることを意味します。tableNode.data\n

しかし、正直なところ、それはばかげているようです。私が知る限り、HTML はタグの外側の空白を無視するか、少なくとも 1 つの要素に折りたたむようになっています。次のようなことを信じるのは難しいと思います：

<tag>line 1</tag>
<tag>line 2</tag>

それらの間に改行があるという理由だけで、 ,との3 つのDOM エントリが生成されます。tagempty nodetag

これを最もよく解決する方法についてのアイデアはありますか? これらの DOM エントリをスキップするには、Javascript コードを変更する必要がありますか?

4

2 に答える 2

1

ブラウザがテキスト ノードを挿入する場所を知ることはできないため、ブラウザがテキスト ノードを配置する場合に備えて、最初の子「要素」を取得していることを確認する必要があります。

これを行う簡単な関数を次に示します。

getFirstChildElement(parent) {
    var node = parent.firstChild;
    // advance until we get to an element node (skipping text and comment nodes)
    while (node && node.nodeType !== 1) {
        node = node.nextSibling;
    }
    return node;
}

または、単に要素を取得したい場合は、次の<thead>ように簡単に使用できます。

table.getElementsByTagName("thead")[0]
于 2013-10-25T03:54:22.320 に答える
1

Firefox でこれらの空のテキスト ノードが表示されないという確信はありますか? そうあるべきなので質問しています。そうでない場合は、Firefox のバグです。

以前は、IE だけが期待どおりに動作していました。Firefox、Chrome、Safari、Opera などの他のすべてのブラウザーは、これらの空白を保持する必要がある W3C DOM 標準に従っていました。IE10 は、他の Web ブラウザーの仲間入りをし、標準に準拠した方法で動作するようになりました。

これは意味をなさないと不平を言うのは正しいでしょうが、それは標準が要求するものです.

そのため、要素を取得する正しい方法は、次のことを確認することtagNameです。

var table = document.getElementById("table");
var child = table.firstChild;

while (child && child.tagName != 'thread') {
    child = child.nextSibling;
}

// remember to check child after this point because it may be undefined

追加説明

Firebug と Chrome の DOM エクスプローラーは、便宜上これらのテキスト要素を非表示にしますが、それでも存在します。これを試すことができます：

<html>
<body>
    <div id="foo">
        <div id="bar">
        </div>
    </div>
    <script>
        var f = document.getElementById('foo');
        document.body.innerHTML += f.firstChild.id + <br>;
        document.body.innerHTML += f.firstChild.nextSibling.id + <br>;
    </script>
</body>
</html>

古いバージョンの IE を除くすべてのブラウザで、上記のページは次のように出力されます。

undefined
bar

これfirstChildは、 が空のテキスト ノードであるためです。あなたがconsole.logそれをチェックしたいなら、あなたはそれをすることができますfirstChild.

于 2013-10-25T03:55:20.953 に答える