2017-09-01 8 views
0

以下のコードでエラーが発生します。エラーは言う。お知らせ下さい。タグ "h2"が見つかるまで、チェーンの上に移動したい。DOM travesal javascriptのエラー

"Uncaught TypeError: Cannot read property 'querySelector' of null"

var z =document.querySelector('input[id="nf-field-448"]'); 
x=z.parentElement; 


     while(!x.querySelector('h2')) 

     {  
      if(x.previousElementSibling !== "null") 

       { 
        x = x.previousElementSibling; 

       } 


      else 
       { 

       x = x.parentElement; 

        } 

     } 

     alert('true'); 
    } 
+0

親H2がなければ、最終的にDOMツリーの一番上に到達し、 'x.previousElementSibling'と' x.parentElement'の両方がnullを返します。 'x.querySelector(...)'を実行しようとすると、エラーがスローされます。 [*最小で完全で検証可能なサンプルを作成する方法*](https://stackoverflow.com/help/mcve)を参照してください。 – RobG

+0

コードがH2の子孫を持つ最初の要素(つまり 'x.querySelector( 'h2')'が真を返す)に行くようですが、最初に見つかったH2で停止しません(つまり、 'x.tagName .toLowerCase()== 'h2'')。 – RobG

答えて

0

あなたは、このようにあなたの関数を書き換える場合、それは助けていますか?

var z = document.querySelector('input[id="nf-field-448"]') 
x = z.parentElement 

while (!x.querySelector('h2')) { 
    x = x.previousElementSibling || x.parentElement 

    if (!x) console.log(` 
    x is undefined 
    - previousElementSibling ${x.previousElementSibling} 
    - parentElement ${x.parentElement} 
    `) 
} 
+0

ですが、コードは常に最上位のH2タグに移動し、直ちに使用可能なH2要素には移動しません。なぜ私に教えてくれますか?下のページでは、https://www.capgemini.com/service/new-ways-to-accelerate-innovation/に3つの送信ボタンがあり、H2要素にあるボタンに対応するタイトルが必要です。私は何をすべきか。 –

+0

あなたはhtmlを正しく変更できないと思いますか? data-ref = 'id_of_your_title'を追加するのは簡単です。 – Mino

+0

また、.article_text項目と$( '。article_text')。find( 'h2')またはarticleText.find( 'h2')の間になるとどうなりますか? – Mino