web-dev-qa-db-ja.com

this.nextSiblingが機能しない

次のコードが「アウト」を警告することを期待しています

<input type=text onfocus="alert(this.nextSibling.id)" />
<output id="out">this is output</output>

しかし、それは未定義の理由を警告しますか？

javascriptsiblings
15
moroccan_dev

nextSiblingは、要素の次の兄弟ノードを選択します。次のノードは、textNodeプロパティを持たないidにすることもできるため、undefined値を取得します。他の答えが示唆しているように、1のnextElementSiblingを持つ次の兄弟ノードを参照するnodeTypeプロパティ（つまり、Elementオブジェクト）を使用するか、要素間の隠し文字を削除することができます。

IE8はnextElementSiblingプロパティをサポートしていないことに注意してください。

15
undefined

これを試して：

alert(this.nextElementSibling.id);

注：nextSiblingプロパティは、同じツリーレベルで、指定されたノードの直後のノードを返します。

nextElementSibling読み取り専用プロパティは、親の子リストで指定された要素の直後の要素を返します。指定された要素がリストの最後の要素である場合はnullを返します。

9
Johan Karlsson

なぜこの問題が発生するのか

nextSiblingは、要素の次の兄弟ノードを選択します。あなたの場合、要素ノード間に新しい行があるため、次のノードとしてテキストノードがあります。要素ノード間の各テキストノードは次のノードとして選択され、このノードにはidプロパティがありません。

これを防ぐには、次の2つの方法を使用できます。

解決策1：

新しい行、すべての空白、コメントノード、または他のテキストノードそしてnextSiblingを使用できます：

<input type="button" value="get next sibling value" onclick="console.log(this.nextSibling.value)"><input type="text" value="txt 1">

解決策2：

nextSiblingの代わりにnextElementSiblingプロパティを使用します。

<input type="button" value="get next sibling value" onclick="console.log(this.nextElementSibling.value)">
<input type="text" value="txt 1">

nextElementSiblingプロパティは、親の子リストで指定された要素の直後の要素を返します。指定された要素がリストの最後の要素である場合はnullを返します。

IE8のようなブラウザがnextElementSiblingプロパティをサポートしていない場合は、ポリフィルを使用できます（コードの前に配置する必要があります）。

if(!('nextElementSibling' in document.documentElement))
{
    Object.defineProperty(Element.prototype, 'nextElementSibling',
    {
        get: function()
        {
            var e = this.nextSibling;
            while (e && e.nodeType !== 1)
                e = e.nextSibling;

            return e;
        }
    });
}

関連リンク：

1
Bharata