アクセスHTML要素

LocatingNodes.htmlアクセスHTML要素

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "../js/LocatingNodes.js" type="text/javascript"> 
     </script> 
    </head> 
    <body> 
     <h2 style = "color:black" id="cute_text">Click on a button to change the color</h2> 
     <form> 
     <input onclick="change_color1()" type="button" value="Change using method 1"> 
     </form> 
    </body> 
</html>

LocatingNodes.js

function change_color1() 
{ 
    alert(document.childNodes[0]); 
    alert(document.childNodes[1]); 
    alert(document.childNodes[1].childNodes[0]); 
    alert(document.childNodes[1].childNodes[1]); 
    alert(document.childNodes[1].childNodes[2]); 
    alert(document.childNodes[1].childNodes[2].childNodes[0]); 
    alert(document.childNodes[1].childNodes[2].childNodes[1]); 
    alert(document.childNodes[1].childNodes[2].childNodes[2]); 
    alert(document.childNodes[1].childNodes[2].childNodes[3]); 
    alert(document.childNodes[1].childNodes[2].childNodes[4]); 
    alert(document.childNodes[1].childNodes[2].childNodes[5]); 
    document.childNodes[1].childNodes[2].childNodes[1].style.color="red"; 
}

Iはプログラム上に実行しようとしました。私は11の警告ウィンドウに取得する出力は以下の通りである：

[object DocumentType], 
[object HTMLhtmlElement], 
[object HTMLHeadElement], 
[object Text], 
[object HTMLBodyElement], 
[object Text], 
[object HTMLHeadingElement], 
[object Text], 
[object HTMLFormElement], 
[object Text], 
undefined

を赤に見出し変更の色した後、私は最後の警告ウィンドウの「OK」をクリックします。私はそれがどのように要素を取り上げているのだろうと思っています。また、身体のタグにアクセスしている間、要素タグを取得しませんでした。誰かが出力がどのように実行されているか説明してもらえますか？また、[object text]がタグ内にあるすべてのタグの後に印刷されているのはなぜですか？

出典

2017-05-13 kanchan

どのように要素を取り上げているのでしょうか。

文書オブジェクトは、そのすべての子ノードがのchildNodesプロパティを介して利用可能な、NodeList interfaceを実装しています。 MDN: Node.childNodesも参照してください。

また、身体のタグにアクセスしているときに要素タグを取得しませんでした。

ない[object HTMLBodyElement]は、OPコード内の5番目の要素である、あなたはここで何を意味するかを確認します。

alert(document.childNodes[1].childNodes[2]);

誰かが、出力が行われている方法を説明していただけますか？

DOMエレメントをアラートに送信すると、のtoStringメソッドが呼び出されます。結果はインプリメンテーションに依存します。他のホストは異なる文字列を返すことがあります。

タグ内にあるすべてのタグの後に[object text]が印刷されるのはなぜですか？

空白はテキストノードとして保存されるため、空白がある場合はどこにでもテキストノードがあります。一部のブラウザでは、完全に空白のテキストノード、またはテキストノードが許可されていないテキストノードが削除されます。他のものはありません（つまり、空白を保存するために異なるホストで異なる結果が得られるかもしれません）。

出典

2017-05-13 08:09:08 RobG

ありがとう@RobG。上記の情報は非常に便利です。タグをトレースしたいのですが、どうすればいいですか？ – kanchan

あなたが言ったように、 "_警告をDOM要素に送信すると、toStringメソッドが呼び出されます。結果は実装に依存し、ホストには表示されます。他の結果も見たい、どうすればいい？結果が実装にどのように依存するのかを意味しますか？コードを変更する必要はありますか？ – kanchan

@ kanchan-あなたが変更できるものは何もありません。彼らが何をしているかを見るために他のホストをテストするか、独自の機能を書くことができます。コンソールでも異なる結果が得られます。 – RobG

答えて

関連する問題