2011-01-31 8 views
6

これは簡単な問題ではないかと感じていますが、うんざりしています。私がしようとしているのは、テーブル(またはどこか)のセルをクリックするたびに、各要素のparentNodeを表示し、基本的にDOMツリーを走査するように設定されています。私はelem.parentNodeを使う必要があると考えましたが、私は移動する部分についています。私の助けとなる助産師があれば、大いに感謝します。あなたは本当に、単に、どこでも任意の要素をクリックする場合DOMツリーを走査してparentNodeに関する情報を表示します

答えて

10
var element; //your clicked element 
while(element.parentNode) { 
    //display, log or do what you want with element 
    element = element.parentNode; 
} 
+1

助けてくれてありがとう。しかし、素早い質問ですが、elementの代わりにelement.parentNodeを使用するのはなぜですか? – NinjaCode

+0

DOMの各要素には、 'Document'であるルートノードを除いて' parentNode'があります。したがって、要素が長い間繰り返すのは、要素に 'parentNode'があるからです。 'while'ボディでは、要素の変数に現在の要素' parentNode'を割り当てていますので、 'parentNode'を持たない' Document'に達するまで、それを繰り返し実行することができます。 – singles

3
var tables = document.getElementsByTagName('table'); 
for (var i=0,len=tables.length;i<len;++i){ 
    tables[i].onclick = function(evt){ 
    if (!evt) evt = window.event; 
    var element = evt.target || evt.srcElement; 
    while (element){ 
     console.log(element); 
     element = element.parentNode; 
    } 
    }; 
} 

は:

document.body.onclick = function(evt){ 
    if (!evt) evt = window.event; 
    var element = evt.target || evt.srcElement; 
    while (element){ 
    console.log(element); 
    element = element.parentNode; 
    } 
}; 
+0

私はIEで利用target'ませんでした 'currentTarget''のように、今日までそのイベントの性質を考えて、 。 IEにはいろいろなプロパティのようないとこがあるようだ。洞察に感謝します。 –

+0

+1と良い仕事は10kに達する – qwertymk

+0

'getElementsByTagName'は配列ではないオブジェクトを返すので、' Array.prototype.method.call'や[偽の配列を作成する]必要があります(http://stackoverflow.com/質問/ 4513162/document-getelementsbytagname-return-value)を使用して正しく反復処理します。 – rxgx

関連する問題