2012-02-09 4 views
4

私はJavaスクリプトを初めて使っています。私はコードを練習しています。私は私のコードを頭のセクションに入れて、次に要素nullを取得し、bodyの中に入れて要素の前に置くとnullになります。それから私は要素を取得します。私はなぜ最初の2つのケースの場合に私がnullになっているのか尋ねたい。ここにここに私のコードいつ、どこにhtmlのjavascriptを入れるのですか

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <script type="text/javascript" src="js/attributes.js"></script> // null 

    </head> 
    <body> 

     <script type="text/javascript" src="js/attributes.js"></script> // null 
     <a id="braingialink" 
      onclick="return showAttributes();" 
      href="http://www.braingia.org" >Steve Suehring's Web Site 
     </a> 

     <script type="text/javascript" src="js/attributes.js"></script> // ok 

</body> 

は私のJavascriptを

var a1 = document.getElementById("braingialink");  //get null in first two cases 
window.alert(a1.getAttribute("href")); 
a1.setAttribute("href", "www.google.com"); 
window.alert(a1.getAttribute("href")); 

function showAttributes() { 

    var e = document.getElementById("braingialink"); 
    var elementList = ""; 

    for (var element in e) { 

     /** 
     * Sometimes, especially when first programming with JavaScript, you might not know what 
     * attributes are available for a given element. But you don’t have to worry about that, because 
     * of a loop that calls the getAttribute() method. 
     */ 
     var attrib = e.getAttribute(element); 
     elementList = elementList + element + ": " + attrib + "\n"; 

    } //end of for() 

    alert(elementList); 

} //end of function showAttributes 

であり、また、要素の後<script type="text/javascript" src="js/attributes.js"></script>

を置くこと、教えてください、私が書くのと同じですスクリプトタグのスクリプト(

<a href="http://www.braingia.org" id="braingialink">Steve Suehring's Web Site</a> 
<script type="text/javascript"> 
    var a1 = document.getElementById("braingialink"); 
    alert(a1.getAttribute("href")); 
    a1.setAttribute("href","http://www.microsoft.com"); 
    alert(a1.getAttribute("href")); 
</script> 

どちらも同じ意味ですか?

おかげ

答えて

6

ブラウザは、上から下に文書を解析し、それは、文書の任意の複数を解析する前にJavaScriptを実行し(インラインスクリプトまたは外部JSファイルを含めるかどうか)<script>ブロックに遭遇した場合。その特定のコードブロックが任意の要素を参照しようとすると、その要素はソース内の要素、すなわち既に解析済みのものにしかアクセスできない。

document.getElementById()メソッドは、指定したIDの要素が見つからない場合はnullを返します。したがって、ソースの下の要素にアクセスするためにこの要素を使用しようとすると、まだ解析されていないため見つかりません。

これに対処するには、2つの最も一般的な慣行がある:それは実行時にすべての要素が解析されてきたということ<body>などの下部にあるスクリプトのすべてを入れて

  1. "onload"ハンドラを作成します。つまり、ドキュメントのロードが完了するとすぐに実行される関数を定義します。これは、<head>のスクリプトブロックから実行できます。と定義されています。すぐにonload関数が実行されますが、その後はすべてが実行され、すべてがロードされた後にが実行されます。

オプション2を行う最も簡単な方法を以下に示します。

window.onload = function() { 
    var x = document.getElementById("x"); 
    // other element manipulation here 
}; 

あなたが途中でいくつかの<script>ブロックを投げると一緒に、同じ文書内の1 2をやって止めるものは何もありませんほとんどの人は、すべてのコードを1つの場所に保管しておくほうが賢明だと感じています。

+0

私は ''を使う時に尋ねたいと思います。これは 'window.onload = someFunction(){...};'と同じですか?私のHTMLに ''という行を使用すると、.jsファイルの単純な関数 'function someFunction(){..}'を書くと同様に、 headセクションのmy .jsファイルと.jsファイルに 'window.onload = someFunction(){...};'と書く。どちらも同じですか? – Basit

+0

ほとんど同じです。 ' htmlの属性として設定されたものは' window.onload = function(){something} 'と似ています。つまり、属性に入れたコードは、それはそのまわりに暗黙の関数を持っています。多くの人々は、JavaScriptをhtmlに混ぜない方が好きです。なぜなら、それは保守的な頭痛になる可能性があるからです。注:html属性で設定されたJavaScriptの前後に引用符を入れたいと思うでしょう。 – nnnnnn

0

ベストは、ページの読み込みとまったくレンダリングを乱さないように、閉鎖体タグの前に、右のだろう!また、Googleでは、たとえばアナリティクスのスニペットやFacebookなどでもお勧めします。

1

DOMがロードされていないため、頭にヌルが表示されています。オブジェクトはその時点では存在しません。この使用:

window.onload = function() { 
    // Your code 
} 

ああをしても、jQueryのhere.ready()機能を見てみましょう。それは後で頭痛を助けるでしょう。

+0

window.onloadを使用すると、スクリプトを実行する前にすべての要素がロードされるのを待つか、ページがロードされているときに実行されますか? – CSharpened

+1

はい、すべてが読み込まれるまで待機します。このページを参照してください:http://makeagreatsite.com/javascript/how-execute-javascript-when-document-ready –

+0

このように、bodyタグの直後または直後にスクリプトを使用する場合は、つまり、HTMLの任意の要素にアクセスする場合は、** Jannis M **の提案のように、閉じたbodyタグの直前にスクリプトを使用することをお勧めします。 – Basit

1

通常、スクリプトブロックをheadタグの内側に配置する必要があります。特殊な理由がある場合は、bodyタグに入力することができます。たとえば、遅いサーバーからのスクリプトであるため、後でスクリプトをロードすることができます。

要素にアクセスできない理由は、ブラウザが要素のコードを解析する前にコードが実行されるため、要素がまだ存在しないためです。

あなたは、ドキュメントがロードされた後にコードを実行するloadイベントを使用します。

window.onload = function() { 

    // here you put the code that needs to access the elements 

} 
0

スクリプトが実行されるため、ブラウザは、まだページをロードしている間、あなたはnullを取得します。ページにはまだすべての要素がレンダリングされていない可能性があるため、nullが返されます。ページのロードが完了したらスクリプトを実行する必要があります。 あなたのスクリプトをHEAD要素に置き、bodyのonloadイベントでそれを呼び出します。

1

ウェブブラウザがどのようにページにリソースを読み込むかを理解する必要があります。 Firefox - > Firebugアドオンネットタブには、リソースのロード方法のタイムラインが表示されます。 jQueryなどを使用している場合は、$(document).ready(function() { .. }のコードを貼り付けてください。ページが完全にロードされていることを確認してください。

また、</body>タグの前にカスタムjs最後のものを含めることをお勧めします。つまり、ページDOMがロードされているはずです。あなたはこの深く理解したい場合は

は、読み取りの有無: http://www.goodreads.com/book/show/6438581-even-faster-web-siteshttp://www.goodreads.com/book/show/1681559.High_Performance_Web_Sites

+0

'$(document).ready(function(){..}'を使うと、要素とその属性も利用可能であるか、または要素のみが利用可能です。 '' (文書).ready(fn) 'を実行すると、** **のすべての属性にアクセスできますか?** **属性のない要素はありますか? – Basit

+0

属性もあります。 –

+0

ありがとうございました:) – Basit

2

あなたは、ドキュメント内のスクリプトの数に制限を置くことができ、およびすることができますhttp://www.w3schools.com/js/http://www.w3schools.com/js/js_whereto.asp

を見ます同時に本文と頭部の両方にスクリプトがあります。 すべての機能をヘッドセクションまたはページの下部に配置するのが一般的です。こうすることで、それらはすべて1か所にあり、ページの内容に干渉しません。

関連する問題