ウィンドウ
ウィンドウオブジェクトは、グローバルスコープとして機能するだけでなく、ブラウザウィンドウを表します。
ウィンドウオブジェクトには、内側幅と内側のプロパティがあり、ブラウザウィンドウの内側の幅と高さを取得できます。内部幅と高さは、メニューバー、ツールバー、ボーダーなどのプレースホルダー要素を削除した後にWebページを表示するために使用されるネット幅と高さを指します。また、ブラウザウィンドウの幅と高さ全体を取得できる外側幅と外側の属性もあります。
補充：
Webページの可視領域幅：document.body.clientWidth Webページの可視領域の高さ：document.body.clientheight Webページの可視領域幅：document.body.body.offsetwidth（エッジとスクロールバーを含む）Webページdocument.body.scrollwidth Webページのフルテキストの高さ：document.body.scrollheightが展開されているWebページの高さ：document.body.scrolltopまたはjquery（document）.scrolltop（）展開されているWebページの左側：document.body.scrollleft window.screen.heights画面解像度の幅：window.screen.width画面利用可能なワークスペースの高さ：window.screen.availheight画面利用可能なワークスペース幅：window.screen.availwidth画面色の桁：window.screen.colordeph $（window）.height（）ブラウザウィンドウの幅：$（window）.width（）
特別1：document.body.scrolltopのソリューションは常に0 var scrollposです。 if（typeof windof.pageyoffset！= 'undefined'）{scrollpos = window.pageyoffset; } else if（typeof document.compatmode！= 'undefined' && document.compatmode！= 'backcompat'）{scrollpos = document.documentelement.scrolltop; } else if（typeof document.body！= 'undefined'）{scrollpos = document.body.scrolltop; } alert（scrollpos）;スペシャル2：Webページの全文幅： "+ document.body.scrollwidth; Webページのフルテキストの高さ："+ document.body.scrollheight;上記の関数は時々取得できないため、次の方法を使用してください。 var xscroll、yscroll; if（window.innerheight && window.scrollmaxy）{xscroll = document.body.scrollwidth; yscroll = window.innerheight + window.scrollmaxy; } else if（document.body.scrollheight> document.body.offseTheight）{// Explorer Mac xscroll = document.body.scrollwidth; yscroll = document.body.scrollheight; } else {// Explorer Mac ... Explorer 6 Strict、Mozilla、Safari XScroll = document.body.OffsetWidthでも動作します。 yscroll = document.body.offsetheight; }ナビゲーター
ナビゲーターオブジェクトは、ブラウザの情報を表します。最も一般的に使用されるプロパティには次のものがあります。
•navigator.appname：ブラウザ名。
•Navigator.Appversion：ブラウザバージョン。
•Navigator.Language：ブラウザによって設定された言語。
•navigator.platform：オペレーティングシステムタイプ。
•navigator.useragent：ブラウザによって設定されたユーザーエージェント文字列。
さまざまなブラウザ用のさまざまなコードを記述するために、初心者はブラウザバージョンを判断する場合、次のように使用することを好みます。
var width; if（getieversion（navigator.useragent）<9）{width = document.body.clientwidth;} else {width = window.innerwidth;}しかし、これは判断が不正確である可能性があり、コードを維持することも困難です。正しい方法は、存在しないプロパティにundefined返すというJavaScriptの機能を最大限に活用し、短絡オペレーターを直接使用することです||計算するには：
var width = window.innerwidth || document.body.clientWidth;
画面
画面オブジェクトは、画面の情報を表します。一般的なプロパティは次のとおりです。
•screen.width：画面幅、ピクセル。
•screen.height：画面の高さ、ピクセル。
•screen.colordepth：8、16、24などの色数字の数を返します。
位置
位置オブジェクトは、現在のページのURL情報を表します。たとえば、完全なURL：
http://www.example.com:8080/path/index.html?a=1&b=2#top
location.hrefを使用して取得できます。 URLの各部分の値を取得するには、次のように書くことができます。
location.protocol; // 'http'location.host; // 'www.example.com' location.port; // '8080'location.pathname; // '/path/index.html'location.search; // '？a = 1＆b = 2'location.hash; //「トップ」
新しいページをロードするには、location.assign（）を呼び出すことができます。現在のページをリロードしたい場合は、location.reload（）メソッドを呼び出すと非常に便利です。
書類
ドキュメントオブジェクトは現在のページを表します。 HTMLはDOMの形のブラウザ内のツリー構造として表されるため、ドキュメントオブジェクトはDOMツリー全体のルートノードです。
ドキュメントのタイトル属性は、HTMLドキュメントの<title> xxx </title>から読み取られますが、動的に変更できます。
ドキュメントオブジェクトには、現在のページのCookieを取得できるCookie属性もあります。
Cookieは、サーバーから送信されたキー価値識別子です。 HTTPプロトコルはステートレスであるため、サーバーはユーザーの要求を区別でき、Cookieによって区別できます。ユーザーが正常にログインすると、サーバーはユーザー= abc123xyz（暗号化された文字列）などのクッキーをブラウザーに送信します。その後、ブラウザがWebサイトにアクセスすると、このCookieがリクエストヘッダーに添付され、サーバーはCookieに基づいてユーザーを区別できます。
Cookieは、表示されるページの言語など、Webサイトのいくつかの設定も保存することもできます。
JavaScriptは、document.cookieを介して現在のページのCookieを読むことができます。
document.cookie; // 'v = 123;覚えている= true;好み= Zh '
JavaScriptはページ上のCookieを読み取ることができ、ユーザーのログイン情報も通常Cookieに存在するため、これは大きなセキュリティリスクを生み出します。これは、サードパーティのJavaScriptコードをHTMLページに導入することが許可されているためです。
<！ - 現在のページはwwwexample.comにあります - > <html> <head> <スクリプトsrc = "http://www.foo.com/jquery.js"> </script> </html> </html> </html>
導入されたサードパーティのJavaScriptに悪意のあるコードが導入された場合、www.foo.comのWebサイトはwww.example.com Webサイトのユーザーログイン情報を直接取得します。
この問題を解決するために、サーバーはCookieを設定するときにhttponlyを使用できます。 httponlyを設定するCookieは、JavaScriptによって読み取られません。この動作はブラウザによって実装されており、主流のブラウザはHTTPonlyオプションをサポートしています。セキュリティを確保するために、サーバーは常にCookieを設定するときにhttponlyを使用することを主張する必要があります。
document.write（）は、新しいコンテンツをドキュメントに出力するだけです
ドキュメントがロードされた後にdocument.writeが実行された場合、HTMLページ全体が上書きされます。
参照：http：//www.w3school.com.cn/tiy/t.asp?f=js_write_over
dom |書類
// ID 'test'を使用してノードを返します：var test = document.getElementById（ 'test'）; //ノードテストですべての直接子ノードを取得：var cs = test.children; var first = test.firstelementchild;
2番目の方法はquerySelector()およびquerySelectorAll()使用することです。セレクターの構文を理解し、次に使用条件を理解してノードを取得する必要があります。これはより便利です。
// QuerySelectorを介してID Q1でノードを取得します：var q1 = document.queryselector（ '＃q1'）; // queryselectorallを介して条件を満たすq1ノードですべてのノードを取得します：var ps = q1.queryselectorall（ 'div.highlighted> p'）;
厳密に言えば、ここのDOMノードは要素を指しますが、DOMノードは実際にはノードです。 HTMLでは、ノードには多くの種類の要素、コメント、CDATA_Sectionなど、ルートノードドキュメントタイプが含まれています。ただし、ほとんどの場合、要素、つまりページ構造を実際に制御し、他のタイプのノードを無視するノードのみを気にかけます。ルートノードドキュメントは、グローバル変数ドキュメントに自動的にバインドされています。
DOMを変更します
CSSの変更も一般的な操作です。 DOMノードのスタイル属性はすべてのCSSに対応し、直接取得または設定できます。 CSSはFont-Sizeのような名前を許可するため、JavaScriptの有効なプロパティ名ではないため、JavaScriptのラクダスタイルの名前に書き換える必要があります。
// <p id = "p-id"> ... </p> var p = document.getElementbyId（ 'p-id'）; // set css：p.style.color = '＃ff0000'; p.style.fontsize = '20px'; p.style.paddingtop = '2em';
domを挿入します
新しいノードを挿入するには、2つの方法があります。 1つは、appendChildを使用して、親ノードの最後の子ノードに子ノードを追加することです。例えば：
<！ - HTML構造 - > <p id = "js"> javascript </p> <div id = "list"> <p id = "scheme">スキーム</p> </div>
<p id="js">JavaScript</p> <div id="list">の最後の項目に追加します。
var js = document.getElementById（ 'js'）、list = document.getElementById（ 'list'）; list.appendchild（js）;
今、HTML構造は次のようになります：
<！ - html structure-> <div id = "list"> <p id = "scheme">スキーム</p> <p id = "js"> javascript </p> </div>
挿入したjsノードは現在のドキュメントツリーに既に存在しているため、このノードは最初に元の場所から削除され、次に新しい場所に挿入されます。
多くの場合、ゼロから新しいノードを作成し、指定された場所に挿入します。
haskell = document.createelement（ 'p'）;
ノードを動的に作成してからDOMツリーに追加すると、多くの機能を実現できます。たとえば、次のコードはA <style>ノードを動的に作成し、 <head>ノードの最後に追加するため、ドキュメントに新しいCSS定義を動的に追加します。
var d = document.createelement（ 'style'）; d.setattribute（ 'type'、 'text/css'）; d.innerhtml = 'p {color：red}'; document.getElementsBytagname（ 'head'）[0] .AppendChild（d）;前に挿入します
特定の場所に子ノードを挿入する場合はどうなりますか？ parentElement.intertbefore（newElement、referenceElement）を使用できます。また、子ノードはリファレンスエレメントの前に挿入されます。
多くの場合、親ノードのすべての子供をループする必要があります。これは、子供属性を反復することで実装できます。
var i、c、list = document.getelementbyid（ 'list'）; // i番目の子ノードを取得}
DOMを削除します
ノードを削除するには、最初にノード自体とその親ノードを取得し、次に親ノードのRemoveChildを呼び出して自体を削除する必要があります。
//ノードを削除する取得：var self = document.getElementbyId（ 'to-be-removed'）; //親ノードを取得：var parent = self.parentelement; // delete：var removed = parent.removechild（self）;削除=== self; // 真実
削除されたノードはドキュメントツリーにないが、実際にはまだメモリにあり、いつでも別の場所に追加できることに気付きました。
親ノードの子を通過して削除操作を実行すると、子供の属性は読み取り専用属性であり、子ノードが変更されるとリアルタイムで更新されることに注意してください。したがって、複数のノードを削除する場合、子供の属性が常に変化していることに注意することが重要です。
操作フォーム
JavaScriptを使用してフォームを操作することは、フォーム自体もDOMツリーであるため、動作DOMに似ています。
ただし、フォームの入力ボックス、ドロップダウンボックスなどはユーザー入力を受信できるため、JavaScriptを使用してフォームを操作することで、ユーザーが入力したコンテンツを取得したり、入力ボックスに新しいコンテンツを設定したりできます。
主にHTMLフォームには次の入力コントロールがあります。
•テキストボックス、対応する<入力型= "text">は、テキストの入力に使用されます。
•パスワードボックス、対応する<入力型= "Password">は、パスワードの入力に使用されます。
•ラジオボックス、対応する<入力型= "Radio">は、アイテムを選択するために使用されます。
•チェックボックス、対応する<入力型= "チェックボックス">は、複数のアイテムを選択するために使用されます。
•ドロップダウンボックス、対応する<select>は、アイテムを選択するために使用されます。
•非表示のテキスト、対応する<入力型= "hidden">はユーザーには見えませんが、フォームが送信されると非表示のテキストがサーバーに送信されます。
値を取得します
<inupt>ノードへの参照を取得した場合、直接値を呼び出して、対応するユーザー入力値を取得できます。
// <入力タイプ= "text" id = "email"> var input = document.getElementById（ 'email'）; input.value; //「ユーザーが入力した値」
この方法は、 text 、 password 、 hidden selectに適用できます。ただし、ラジオとチェックボックスの場合、 value属性は常にHTMLプリセット値を返します。実際に取得する必要があるのは、ユーザーが「 checked 」オプションを持っているかどうかです。
// <ラベル> <入力タイプ= "Radio" name "name =" weekday "id =" monday "value =" 1 ">月曜日<// <ラベル> // <ラベル> <入力型="ラジオ "type =" id "id ="火曜日 "value =" 2 "> var mon = document.getelementbyid（ 'manday'）; var tue = documentelementyid（ 'mon.value;' mon.value; // '1'tue.value; // '2'mon.checked; // trueまたはfalse
値を設定します
値の設定は、値を取得することに似ています。テキスト、パスワード、非表示、選択については、値を直接設定できます。
// <入力タイプ= "text" id = "email"> var input = document.getElementbyId（ 'email'）; input.value = '[email protected]'; //テキストボックスのコンテンツが更新されました
ラジオとチェックボックスの場合、SETはTrueまたはFalseにチェックされます。
HTML5コントロール
HTML5には、多数の標準コントロールが追加されており、一般的に使用されるコントロールには日付、DateTime、Datetime-Local、Colorなどが含まれます。
<入力型= "date" value = "2015-07-01">
<入力型= "DateTime-Local" Value = "2015-07-01T02：03：04">
<input type = "color" value = "＃ff0000">
HTML5をサポートしていないブラウザは、新しいコントロールを認識できず、type = "テキスト"として表示します。 HTML5をサポートするブラウザは、フォーマットされた文字列を取得します。たとえば、type = "date"入力の値は、yyyy-mm-dd形式の有効な日付または空の文字列であることが保証されます。
フォームを送信します
最後に、JavaScriptは2つの方法でフォームの提出を処理できます（次の章でAJAXメソッドを紹介します）。
最初の方法は、<form>要素のsubmit（）メソッドを介してフォームを送信することです。たとえば、<button>イベントをクリックすることに応じて、JavaScriptコードのフォームを送信します。
<form id = "test-form"> <入力タイプ= "text" name = "test"> <button type = "button" onclick = "dosubmitform（）"> ductit </button> </form> <script> function dosubmitform（）{var form = document.getElementbyid（ 'test-form'）; //ここでフォームの入力を変更できます... // form：form.submit（）;} </script>を送信できますこの方法の欠点は、ブラウザの通常の提出を妨害することです。ブラウザは<button type="submit">デフォルトでクリックするとフォームを送信するか、ユーザーが最後の入力ボックスのENTERキーを押します。したがって、2番目の方法は、 <form>自体のonsubmitイベントに応答し、フォームを送信するときに変更を加えることです。
<form id = "test-form" onsubmit = "return checkform（）"> <input type = "text" name = "test"> <button type = "submit"> submit </button> </form> <script> function checkform（）{var form = document.getElementById（ 'test-form'）; //ここでフォームの入力を変更できます... //次のステップまで続行：trueを返します;} </script>ブラウザに送信を継続するように指示するにはreturn true必要であることに注意してください。 return false場合、ブラウザはフォームの送信を続けません。この状況は通常、ユーザーの入力エラーに対応し、ユーザーにエラーメッセージが求められ、フォームが終了します。
<input>をチェックして変更するときは、 <input type="hidden">を完全に使用してデータを渡します。
たとえば、多くのログインフォームでは、ユーザーがユーザー名とパスワードを入力することを望んでいますが、セキュリティ上の理由から、フォームの送信時にPlantextパスワードを送信するのではなく、パスワードのMD5を送信しません。通常のJavaScript開発者は<input>を直接変更します：
<form id = "login-form" method = "post" onsubmit = "return checkform（）"> <入力タイプ= "text" id "username" name = "username"> <input type = "password" password "name =" password "> <buttonタイプ=" submit "> submit </button> </form> <script（ 'var pwd'）; //ユーザーが入力したプレーンテキストをMD5に変更：pwd.value = tomd5（pwd.value）; //次のステップに進みます：trueを返します;} </script>
この方法は問題ないようですが、ユーザーがパスワードを送信すると、パスワードボックスが突然数*から32 *に表示されます（MD5には32文字があるため）。
ユーザーの入力を変更しないようにするには、 <input type="hidden">を使用して実装できます。
<form id = "login-form" method = "post" onsubmit = "return checkform（）"> <入力タイプ= "text" id "username" name = "username"> <inputタイプ= "パスワード" ID = "入力パスワード"> <入力タイプ= "非表示" id "=" md5-password "name" input_pwd = document.getElementById（ 'input-password'）; var md5_pwd = document.getElementById（ 'md5-password'）; //ユーザーが入力したプレーンテキストをMD5に変更：MD5_PWD.VALUE = TOMD5（input_pwd.value）; //次のステップに進みます：trueを返します;} </script>
MD5-PASSWORDのIDを搭載した<inupt>は、名前= "パスワード"であることに注意してください。ユーザーが入力したIDは、名前属性なしの入力パスワードであることに注意してください。名前属性のないデータ<inupt>は送信されません。
操作ファイル
HTMLフォームでは、ファイルをアップロードできる唯一のコントロールは<input type = "file">です。
注：フォームに<input etpe = "file">が含まれている場合、フォームのenctypeをMultiPart/form-dataとして指定する必要があり、メソッドをPOSTとして指定する必要があります。
セキュリティ上の理由から、ブラウザでは、ユーザーのみをクリックして<入力type = "file">をクリックしてローカルファイルを選択します。 javaScriptを使用して値を<input type = "file">に割り当てても効果はありません。ユーザーがファイルをアップロードすることを選択した場合、JavaScriptはファイルへの実際のパスを取得できません。
アップロードするファイル：
通常、アップロードされたファイルはバックエンドサーバーによって処理されます。 JavaScriptは、ユーザーが無効な形式でファイルをアップロードできないようにフォームを送信するときにファイル拡張子を確認できます。
var f = document.getElementById（ 'test-file-upload'）; var filename = f.value; // 'c：/fakepath/test.png'if（！filename ||！（filename.endswith（'。jpg'）|| filename.endswith（'。png '）|| filename.endswith（'。gif '）））{alert（' can Upload image file。 '）; falseを返します;}ファイルAPI
JavaScriptは、ユーザーがアップロードしたファイル、特にファイルコンテンツを読み取ることができないファイルの操作が非常に限られているため、Flashなどのサードパーティのプラグインを使用してオペレーティングファイルを必要とする多くのWebページを実装する必要があります。
HTML5の人気により、新しく追加されたファイルAPIにより、JavaScriptはファイルコンテンツを読み取り、より多くのファイル情報を取得できます。
HTML5のファイルAPIは、ファイル情報を取得してファイルを読み取ることができる2つの主要なオブジェクトを提供します。ファイルとFileReaderです。
次の例は、ユーザーが選択した画像ファイルを読み取り、<div>で画像をプレビューする方法を示しています。
画像プレビュー：
var fileInput = document.getElementById（ 'test-image-file'）、info = document.getElementById（ 'test-file-info'）、preview = document.getElementById（ 'test-image-preview'）; //イベントの変更を聞く：fileInput.addeventListener（ 'change'、function（）{// clear clured magence：preview.style.backgroundimage = ''; //ファイルが選択されているかどうかを確認してください：if（！fileInput.value）{info.innerhtml = 'file selected';} get file file infut： info.innerhtml = 'file：' + file.name + '<br>' + 'サイズ：' + file.size + '<br>' + 'modified：' + file.lastModifiedDate;画像ファイル！ dataurlの形式：reader.readasdataurl（file）;}）;上記のコードは、HTML5のファイルAPIを介してファイルの内容を読み取る方法を示しています。 DataUrlの形式で読み取られたファイルは、データに似た文字列です：image/jpeg; base64、/9j/4aaqsk ...（base64エンコーディング）。多くの場合、画像を設定するために使用されます。サーバー側の処理が必要な場合は、文字列base64の後に文字をサーバーに送信し、base64でデコードして元のファイルのバイナリコンテンツを取得します。
折り返し電話
上記のコードは、シングルスレッド実行モードであるJavaScriptの重要な機能も示しています。 JavaScriptでは、ブラウザのJavaScript実行エンジンは、JavaScriptコードを実行するときに常に単一スレッドモードで実行されます。つまり、JavaScriptコードが同時に1つ以上のスレッドを実行することはいつでも不可能です。
シングルスレッドモードでマルチタスクを処理する方法を尋ねるかもしれません。
JavaScriptでは、上記のコードなど、マルチタスクが実際に非同期に呼び出されます。
reader.readasdataurl（file）;
ファイルの内容を読み取るために、非同期操作が開始されます。それは非同期操作であるため、操作がJavaScriptコードでいつ終了するかはわかりません。したがって、最初にコールバック関数を設定する必要があります。
reader.onload = function（e）{//ファイルが読み取られると、この関数は自動的に呼び出されます：};ファイルの読み取りが完了すると、JavaScriptエンジンが設定したコールバック関数を自動的に呼び出します。コールバック関数が実行されると、ファイルが読み取られているため、コールバック関数内のファイルの内容を安全に取得できます。
上記の記事では、JavaScriptブラウザオブジェクトが私があなたと共有するすべてのコンテンツであることについて簡単に説明しています。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。