ホームページ > 記事 > ウェブフロントエンド > JavaScript タイマーと DOM ドキュメントの完全な概要

JavaScript タイマーと DOM ドキュメントの完全な概要

jackloveオリジナル: 2018-05-21 14:33:351539ブラウズ

JavaScript を学習する過程で、タイマーや dom などの多くの問題に遭遇します。この記事では、関連する問題について詳しく説明します。

JavaScriptには、2種類のタイマーがあり、1つはsetTimeout()、もう1つはsetTimeout()です

setTimeout()

setTimeout関数は、何秒後に関数または特定のコード部分を指定するために使用されます。ミリ秒を実装します。タイマー番号を表す整数を返します。これは後でタイマーをキャンセルするために使用できます。
var timerId = setTimeout(func|code, late)

上記のコードでは、setTimeout 関数は 2 つのパラメーターを受け取ります。最初のパラメーター func|code は遅延する関数またはコードの名前で、2 番目のパラメーターは遅延させます。パラメータの遅延は、実行する遅延時間をミリ秒単位で指定します。

エンジンは内部で eval 関数を使用して文字列をコードに変換するため、実行を延期するコードは文字列の形式で setTimeout に入れる必要があることに注意してください。
延期された実行が関数の場合、setTimeoutに関数名を直接入れることができます。一方では eval 関数にはセキュリティ上の懸念があり、他方では JavaScript エンジンによるコードの最適化を容易にするために、通常、setTimeout メソッドは以下に示すように関数名の形式をとります。

function f(){  console.log(2);}setTimeout(f,1000);// 或者setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
clearTimeout()，clearInterval()

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

(function() {  var gid = setInterval(clearAllTimeouts, 0);  function clearAllTimeouts() {    var id = setTimeout(function() {}, 0);    while (id > 0) {      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();```

上記のコードを実行すると、setTimeout 設定は実際には無効になります。 ###setTimeout と setInterval の動作メカニズムは次のとおりです。 1. 指定されたコードをこの実行から移動し、イベントループの次のラウンドまで待機し、指定された時間が到着したかどうかを確認します。 2. 到着した場合は、対応するコードを実行します。到着しない場合は、イベントループの次のラウンドまで待機して再判断します。

これは、今回実行されるコードがすべて実行されるまで、setTimeoutで指定されたコードは実行されないことを意味します。

setTimeout の機能は、指定された時刻までコードの実行を延期することです。つまり、setTimeout(f,0) の場合、コードはすぐには実行されません。 ) は 2 番目のパラメータを 0 に設定します。この関数は、既存のタスク (スクリプトの同期タスクと「タスクキュー」内の既存のイベント) が終了するとすぐに f を実行できるようにします。つまり、setTimeout(f,0) の機能は、指定されたタスクをできるだけ早く実行することです。 #DOM>以前は基本的に js の構文について話していましたが、現在は html と js を組み合わせています。
ドキュメントオブジェクトモデル (DOM) は、HTML および XML ドキュメントのプログラミングインターフェイスです。これは、ドキュメントの構造化された表現 (構造ツリー) を提供し、プログラムが構造ツリーにアクセスしてドキュメントの構造、スタイル、コンテンツを変更できる方法を定義します。

DOM は、プロパティとメソッドを含むノードとオブジェクトの構造化されたグループとしてドキュメントを表す方法を提供します。基本的に、Web ページをスクリプトまたはプログラミング言語に接続します。
![](http://upload-images.jianshu.io/upload_images/961879-30d442b188b865e3.gif?imageMogr2/auto-orient/strip) ページ上で何かを変更するには、JavaScript は HTML 内のすべての情報を取得する必要がありますdocument 要素によるアクセスのエントリポイント。このエントリは、HTML 要素を追加、移動、変更、または削除するためのメソッドおよび属性とともに、すべて DOM を通じて取得されます。 ##Document オブジェクト* ブラウザーに読み込まれる各 HTML ドキュメントは、ドキュメントオブジェクトになります。ドキュメントオブジェクトにはドキュメントの基本情報が含まれており、JavaScript を通じて HTML ページ内のすべての要素にアクセスして変更できます。 ####ドキュメントオブジェクトの一般的に使用される属性ドキュメントオブジェクトには、ドキュメント情報を記述するための多くの属性があります。ここでは、一般的に使用される属性をいくつか紹介します
* ####doctype HTML ドキュメントを記述するとき、最初の文は通常 doctype ステートメントです。ドキュメントオブジェクトを通じて取得できます。そうでない場合は、 null`document.doctype; // 8b05045a5be5764f313ed5b9168a17e6document.doctype.name; // "html"`* ####head、body`document .head;`
`document.body; `
これら 2 つのプロパティを通じてドキュメントのヘッドノードとボディノードをそれぞれ取得する方法
* ####activeElement activeElement プロパティは、現在のドキュメントでフォーカスを受け取った要素を返します。
ユーザーは通常、タブキーを使用してフォーカスを移動し、スペースバーを使用してフォーカスをアクティブにすることができます。たとえば、フォーカスがリンクにある場合、スペースバーを押すとリンクにジャンプします

* ####documentURI, Domain、lastModifieddocumentURI プロパティは現在のドキュメントの URL を返します
domain プロパティはドキュメントのドメイン名を返します
lastModified は現在のドキュメントの最終変更時刻を返します

* location
location プロパティは URL を提供する読み取り専用オブジェクトを返します現在のドキュメントの情報

// 現在の URL が
http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // "http://ユーザー: passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"document.location.host // "www.example.com: 4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"document.location.search / / " ?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"
// 別のURL
documentにジャンプします.location.assign('http://www.google.com')
// サーバーからの再読み込みを優先します
document.location.reload(true)
// ローカルキャッシュ (デフォルト値)
document からの再読み込みを優先します。 location.reload(false)
// 別の URL にジャンプしますが、現在のドキュメントは履歴オブジェクトに保持されません
// つまり、戻るボタンを使用して現在のドキュメントに戻ることはできません
document.location.assign ('http:// /www.google.com')// location オブジェクトを文字列に変換します。これは document.location.href
document.location.toString()```

と同等のオブジェクトが返されますが、 location 属性は読み取り専用ですが、この属性に URL を割り当てることができ、Web ページは指定された URL に自動的にジャンプします。
document.location = 'http://www.example.com';// document.location.href = 'http://www.example.com';と同等;

title,characterSet

title属性 return現在のドキュメントのタイトル、このプロパティは書き込み可能です
characterSet プロパティは、現在のドキュメントのレンダリングに使用される文字セットを返します

readyState

readyState プロパティは、現在のドキュメントの状態を返します、可能な値は 3 つあります
loading: HTML の読み込みコードフェーズ、まだ完了していません解析中
interactive: 外部リソースのロードフェーズ
complete: すべてのロードが完了しました

#######compatMode
compatMode 属性は、ブラウザがドキュメントを処理するモードを返します。可能な値は次のとおりです。
BackCompat: 下位互換性モード、つまりなし DOCTYPE
CSS1Compat: 厳密モード、追加 DOCTYPE

#######cookie
cookie はクライアントに保存されるテキストであり、後ほどクライアントストレージの章で紹介します

innerText

innerText は、要素に含まれるテキストコンテンツを返します。
dc6dce4a544fdca2df29d5ac0ea9906b 45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3< ;/div>
外側の div の innerText の戻り値は「123456」です

innerHTML、outerHTML

innerHTML 属性は innerText と似ていますが、代わりに要素のテキストコンテンツを返すと、要素の HTML 構造も返されます。
e388a4556c0f65e1904146cc1a846bee 123 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 /p>16b28748ea4df4d9c2150843fecfba68
外側の div の innerHTML の戻りコンテンツは「e388a4556c0f65e1904146cc1a846bee12345a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3」です
outerHTML の戻りコンテンツにはそれ自体も含まれます

### ####ドキュメントオブジェクトの共通メソッド

open()、close()
document.openメソッドを使用内容を書き込むためのwriteメソッドの新規ドキュメントを作成します。これは、実際には、現在のドキュメントをクリアしてコンテンツを書き直すことと同じです。 document.close メソッドは、open メソッドによって作成されたドキュメントを閉じるために使用されます。一度閉じられると、write メソッドはコンテンツを書き込むことができなくなります。

write()

document.write メソッドは、現在のドキュメントにコンテンツを書き込むために使用されます。現在のドキュメントが close メソッドで閉じられていない限り、そこに書き込まれたコンテンツは既存のコンテンツに追加されます。

document.open();document.write("hello");document.write("world");document.close();```

1. ページがレンダリングされ、write メソッドが呼び出されると、まず open メソッドを呼び出して現在のドキュメントの内容をすべて消去してから、それを書き込みます。
2. ページのレンダリング中に write メソッドが呼び出された場合、open メソッドは呼び出されません。
close メソッドを呼び出した後は、write メソッドを使用してコンテンツを書き込むことはできなくなりますが、現在のページの他の DOM ノードは引き続きロードされることに注意してください。
#####*いくつかの特別な状況を除いて、document.write メソッドの使用は避けるようにしてください。

この記事では、タイマーに関連する問題について説明します。その他の関連コンテンツについては、PHP 中国語 Web サイトを参照してください。

JavaScript タイマーと DOM ドキュメントの完全な概要

関連記事