ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript の実行順序の簡単な紹介

JavaScript の実行順序の簡単な紹介

黄舟
黄舟オリジナル
2017-03-14 15:12:431474ブラウズ

これは JavaScript の基本についての記事です。主に、JavaScript の動作メカニズムを理解するために重要な、Web ページが読み込まれた後に JavaScript が実行される順序について説明します。

JavaScript はトップダウンの順序で実行されます。特に指定しない限り、JavaScript コードはページが読み込まれるまで実行されません。たとえば、Web ページには次の HTML コードが含まれています:

<p id="ele">welcome to www.codeceo.com</p>

HTML コードのこの行の前に次の Javascript コードを追加すると:

<script type="text/javascript">
  document.getElementById(&#39;ele&#39;).innerHTML= &#39;welcome to my blog&#39;;
</script>

ページを実行すると、次の エラー メッセージ が表示されます: "document.getElementById(' ele ') は null です。」 その理由は、上記の JavaScript が実行される時点では、ページ上に ID 'ele' を持つ DOM 要素がまだ存在しないためです。

解決策は 2 つあります:

1. HTML コードの後に​​ JavaScript コードを配置します:

<p id="ele">welcome to www.codeceo.com</p>

2. Web ページがロードされるまで待ってから、JavaScript コードを実行します。従来の解決策 (ロード) を使用することもできます。まず HTML 本文を追加し、「488ca4e77a355de09c5fd8c04afa1ea3,」を追加してから、load()関数で上記の JavaScript コードを呼び出します。ここで注目したいのは、それを実現するために jQuery を使用することです:

<script>
$(document).ready(function(){
   document.getElementById(&#39;ele&#39;).innerHTML= &#39;welcome to my blog&#39;;
});
</script>
//当然,既然用到了jQuery,更简单的写法是:
<script>
$(document).ready(function(){
   $(&#39;#ele&#39;).html(&#39;welcome to my blog&#39;); //这里也可用.text()方法
});
</script>

上記の jQuery コードはページ上のどこにでも配置でき、実行前に常にページが読み込まれるまで待機します。

以上がJavaScript の実行順序の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。