検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript における BOM と DOM の違いと関連性を比較する

JavaScript における BOM と DOM の違いと関連性を比較する

巴扎黑
巴扎黑オリジナル
2017-08-09 11:18:141330ブラウズ

1.JavaScriptの構成

JavaScriptの実装には、次の3の部分が含まれます:

1) コア(ECMAScript): を説明しますJSの 構文と基本オブジェクト。

2) ドキュメントオブジェクトモデル (DOM): Web コンテンツを処理するためのメソッドとインターフェース

3) ブラウザオブジェクトモデル (BOM): ブラウザとの対話メソッドと

ECMAScriptのインターフェース 拡張知識:

① ECMAScriptは標準であり、JSはその実装にすぎません、他の実装にはAが含まれますアクションスクリプト。

② 「ECMAScriptは、さまざまなタイプのホスト環境にコアスクリプト機能を提供できます...」、つまり、ECMAScriptは、JSのホストなどの特定のホスト環境にバインドされません環境はブラウザ、ASのホスト環境はFlashです。

③ECMAScriptでは、構文、型、ステートメント、キーワード、予約語、演算子、オブジェクトについて説明します。

JavaScript は、ECMAScript、DOM、BOM の 3 つの部分で構成されていることは誰もが知っています。具体的な表現はホスト (ブラウザ) によって異なり、ie と他のブラウザでは大きく異なります。スタイル。

1. DOM は W3C の標準です。[すべてのブラウザが公的に準拠する標準 ] 2 は、各ブラウザのメーカーが使用する標準です。
DOMに基づく国 ブラウザでの実装
;[はブラウザごとに異なる定義があることを示しています、実装方法は異なります]3. ウィンドウ
はBOMです。 jsオブジェクトではなくオブジェクト;

DOM (Document Object Model) は、HTML と XML のアプリケーション プログラミング インターフェイス (API) です。

BOM は主にブラウザのウィンドウとフレームを扱いますが、通常、ブラウザ固有の JavaScript 拡張機能は

BOM の一部とみなされます。これらの拡張機能には以下が含まれます:

新しいブラウザウィンドウをポップアップする

ブラウザウィンドウを移動、閉じる、サイズ変更する

Webを提供する

ブラウザの詳細アンカーオブジェクトを提供する ユーザー画面解像度の詳細を提供する 画面オブジェクト

Cookieの

をサポートする

IE 扩展了 BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象

javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含：window

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

 

 

1.1 DOM, DOCUMENT, BOM, WINDOW 区别

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

これらのタグはオブジェクトとみなされ、各オブジェクトはノードと呼ばれ、DOM 内のすべてのオブジェクトの親クラスとして理解できます。

DOM は何に使用されますか?たとえば、この Web ページのタイトルを JS 経由で変更したい場合は、次のようにするだけです。

document.title = 'how to make love';

この API を使用すると、Web ページをダウンロード済み ブラウザにアクセス後、Webページの内容を変更することができます。

ドキュメント

ブラウザがWebページ（通常はHTML）をダウンロードするとき、このHTMLはドキュメントと呼ばれます（もちろん、これはDOMツリー内のノードでもあります）。上の図からわかるように、ドキュメントは通常、ドキュメントです。 DOM ツリー全体。このドキュメントには、JS で直接アクセスできるタイトル (document.title) や URL (document.URL) などの属性が含まれています。

ブラウザ ウィンドウには複数のドキュメント (iframe を通じて読み込まれたページなど) が存在する場合があり、それぞれがドキュメントです。

JS では、

document.body;document.getElementById('xxx');


BOM

BOM など、ドキュメントを通じてその子ノードにアクセスできます (実際には、どのノードでもアクセスできます)。ブラウザ オブジェクト モデル、JavaScript における BOM と DOM の違いと関連性を比較するブラウザ オブジェクト モデル。


先ほど、DOM はドキュメントを操作するためのインターフェースであると述べましたが、BOM はその名前が示すように、実際には ブラウザの動作を制御するためのインターフェース です。

ブラウザで何ができるの?たとえば、別のページにジャンプしたり、前に進んだり、戻ったりするには、プログラムは画面のサイズなどのパラメータを取得する必要がある場合もあります。

BOM はこれらの問題を解決するために登場したインターフェースです。たとえば、ブラウザーに別のページにジャンプさせたい場合、必要なのは

location.href = "http://www.xxxx.com";


この場所は BOM 内のオブジェクトです。

window

window は、プログラミングの意味での「バックアップ オブジェクト」に加えて、BOM のオブジェクトでもあり、ウィンドウの位置を取得したり、ウィンドウ サイズを決定したり、ダイアログをポップアップしたりするために使用できます。箱などたとえば、現在のウィンドウを閉じたいとします:

window.close();



質問を要約すると、

DOMはドキュメントを操作するためのAPIであり、documentはそのオブジェクトです。ブラウザ、ウィンドウに表示されるAPIのオブジェクトです。

は DOM によって管理されています:

E

エリア (それはあなたが言ったことです ドキュメント。 Web開発者が一生懸命書いてくれました A index.html、CSS、JSを含むフォルダーがサーバーに展開されているので、ブラウザのアドレスバーからURLを入力して、Load this を返すことができますドキュメントをローカルで参照、右クリックしてソースコードを表示するなど。

はBOM:

A

エリア(ブラウザタブページ、アドレスバー)、検索によって管理されます。

B

エリア（ブラウザの右クリックメニュー）

C

エリア（ステータスバー読み込み時のドキュメント） 、httpステータスコードなどを表示)

D

エリア(スクロールバースクロールバー)

BOMはブラウザオブジェクトモデル、DOMは

ドキュメントオブジェクトモデルです、前者はブラウザ自体で動作し、後者はブラウザ内のコンテンツ（コンテナとして見ることができます）で動作します

BOMとDOMの構造関係の概略図

2。ドキュメントと

HTML

ドキュメント)をツリー構造として表示しますが、DOM

では、

HTML

ドキュメントの階層構造がツリー構造として表現されます。 そして、documentオブジェクトを使用してドキュメントを表し、ツリーの各子ノードはHTMLドキュメント内の異なるコンテンツを表します。

ブラウザにロードされたすべての

HTML ドキュメントは Documentt オブジェクトになります 、Document は探索への入り口です DOM、

を使用するドキュメントDocumentオブジェクトにアクセスできます 2.1 DOMについて知るまずは以下のコードを見てください De HTML コードを D OM ノード階層図に組み立てる:

DOM はツリーを作成することでドキュメントを表し、Web コンテンツを処理するためのメソッドとインターフェイスを記述します。これにより、開発者は DOM API を使用してドキュメントのコンテンツと構造を簡単に削除、追加、置換できます。

1) ノードタイプ

DOM

は、ドキュメント内の各コンポーネントがノード(Node

)であることを規定しており、HTML

ドキュメントはノード、

DOM

nodesのコレクションであると言えます。

:

1 があります。

要素ノード (Element

): 上の図では、、、 etc. 要素ノード、つまりラベルです。

2.

Text ノード (Text): の

  • ...

    • JavaScript など、ユーザーに表示されるコンテンツ 、 DOM

    、 CSS およびその他のテキスト。 3. 属性ノード (Attr):要素属性。要素のみが属性を持ちます。例: labelhref="http:/ /www.baidu.com」。

    1) DOM ノードの 3 つの主要な属性 (XML DOM)

    1)nodeName: 要素ノード、属性ノード、テキスト ノードはそれぞれ要素の名前を返します属性の名前と #text の文字列。

    2)nodeType: 要素ノード、属性ノード、およびテキストノードのnodeType値は1、2、ですそれぞれ3. 、

    3)nodeValue: 要素ノード、属性ノード、テキスト ノードの戻り値はそれぞれnull、属性値、テキスト ノードの内容です。

    2.2 DOM共通操作

    Nodeはすべてのノードの親インターフェースであり、次のようにパブリックプロパティとメソッドのセットを定義します:

    JavaScript における BOM と DOM の違いと関連性を比較する1) ノードの取得

    ① 要素ノードの取得: document.getElementById("ID")

    document.getElementByName("name")

    document.getElementsByTagName("p");

    を

    document

    の3つのメソッドを通じて取得します。オブジェクト② 属性ノードの取得: 属性ノードは要素ノードに付加されています。要素ノードの getAttributeNode(attrName) メソッドを通じて属性ノードを取得することも、getAttribute(attrName) を通じて属性値を直接取得することもできます。 )。 (対照的に、ElementインターフェースのsetAttribute(attrName) 、attrValue)メソッド、属性が存在しない場合は要素ノードに直接追加されます)

    ③ テキストノードを取得します: テキストノードは要素ノードの子ノードであり、要素ノード (Elementインターフェース) childnodes()[index] メソッド。

    childNodes //NodeList、すべての子ノードのリスト

    firstChild //Node、childNodes リストの最初のノードを指す

    lastChild //Node、childNodes リストの最後のノードを指す

    parentNode / /Node、親ノードを指します

    previousSibling /Node、/ 前の兄弟ノードを指します: このノードが最初のノードの場合、値は null です

    nextSibling //Node、次の兄弟ノードを指します: ifこのノードは最後のノードです。その場合、値は null

    hasChildNodes()` //ブール値、childNodes に 1 つ以上のノードが含まれる場合、true 値を返します

    JavaScript における BOM と DOM の違いと関連性を比較する2)ノードを変更します

    ① 属性ノードの値を変更する: 属性ノードの nodeValue を通じて属性値を直接変更することも、要素ノードの setAttribute() メソッドを通じて変更することもできます。

    ② テキストノードの値を変更する: テキストノードのnodeValueを介して直接変更します。

    HTML DOMでは、要素のコンテンツを取得および変更する最も簡単な方法は、要素のinnerHTML属性を使用することです(innerText属性はinnerHTMLを返します)

    展開:

    innerText、innerHTML、outerHTML、outerText

    innerText: 表示起始标签和结束标签之间的文本

    innerHTML: 表示元素的所有元素和文本的HTML代码

    如：

    Hello world
    innerText は Hello world、innerHTML は Hello world です

    outerText: 前者との違いは、ターゲット ノード全体が置き換えられ、問題は innerText と同じコンテンツを返すことです

    outerHTML: 前者との違いは、ターゲット ノード全体が置き換えられ、要素自体を含む要素の完全な HTML コードが返されます

    OUTHTML、innerText、innerHTML を理解するための図:

    HTML スタイルを変更します (style) 属性): element.style.color ="red";

    3) ノードの削除

    ① 要素ノードの削除: 要素ノードを削除するにはA、を取得する必要があります Aの親ノードBは、17.1.1のメソッドを通じて、またはのparentNode属性を通じて直接取得できます。 A (推奨)。 BのremoveChild(A)を呼び出して、Aノードを削除します。

    ② 属性ノードの削除: 属性ノードが属する要素ノードのremoveAttribute(attrName)またはremoveAttributeNode(node)により削除できます。

    ③ テキスト ノードをクリアする: 最も簡単で一般的な方法は、テキスト ノードの nameNode 属性を空の文字列に直接設定することです: textNode.nodeValue =""。

    混乱のポイント:

    これはテキストです

    < /span>

    var p = document.getElementById('example');

    p.nodeValue //null、pは要素ノードであるため、nodeValueはnull TP.GetattributeNode ('ID'). NodeValue // 例、ここで

    P

    のID属性の属性ノードを取得するには、NodeValueがその属性値です p.childNodes [0].nodeValue //これはテキストです。

    p

    には 2 つの子ノードが含まれています。挿入されたテキストにはラベルがありませんが、それでもノードです。

    そのタイプはテキスト ノードであり、その

    nodeValue は、改行とインデントを含む、その中に書かれた文字列です

    p.innerHTML//これはテキストの一部です < /span>"

    Here

    innerHTML

    は、

    pに含まれるすべてのノードに含まれるさまざまな値を文字列の形式で返します。

    4）创建和添加节点

    ① 创建节点：通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。

    ② 添加节点：两个重要的方法：appendChild()和insertBefore()，具体见Node接口中的方法。

    扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode)和x.appendChild(newNode)都可以向x后追加一个新的子节点。

    5）替换节点

    主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）

     

     

     

     

    2.3 DOM事件

    DOM同时两种事件模型：冒泡型事件和捕获型事件

    冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发

      

    Click Me

    触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)

     

    捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确

    上面例子触发的顺序是：document、div

    DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

    JavaScript における BOM と DOM の違いと関連性を比較する1）事件处理函数/监听函数

    在JavaScript中：

    var oDiv = document.getElementById("div1");

    oDiv.onclick = function(){ //onclick只能用小写

       alert("Clicked!");

    }

    或者

    var elem =document.getElementById(“id”)

    elem.onmouseover=handleMouseOver  //handleMouseOver  是函数名

    Function handleMouseOve(e){...}

     

    在HTML中：

    //onclick の場合は任意です

    Extension:

    IE イベント ハンドラーattachEvent() と detachEvent()

    IE では、各要素とウィンドウ オブジェクトには、attachEvent() と detachEvent() という 2 つのメソッドがあります。 、これら 2 つのメソッドは、同じ 2 つのパラメーター、イベント ハンドラー名とイベント ハンドラー関数を受け入れます。例:

    [object].attachEvent("name_of_event_handler","function_to_attach")

    [object] .detachEvent("name_of_event_handler") ,"function_to_remove")

    var fnClick = function(){

    alert("Clicked!");

    }

    oDiv.attachEvent("onclick", fnClick) //イベント処理関数を追加します

    oDiv. attachEvent("onclick", fnClickAnother); //複数のイベント処理関数を追加できます

    oDiv.detachEvent("onclick", fnClick); //イベント処理関数を削除します

    イベントハンドラが実行されますグローバルスコープ内なので、これはウィンドウに相当します。

    2) クロスブラウザー イベント ハンドラー

    addHandler() メソッドとremoveHandler()

    addHandler() メソッドは、どちらのメソッドも、アクションの要素、イベント名、そしてイベントハンドラ関数。

    3) イベントタイプ

    マウスイベント: click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove

    キーボードイベント: keydown、keypress、keyup

    HTML イベント: ロード、アンロード、中止、エラー、選択、変更、送信、リセット、サイズ変更、スクロール、フォーカス、ぼかし

    4) イベントハンドラー

    JavaScript コードを実行するプログラムは、イベントが発生するとイベントに応答します。特定のイベント

    に応答して実行されるコードは、イベント ハンドラーと呼ばれます。

    HTML タグでイベント ハンドラーを使用するための構文は次のとおりです:

    イベントはユーザーまたはブラウザ自体 Aたとえば、クリック、マウスアップ、キーダウン、マウスオーバーなど、イベントに応答する関数はイベント ハンドラー (イベント リスナー) と呼ばれます。ハンドラーは onclick

    6)DOM 0レベル イベント ハンドラー

    DOM レベル 0 イベント ハンドラー: イベントのハンドラー属性に関数を割り当てます

    var btn2=document.getElementById('btn2'); btn2 ボタン オブジェクトを取得します

    btn2.onclick // onclick 属性を btn2 に追加し、属性が再びトリガーされる イベントハンドラー

    btn2.onclick=function(){

    } //匿名関数を追加します

    btn2.onclick=null //onclick属性を削除します

    7) DOM 2LEVELイベントハンドラーIE とは異なり、これらのメソッドはイベント ハンドラーの割り当てと削除に使用されます。イベント名、割り当てられる関数、バブリング フェーズ (false) またはキャプチャ フェーズ (true) で使用されるハンドラー関数の 3 つのパラメーターが必要です。 )、デフォルトはバブリングフェーズです false[object].addEventListener("name_of_event",fnhander,bcapture)

    [object].removeEventListener("name_of_event",fnhander,bcapture)

    var fnClick = function(){

    alert("Clicked!");}

    oDiv.addEventListener("onclick", fnClick, false) //イベント処理関数を追加

    oDiv.addEventListener("onclick", fnClickAnother, false); / IEと同様に複数のイベントハンドラを追加できます

    oDiv.removeEventListener("onclick", fnClick, false); //イベントハンドラを削除

    addEventListener()を使用する場合 キャプチャにイベント処理関数を追加した場合イベント処理関数を正しく削除するには、removeEventListener() でキャプチャ フェーズを指定する必要があります

    oDiv.onclick = fnClick;

    oDiv.onclick = fnClickAnother; // 直接割り当てを使用すると、後続のイベント処理関数は前の処理を上書きします。 function

    oDiv.onclick = fnClick;

    oDiv.addEventListener("onclick", fnClickAnother, false); // 順番に呼び出され、上書きされません

    3.ブラウザオブジェクトモデル(BOM)

    BOMコアはwindowであり、windowオブジェクトには二重の役割があり、jsを通じてアクセスされます。 ブラウザ ウィンドウのインターフェイス。Global (グローバル) オブジェクトでもあります。これは、Web ページで定義されているオブジェクト、変数、関数には、その global オブジェクトとして window があることを意味します。


    3.1WindowObject

    Windowオブジェクトは、JavaScript階層の最上位オブジェクトです。

    Window オブジェクトはブラウザのウィンドウまたはフレームを表します。

    Window オブジェクトは、 または が表示されるたびに自動的に作成されます。

    1) オブジェクトプロパティ

    window //ウィンドウ自体、window=window.selfはグローバルプロパティwindowWindowオブジェクトを使用してアクセスできます

    ドキュメントDocument オブジェクトへの読み取り専用の参照をペアにします。 Documentオブジェクトを参照してください。

    history History オブジェクトへの読み取り専用の参照。 Historyオブジェクトをパラメータにしてください。

    location Location ウィンドウまたはフレームのオブジェクト。 Locationオブジェクトを参照してください。

    screen Screen オブジェクトへの読み取り専用の参照。 Screenオブジェクトをパラメータにしてください。

    navigator Navigator オブジェクトへの読み取り専用の参照。 Navigatorオブジェクトをパラメータにしてください。

    defaultStatus ウィンドウのステータス バーのデフォルトのテキストを設定または返します。

    innerheight は、ウィンドウのドキュメント表示領域の高さを返します。

    innerwidth は、ウィンドウのドキュメント表示領域の幅を返します。

    outerheight はウィンドウの外側の高さを返します。

    outerwidth はウィンドウの外側の幅を返します。

    pageXOffset は、ウィンドウ表示領域の左上隅を基準とした現在のページの X 位置を設定または返します。

    pageYOffset は、ウィンドウ表示領域の左上隅を基準とした現在のページの Y 位置を設定または返します。

    name ウィンドウの名前を設定または返します。

    親 親ウィンドウに戻ります。

    top 最上位の祖先ウィンドウに戻ります。

    status は、ウィンドウのステータス バーのテキストを設定します。

    window.location //URLアドレス、この属性を装備すると、新しいページを開くことができます

    2) オブジェクトメソッド

    window.close() //ウィンドウ

    を閉じます。 alert(" message"); //OKボタンのあるシステムメッセージボックスをポップアップし、指定されたテキストを表示します

    window.confirm("よろしいですか?"); //OKボタンとキャンセルボタンを備えたクエリダイアログをポップアップし、ブール値を返します

    window.prompt("What's your name ?", "Default"); //

    ユーザーに情報の入力を求め、ユーザーに表示するテキストとテキスト ボックスのデフォルト値という 2 つのパラメーターを受け入れ、テキスト ボックスの値をテキスト ボックスとして返します。 function value

    window.status //

    ステータスバーのテキストは一時的に変更できます

    window.defaultStatus //

    デフォルトのステータスバー情報は、ユーザーが現在のページを離れる前にテキストを変更できます

    .setTimeout("alert(' xxx')", 1000); //

    2 パラメータ、実行するコードと実行するミリ秒数を受け入れて、指定されたミリ秒数の後に指定されたコードを実行するように設定します。 wait

    window.clearTimeout("ID "); //

    まだ実行されていない一時停止をキャンセルし、それに一時停止IDを渡す

    window.setInterval(function, 1000); /

    指定された期間ごとに指定を無限に繰り返します コードとパラメータは setTimeout()

    window.clearInterval("ID"); //

    時間間隔をキャンセルして間隔を渡します ; IDをそれに

    window.history.go / /

    上と同じ

    window.history.length //

    履歴のページ数を表示できます

    clearInterval()は

    タイムアウトをキャンセルします

    setInterval()によって設定

    。

    clearTimeout() は、setTimeout() メソッドによって設定された timeout をキャンセルします。

    createPopup() は、ポップアップ ウィンドウを作成します。 moveBy() は、現在の座標を基準にして指定されたピクセルだけウィンドウを移動できます。 moveTo() ウィンドウの左上隅を指定された座標に移動します。

    open() 新しいブラウザウィンドウを開くか、名前付きウィンドウを見つけます。 print() は、現在のウィンドウの内容を印刷します。 resizeBy() 指定されたピクセルに従ってウィンドウのサイズを変更します。

    resizeTo() ウィンドウのサイズを指定された幅と高さに変更します。

    scrollBy() は、指定されたピクセル値に従ってコンテンツをスクロールします。

    scrollTo() は、指定された座標までコンテンツをスクロールします。

    setInterval() 指定された周期 (ミリ秒単位) で関数を呼び出すか、式を評価します。

    setTimeout(

    method

    ,

    秒

    )

    指定されたミリ秒数の経過後に関数または計算式を呼び出します。

    timeOutEvent = setTimeout("longPress('" + obj + "')",1500); タイマーはパラメータを渡します 3) メンバーオブジェクト window.eventwindow.document //

    see

    document

    オブジェクトの詳細

    window.history

    window.screenwindow.navigatorWindow.external

    Extension

    ① 文書にフレームが含まれている場合（

    frame

    ）

    または

    iframe タグ) を使用すると、ブラウザーは

    HTML

    ドキュメントの window オブジェクトと、各フレームの追加の window オブジェクトを作成します。 ② window.frames ウィンドウ内のすべての名前付きフレームを返します

    ③parent は親ウィンドウです (ウィンドウがトップレベルのウィンドウの場合、parent==self==top)

    top はトップレベルの親ウィンドウ (一部のウィンドウ)ウィンドウには複数のレイヤーがあります) frameset または iframe)

    self は現在のウィンドウ (windowに相当)

    openえーは使用されていますopen メソッドは現在のウィンドウを開きます そのウィンドウ

    ④メッセージボックスに関連するメソッド: alert(String)、confirm(String)、prompt(String)

    ⑤ 2 つのタイマー: setTimeout(code,latency) と setInterval(code,period)

    注: setTimeout は code を複数回呼び出す場合にのみ実行されます。 codeを再度呼び出すと、setTimeout()はclearInterval()が呼び出されるまでcodeを呼び出し続けます。 3.2historyオブジェクト

    window.history.length //

    閲覧したページ数

    history.back() //閲覧履歴に戻る

    history.forward( ) //閲覧履歴を次へ

    history.go(i) //

    iの位置に移動 //i>0

    進む

    ,i< 0撤退、撤退 ------------------------------------------------------ -------- --------------- ---------------

    3.3画面オブジェクト

    screenオブジェクト: use ユーザーの画面に関する情報を取得するには、

    window.screen

    を使用して参照することもできます window.screen.width //画面幅

    window. screen.height //

    画面の高さ

    window.screen.colorDepth //

    画面の色の深さ

    window.screen.availWidth //

    利用可能な幅

    (の高さを除く) taskbar) window.screen .availHeight //

    利用可能な高さ

    (タスクバーの高さを除く) ------------- ------------------- ------------------------------- --- ------------------

    3.4 外部オブジェクト

    window.external.AddFavorite("

    アドレス

    ",") タイトル" ) //ウェブサイトをお気に入りに追加します

    ------------------------------------------------ ---------------- -------------------

    3.5ナビゲーターオブジェクト

    ナビゲーター`オブジェクト: Web ブラウザに関する多くの情報が含まれており、ブラウザとオペレーティング システムの検出に非常に役立ちます

    window.navigator.appCodeName //ブラウザのコード名

    window.navigator.appName / /ブラウザプログラム名

    window.navigator.appMinorVersion //ブラウザパッチバージョン

    window.navigator.cpuClass //cputypex86

    window.navigator.platform / /オペレーティングシステムの種類 win32

    window.navigator.plugins

    window.navigator.opsProfile

    window.navigator.userProfile

    window.navigator.systemLanguage // Customerシステム言語zh-cn簡体字中国語

    window.navigator.userLanguage //ユーザー言語,同上

    window.navigator.appVersion // ブラウザ版 (システムバージョンを含む)

    window.navigator.userAgent//ユーザーエージェントヘッダーの文字列表現

    window.navigator.onLine //ユーザーはオンラインです

    window.navigator.cookieEnabled // Browse ブラウザはcookie

    window.navigator.mimeTypes

    3.6 DocumentObjectをサポートしていますか？

    1) オブジェクトのプロパティ

    document.body//は、 要素への直接アクセスのサポートを提供します。フレームセットを定義するドキュメントの場合、この属性は最も外側の を参照します。

    document.cookie は、現在のドキュメントに関連するすべての cookie を返します。

    document.title //HTMLdocument.domainのtitle

    タグに相当するドキュメントタイトルを返します。domainは現在のドキュメントのドメイン名を返します。

    document.bgColor //ページの背景色に戻る

    document.fgColor //前景色に戻る(文字色)

    document.linkColor //クリックされていないリンクの色

    document.alinkColor //アクティベーションリンク(このリンクに注目)color

    document.vlinkColor //クリックされたリンクの色

    document.URL // を設定します同じウィンドウで別の Web ページを開く URL 属性

    document.fileCreatedDate //ファイル作成日、読み取り専用属性

    document.fileModifiedDate //ファイル変更日、読み取り専用属性

    document.lastModified ドキュメントが最後に変更された日時を返します。

    document.fileSize //ファイルサイズ、読み取り専用属性

    document.cookie //設定と読み出しcookie

    document.charset //戻り文字セット簡体字中国語:gb2312

    document.URL は、現在のドキュメントの URL を返します。

    document.referrer は、現在のドキュメントをロードしたドキュメントの URL を返します。 TDocument.Stylesheets スタイル テーブルのコレクションに戻ります、

    戻り値 CSSSSTYLESHEET [] Document. Stylesheets [0] .cssrules.paddingtop = "10px" 設定 style 、 style style スタイル ハイフンを削除します名前から

    ,2) 共通オブジェクトメソッド

    document.write() //

    ページにコンテンツを動的に書き込みます

    document.writeln()は

    write()と同等ですただし、各式の後に改行文字が書き込まれる点が異なります。

    document.createElement() //新しいelement

    objectを作成document.getElementById(ID) //指定されたID

    を取得

    の対象the valuedocument.getElementsByName(Name) //指定されたName

    valueのオブジェクトを取得しますgetElementsByTagName() 指定されたタグ名を持つオブジェクトのコレクションを返します。 document.body.appendChild(oTag)

    ————————————————————————————

    3) body-

    body子オブジェクト

    document.body //ドキュメント本文の開始と終了の指定は、body>/body>

    document.body.bgColor //オブジェクトの背後の背景色を設定または取得します

    document.body.link //

    クリックされていないリンクの色

    document.body.alink //

    アクティブ化されたリンク(

    このリンクに注目)Colordocument.body.vlink / /クリックされたリンクの色

    document.body.text //

    文字の色

    document.body.innerText //

    設定body>

    …/body>の間のテキスト document.body.innerHTML //body>

    …/body>HTML間のコードを設定しますdocument.body.topMargin //ページの上マージン document.body. leftMargin //ページの左マージン

    document.body.rightMargin //ページの右マージン

    document.body.bottomMargin //ページの下マージン

    document.body.background / / 背景画像

    document.body.appendChild(oTag) //HTML

    オブジェクトを動的に生成する

    4) 共通オブジェクトイベントdocument.body.onclick=”fアンク( )

    ”//

    マウスポインタでオブジェクトをクリックするとトリガーされます

    document.body.onmouseover=”func()”//マウスポインターがオブジェクトに移動するとトリガーされます

    document.body.onmouseout=”func() ” //マウス ポインターがオブジェクトの外に移動するとトリガーされます

    ————————————————————————

    5) 位置-Location サブオブジェクト

    location オブジェクト: 読み込みウィンドウの URL を表します。これは、window.location

    location.href //完全な現在読み込んでいるページの URL (例: http://www.somewhere.com/pictures/index.htm

    location.portocol //URLで使用されているプロトコル、つまりその部分)ダブルスラッシュの前 (例: http

    location.host //サーバーの名前、例: www.wrox.com

    location.hostname //通常はhostと等しい) 、場合によっては、前述の www

    location.port //URL 宣言されたリクエストのポート。デフォルトでは、ほとんどの URL には、8080

    location などのポート情報がありません。 pathname ///pictures/index など、URLのホスト名以降の部分。 htm

    location.search //からリクエストされたURLの疑問符以降の部分を実行するGET、?param=xxxx

    location.hash などのクエリ文字列とも呼ばれます / /URL に # が含まれている場合は、シンボルの後のコンテンツを返します。 as #anchor1

    location.assign("http:www.baidu.com"); //location.hrefと同様に、新しいアドレスはブラウザの履歴スタックに追加されます

    location.replace("http:www.baidu.com"); //

    assign()と同じですが、新しいアドレスはブラウザの履歴スタックに追加されず、backからアクセスできません と forward

    location.reload(true | false); //

    falseの場合はブラウザキャッシュから再読み込み、tru​​eの場合はサーバーから再読み込みします。デフォルトは falsedocument.location.reload(URL) //新しい Web ページを開きます

    6) 選択-

    選択サブオブジェクト

    document.selection

    7) Forms

    collection

    (ページ内のフォーム)a) コレクションによる参照

    document.forms //は

    formタグの数に対応します document.forms .length //はページ上の

    /formformtags の数に対応します

    document.forms[0] //番目の1/formformタグ

    document.forms[i] //番目のi-1/formform タグ

    document.forms[i].length //th i-1/formform

    document.forms[i].elements[j] / /thのコントロールの数i-1 /formform 中 j-1control

    b)はラベル name 属性 name を通じて

    /formform を直接参照します=」 Myform”>入力名=”myctrl”/>/form

    document.Myform.myctrl //document.フォーム名 . コントロール名

    c)

    フォームのプロパティにアクセス

    document.forms[i].name //

    はフォーム名>に対応property

    document.forms[i].action // //

    はに対応/formform action>attribute

    document.forms[i].encoding //

    は/formform enctype>attribute

    document.forms[i].target //に対応します

    に対応します /formform Target＆gt; all.oDiv.style.display=” //

    レイヤーを表示に設定

    document.all.oDiv.style.display=

    ”

    none”

    //

    レイヤーはhidden に設定しますdocument.getElementId(”

    oDiv

    ”) //はgetElementIddocument.getElementId(”

    oDiv)経由でオブジェクトを参照します「）」。 style="document.getElementId("oDiv"

    ).display="none" /*document.all を意味しますすべてのオブジェクトのコレクション

    documentnlyでは、ieはこの属性をサポートしているため、ブラウザのタイプを決定するためにも使用されます*/....

    HTML DOM

    ノード

    HTML DOM (ドキュメント オブジェクト モデル) では、すべての部分がノードです:

    1.

    ドキュメント自体はドキュメント ノードです​​

    2.

    すべての HTML要素は要素ノードです

    3.

    すべてのHTML属性は属性ノードです​​

    4.HTML

    要素内のテキストはテキストノードです​​

    5.

    コメントはコメントノードです​​

    要素オブジェクト

    で

    HTML DOM では、Element オブジェクトは HTML 要素を表します。

    要素

    オブジェクトは、要素ノード、テキストノード、コメントノードタイプの子ノードを持つことができます。

    NodeList

    オブジェクトは、HTML 要素の子ノードのコレクションなどのノード リストを表します。

    要素は属性を持つこともできます。属性は属性ノードです

    Gets

    document.getElementById(ID) //

    指定されたID値を持つオブジェクトを取得します

    document.getElementsByName(Name) //

    指定されたIDを持つオブジェクトを取得しますName value

    getElementsByTagName() は、指定されたタグ名を持つオブジェクトのコレクションを返します。

    属性とメソッド

    メソッド内のa,bのパラメータは単なる説明のためのものです,他の要素にはa,bが無いという意味ではありませんパラメーターのないメソッド

    Element .add()指定されたクラスを要素に追加します

    element.accessKey 要素のショートカット キーを設定または返します。

    element.appendChild() は、最後の子ノードとして要素に新しい子ノードを追加します。

    element.attributes は要素属性のコレクションを返します。

    element.childNodes は、要素の子ノードの NodeList を返します。

    element.className は、要素の class 属性を設定または返します。

    element.clientHeight は、要素の表示可能な高さを返します。

    element.clientWidth は、要素の表示幅を返します。

    element.cloneNode() クローン要素。

    element.compareDocumentPosition() 2 つの要素のドキュメントの位置を比較します。

    element.contentEditable 要素のテキスト方向を設定または返します。

    element.dir 要素のテキスト方向を設定または返します。

    element.firstChild は要素の最初の子を返します。

    element.getAttribute() は、要素ノードの指定された属性値を返します。

    element.getAttributeNode() は、指定された属性ノードを返します。

    element.getElementsByTagName() は、指定されたタグ名を持つすべての子要素のコレクションを返します。

    element.getFeature() は、指定された機能を実装する API のオブジェクトを返します。

    element.getUserData() は、関連付けられた要素のキーのオブジェクトを返します。

    Element.hidden hidden属性の存在ステータスを取得または設定します

    element.hasAttribute() 要素が指定された属性を持つ場合はtrueを返し、それ以外の場合はfalseを返します。

    element.hasAttributes() は、要素に属性がある場合は true を返し、属性がない場合は false を返します。

    element.hasChildNodes() は、要素に子ノードがある場合は true を返し、それ以外の場合は false を返します。

    element.id は、要素の id を設定または返します。

    element.innerHTML 要素のコンテンツを設定または返します。 🎜

    element.insertBefore(,) 指定された既存の子ノードの前に新しいノードを挿入します。 Aは、b

    element.isContentEditableが要素のコンテンツを設定または返す前に挿入されます。

    element.isDefaultNamespace() は、指定された namespaceURI がデフォルトの場合は tru​​e を返し、それ以外の場合は false を返します。

    element.isEqualNode() は、a要素が現在の要素と等しいかどうかをチェックします。

    element.isSameNode(a) 指定された要素が現在の要素であるかどうかを確認します .

    element.isSupported() 要素が指定された機能をサポートしている場合、trueを返します。

    element.lang 要素の言語コードを設定または返します。

    element.lastChild は、要素の最後の子要素を返します。

    element.namespaceURI は、要素の 名前空間 URI を返します。

    element.nextSibling 現在の要素の後の兄弟要素を返します。

    element.nodeName 要素の名前を返します。

    element.nodeType は要素のノード タイプを返します。

    element.nodeValue は要素の値を設定または返します。

    element.normalize() 要素内の隣接するテキスト ノードをマージし、空のテキスト ノードを削除します。

    element.offsetHeight は要素の高さを返します。

    element.offsetWidth は要素の幅を返します。

    element.offsetLeft は、要素の水平オフセット位置を返します。

    element.offsetParent は要素のオフセットコンテナを返します。

    element.offsetTop は要素の垂直オフセット位置を返します。

    element.ownerDocument は、要素のルート要素 (ドキュメント オブジェクト) を返します。

    element.parentNode は要素の親ノードを返します。

    element.previousSibling 現在の要素の前の兄弟要素を返します

    Element.remove() 要素から指定されたクラスを削除します

    element.removeAttribute() 要素から指定された属性を削除します。

    element.removeAttributeNode() は、指定された属性ノードを削除し、削除されたノードを返します。

    element.removeChild(a) 要素から子ノードを削除します。

    element.replaceChild(a,b) 要素内の子ノードを置換します。

    element.scrollHeight は要素の全体の高さを返します。

    element.scrollLeft は、要素の左端とビューの間の距離を返します。

    element.scrollTop は、要素の上端とビューの間の距離を返します。

    element.scrollWidth は要素の全体の幅を返します。

    element.setAttribute() 指定された属性を指定された値に設定または変更します。

    element.setAttributeNode() 指定された属性ノードを設定または変更します。

    element.setIdAttribute()

    element.setIdAttributeNode()

    element.setUserData() オブジェクトを要素のキーに関連付けます。

    element.style は、要素の style 属性を設定または返します。

    Element.toggle()クラスが存在しない場合は追加するか、存在する場合は削除します

    element.tabIndexは、要素のタブキー制御順序を設定または返します。

    element.tagName は要素のタグ名を返します。

    element.textContent は、ノードとその子孫のテキスト コンテンツを設定または返します。

    element.title は、要素の title 属性を設定または返します。

    element.toString() 要素を文字列に変換します。

    nodelist.item() は、NodeList 内の指定されたインデックスにあるノードを返します。

    nodelist.length は、NodeList 内のノードの数を返します。

    element.addEventListener(event, function, useCapture)

    パラメータ

    説明

    イベント

    必須です。イベント名を指定する文字列。

    注: 接頭辞 "on" は使用しないでください。 たとえば、 "onclick" を使用する代わりに、 "click" , を使用します。

    ヒント: すべての HTML DOM イベントについては、完全な HTML DOM イベントオブジェクト リファレンス マニュアルを参照してください。

    機能

    必須。イベントがトリガーされたときに実行される関数を指定します。

    イベントオブジェクトが最初のパラメータとして関数に渡されるとき。 イベント オブジェクトのタイプは、特定のイベントによって異なります。たとえば、「クリック」 イベントは、MouseEvent(MouseEvent) オブジェクトに属します。

    useCapture

    オプション。イベントがキャプチャフェーズで実行されるかバブリングフェーズで実行されるかを指定するブール値。

    可能な値:

    tru​​e - イベントハンドラーはキャプチャフェーズ中に実行されます

    false - false - デフォルト。イベントハンドラーはバブリングフェーズで実行されます

    contentWindowproperty

    ドキュメントにiframeプロパティがある場合、このプロパティを使用してiframe

    のコンテンツを返すことができます。

    1) テーブル object


    rows コレクションは、テーブル内のすべての行の配列を返します (TableRowオブジェクト)。 ;、 および

    TableRow オブジェクト

    TableR ow オブジェクトはHTMLテーブルの行を表します。

    HTML ドキュメントでは、 タグが出現するたびに、TableRow オブジェクトが作成されます。

    TableRowオブジェクトコレクション

    コレクション

    説明

    IE

    F

    O

    W3C

    セル[]

    行内のすべてのセルを含む配列。

    4

    cells コレクションは、テーブル内のすべての

    		または 要素を返します。

    TableCell オブジェクトは、HTML テーブルセルを表します。

    HTML ドキュメント

    		では、タグが出現するたびに、TableCellオブジェクトが作成されます

    3.8 Eventオブジェクト

    1 ) Event オブジェクトの共通プロパティ

    2) ウィンドウイベントプロパティ

    (青のないものはh 5新しいイベント)

    ウィンドウオブジェクトに対してトリガーされるイベント(アプリ) へ < body> タグ):

    attribute

    onafterprint ドキュメントの印刷後に実行されるスクリプト。

    onbeforeprint ドキュメントの印刷前に実行されるスクリプト。

    onbeforeunload ドキュメントのアンロード前に実行されるスクリプト。

    onerror エラーが発生したときに実行するスクリプト。

    onhaschange ドキュメントが変更されたときに実行されるスクリプト。

    onload ページの読み込みが完了した後にトリガーされます。

    onmessage メッセージがトリガーされたときに実行されるスクリプト。

    呼び出し postMessage () を使用して、メインスレッドにメッセージを送信できます。一部のシナリオでは、ビジネス呼び出し元は位置決めコンポーネント と積極的に通信する必要がある場合があり、 は html5 を渡すことができます。 PostMessage は、位置決めコンポーネント

    との通信をアクティブに開始します。 onoffline ドキュメントがオフラインのときに実行されるスクリプト。

    ononline ドキュメントがオンラインになったときに実行されるスクリプト。

    onpagehide ウィンドウが非表示になっているときに実行されるスクリプト。

    onpageshow ウィンドウが表示されたときに実行されるスクリプト。

    onpopstate ウィンドウ履歴が変更されたときに実行されるスクリプト。

    onredo ドキュメントが取り消し (redo) を実行するときに実行されるスクリプト。

    onresize ブラウザウィンドウのサイズが変更されたときに発生します。

    onstorage Web Storage ゾーンが更新された後に実行するスクリプト。

    onundo ドキュメントが undo を実行するときに実行されるスクリプト。

    onunload ページがダウンロードされると (またはブラウザ ウィンドウが閉じられると) 起動されます。

    3) フォーム イベント

    HTML フォーム内のアクションによってトリガーされるイベント (ほぼすべての HTML 要素に適用されますが、最も一般的には form 要素で使用されます):

    Attribute

    onblur 要素がフォーカスを失ったときに実行されるスクリプト。

    onchange要素の値が変更されたときに実行されるスクリプト。

    oncontextmenu コンテキスト メニューがトリガーされたときに実行されるスクリプト。

    onfocus 要素がフォーカスを失ったときに実行されるスクリプト。

    onformchange フォームが変更されたときに実行されるスクリプト。

    onforminput フォームがユーザー入力を取得したときに実行されるスクリプト。

    oninput 要素がユーザー入力を取得したときに実行されるスクリプト。

    oninvalid 要素が無効な場合に実行されるスクリプト。

    onreset フォームのリセットボタンがクリックされたときに発生します。 HTML5ではサポートされていません。

    onselect 要素内のテキストが選択されたときに発生します。

    onsubmit フォームが送信されたときに発生します。

    4) oninput、onpropertychange、onchangeの使用法

    oninput:

    oninput イベントは、ユーザーが入力するとトリガーされます。

    このイベントは、 または

    Name

    		Description

    		Return

    type

    		イベント名いいね

    mouseover

    		文字列

    target

    		イベントが指す要素

    		HTMLElement