JavaScriptは：オンBOMとDOMを操作します

ブラウザの説明書

JavaScriptのの出現のために、ブラウザで実行できるようにすることです、ブラウザはJavaScript開発者が自然に関心のあることが必要です。

現在主流のブラウザので、いくつかのポイント：

IE 6〜11：ほとんどのIEブラウザを持つ国は常にW3C標準偏差をサポートしてきました。開始IE10サポートES6基準から、
クロム：Googleは、Webkitのベースのブラウザを生産し、非常に強力なJavaScriptエンジン--V8を構築しました。アップグレードからのクロムのキープにインストールされたら、そのバージョンを無視していないため、最新バージョンがすでにES6をサポートしています。
サファリ：アップルのMacシステムはOS X 10.7ライオンからのWebkitベースのブラウザが付属していますバージョン6.1が付属していますが、ES6をサポートするために始めた、最新のOS X 10.11エルキャピタンはすでにサファリバージョン9.x、サポートが付属していますES6。
Firefoxの：MozillaのGeckoのコアと、独自のJavaScriptエンジンOdinMonkeyを開発。初期のプレスは、Firefoxをリリースし、Chromeは常に最新の状態に保た、自己アップグレードの実践を学ぶため、最終的にスマート十分でした。
iOSと現在、2つの陣営は、主にJavaScriptを、両方のWebkitコアにより、携帯電話上でまずHTML5ユニバーサル・アクセスの結果は、（Microsoftデスクトップは間違いなくドラッグである）、AppleのSafariやGoogleのChromeを使用しているAndroidモバイルデバイスで標準のサポートも非常に良いですが、最新バージョンでは、ES6をサポートしています。

なオペラのような他のブラウザでは、市場シェアは自動的に無視されるには小さすぎます。

また、このような特定のセキュリティブラウザなど様々な国内のブラウザ、の認識、などと、このような旋風ブラウザは、彼らは単にシェルを行うことをノートでは、コアのコールはIEですが、また、IEおよびWebkitのいわゆる「デュアルコア」参照の両方をサポートデバイス。

JavaScriptサポートと異なるブラウザの違いは主に、いくつかのAPIインタフェースは、AJAX、ファイルインターフェイスとして、同じではありません。ES6規格に関しては、異なるブラウザは、各機能のサポートのために同じではありません。

JavaScriptを書くとき、私たちは完全に異なるブラウザで実行するために可能な限りのJavaScriptコードで、ブラウザでの違いを考慮に入れなければなりません。

ブラウザオブジェクト

JavaScriptのオブジェクトブラウザは、オファーの多くを取得し、それを操作することができます。

窓

ウィンドウオブジェクトはグローバルスコープとして働き、およびブラウザウィンドウを表していないだけ。

innerWidth innerHeightは、ウィンドウオブジェクトおよびプロパティは、内部の幅とブラウザウィンドウの高さを取得してもよいです。これは、ページの高明確な幅を表示するために、要素を占め、メニューバー、ツールバー、ボーダーなどを除去した後の内部の幅と高さを指します。

対応し、かつouterWidthのouterHeightプロパティがあり、ブラウザウィンドウの全体の幅と高さを得ることができます。

// 可以调整浏览器窗口大小试试:
console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);

navigatorオブジェクトは、ブラウザの情報を表し、最も一般的な属性は次のとおりです。

navigator.appName：ブラウザ名;
navigator.appVersion：ブラウザのバージョン。
navigator.language：言語ブラウザの設定。
navigator.platform：オペレーティングシステムのタイプ。
navigator.userAgent：ブラウザの設定User-Agent文字列

console.log('appName = ' + navigator.appName);
console.log('appVersion = ' + navigator.appVersion);
console.log('language = ' + navigator.language);
console.log('platform = ' + navigator.platform);
console.log('userAgent = ' + navigator.userAgent);

JavaScriptを読み込むの値は必ずしも正しくないので、情報ナビゲータは、ユーザによって容易に変更することができることに注意してください。

画面オブジェクトは、情報画面を表し、一般的に使用される属性は次のとおりです。

screen.width：画面の幅（ピクセル単位）。
screen.height：ピクセル単位で画面の高さ。
screen.colorDepthは：8,16,24等のカラービットの数を返します。

console.log('Screen size = ' + screen.width + ' x ' + screen.height);

位置情報オブジェクトは、現在のページのURLを表します。たとえば、完全なURL：

それは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; // 'TOP'

あなたは、現在のページをリロードしたい場合は、コールlocation.reload（）メソッドは、非常に便利です。

ドキュメントオブジェクトは、現在のページを表します。HTML DOMは、ブラウザのツリー構造の形で表されているので、ドキュメントオブジェクトは、全体のDOMツリーのルートです。

title属性は、HTMLドキュメントから文書でxxxの読み取りが、動的に変更することができます。

document.title = '努力学习JavaScript!';

ドキュメントオブジェクトを提供getElementByIdを（）とgetElementsByTagNameの（）は、DOMノードのIDとDOMノード名タグによって得られたグループによって得ることができます！
JavaScriptはdocument.cookieによって現在のページにクッキーを読むことができます：

歴史

履歴オブジェクトは、ブラウザの履歴を保持し、JavaScriptはブラウザの「戻る」や「進む」ボタンをユーザーがクリックすると同等の前方バック履歴オブジェクト（）または（）を呼び出すことができます。

オブジェクトがあるためAJAXページやインタラクティブな、シンプルで、粗コールhistory.back（の広範な使用のため、最新のWebページのために、歴史によって残されたオブジェクトに属している）人々は非常に怒りを感じることがあります。

ログインページでログイン成功時に呼びたいHistory.back新規参入者がWebページを（設計するために始めた）、ログイン前のページに戻るしようとする試み。これは間違ったアプローチです。

いずれにせよ、あなたは、このオブジェクトの履歴を使用しないでください。

JUDGMENT

解析された後のHTML文書には、ブラウザのDOMツリーであるため、HTMLの構造を変更するには、JavaScriptを使ってDOMを操作する必要があります。

常にDOMツリー構造であることを覚えています。DOMノードを操作すると、実際には非常に少ないアクションです。

アップデート：アップデートはHTML DOMノードの更新されたコンテンツに対応するDOMノードを表し、
トラバース：更なる操作のためのDOMノードに子ノードを通過します。
追加：ダイナミックHTMLノードの増加にDOMノード対応に子ノードを追加します。
削除：DOMノードの内容とそれに含まれるすべての子ノードを削除する同等のHTMLからノードを削除します。

DOMノードを操作する前に、我々はこのDOMノードを取得するためのさまざまな方法を必要としています。最も一般的に使用される方法があるdocument.getElementById()とdocument.getElementsByTagName()

IDは一意であるため、それはHTML文書のdocument.getElementById（）一意のDOMノードに直接配置することができるです。document.getElementsByTagName（）とdocument.getElementsByClassName（）は常にDOMノードのセットを返します。正確にDOMを選択するには、親ノードが最初に見つけ、その後、ノードは狭くする始まる親から選択することがあります。

// 返回ID为'test'的节点：
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

DOMを更新

DOMノードを取得した後、我々はそれを更新することができます。

テキスト・ノードは、2つの方法で、直接変更することができます。

一つは、変更することでinnerHTML、プロパティをこのアプローチは非常に強力ですが、唯一のあなたも、直接HTMLフラグメントを通じてDOMのサブツリーに内部ノードを変更することができ、DOMノードのテキストコンテンツを変更することはできません。

// 设置文本为abc:
p.innerHTML = 'ABC';

第二は、修正したり、自動的にエンコードHTML文字列が、設定することができないができるのinnerTextのTextContent特性は、任意のHTMLタグことを保証することです。

// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

DOMへ

我々は特定のDOMノードをDOMノードで新しいDOMを挿入したい得るとき、あなたは何をすべきでしょうか？

DOMノードが空の場合、例えば、

、そして、innerHTMLプロパティを直接使用することは= child あなたは「挿入」新しいDOMノードに相当DOMノードの内容を変更することができます。

DOMノードが空でない場合は、innerHTMLのは、直接、元のすべての子ノードに置き換えられますので、それを行うことはできません。

新しいノードを挿入することができる2つの方法があります。一つは、親ノードの最後の子に子ノードを追加するには、は、appendChildを使用することです。例えば：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

ザ・

JavaScriptを

に追加

最後の項目：

var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);

多くの場合、我々は、ゼロから新しいノードを作成し、その後、指定された場所に挿入されました：

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

動的に作成し、DOMツリーにノードを追加するには、多くの機能を実現することができます。例えば、次のコードは、動的にAを作成し

BOMおよびDOM操作でJavaScriptの研究ノート（4）---