JavaScriptの構成の実装（BOMとDOMの詳細な解釈）-jsチュートリアル-php.cn

それではJavaScriptの実装方法（BOMとDOMの詳しい解釈）についての記事をお届けします。今、それをあなたに共有し、参考として提供します。

完全な JavaScript 実装は、ECMAScript (コア)、BOM (ブラウザオブジェクトモデル)、DOM (ドキュメントオブジェクトモデル) の 3 つの部分で構成される必要があることがわかっています。

BOM:

BOM は、ブラウザー機能にアクセスするための多くのオブジェクトを提供します。これらの機能は Web ページのコンテンツとは何の関係もありません (これらは DOM の問題です)。現在、BOM は W3C によって HTML5 仕様に移行されています。

window オブジェクト:

BOM のコアは、ブラウザのインスタンスを表します。これは、JavaScript を通じてブラウザウィンドウにアクセスするためのインターフェイスと、ECMAScript によって指定されたグローバルオブジェクト (Web ページのオブジェクトで定義されたオブジェクトを意味します) の両方です。、変数と関数は Global オブジェクトとして window を持っているため、paresinInt() などのメソッドにアクセスできます。（ハイトスリーより抜粋）。さらに、Web ページにフレームが含まれている場合、各フレームは独自のウィンドウオブジェクトを持ち、フレームコレクション (インデックス 0、ltr、ttb から始まる) に格納されます。

まず、グローバル実行環境の変数と関数はすべてウィンドウオブジェクトの属性とメソッドです。もちろん、グローバル変数と直接定義されたウィンドウプロパティタイプの間には若干の違いがあります。グローバル変数 (正確には、明示的に宣言されたグローバル変数) は削除できませんが、ウィンドウプロパティは削除できます。さらに、宣言されていない変数にアクセスしようとするとエラーが発生しますが、クエリウィンドウオブジェクトの使用には問題ありません。

では、window の共通のプロパティやメソッドは何でしょうか?

1.name、各ウィンドウオブジェクトには、フレームの名前を含む name 属性があります。通常は、ウィンドウの関係とフレームを理解するために使用されます。

2. ウィンドウ位置メソッド: moveTo (新しい位置の x 座標、新しい位置の y 座標)、moveBy (x を水平に移動、y を垂直に移動)。これら 2 つの方法はフレームワークには適用できません。

3. ウィンドウサイズ属性: innerWidth/Height (ビュー領域のサイズ (境界線の幅を差し引いた)/* IE、Safari、Firefox */)、outerWidth/Height (ブラウザウィンドウのサイズを返します/*IE 、Safari、Firefox */)、Chrome では、inner と external の両方がビュー領域のサイズを返します。

もちろん、resizeTo (新しいウィンドウの幅、新しいウィンドウの高さ)、resizeBy (元の幅より x を増加、元の高さより y を増加) を通じてウィンドウサイズを変更できます。このラブソングの手法はフレーム構造には適用されません。

4.window.open(URL, ウィンドウターゲット, 属性文字列, 新しいページがブラウザ履歴に現在ロードされているページを置き換えるかどうかのブール値) は、特定の URL に移動するか、新しいウィンドウを開くために使用されます。ウィンドウターゲットが指定され、そのウィンドウターゲットが既存のウィンドウまたはフレームの名前である場合、指定された URL は名前が変更されたウィンドウまたはフレームにロードされます。それ以外の場合、開く新しいウィンドウにはターゲットウィンドウという名前が付けられます。もちろん、ウィンドウターゲットに指定できるキーワードには、_self、_parent、_top、_blank があります。

<a href=http://www.jb51.net>click me</a>
  　　<script>
    var link=document.getElementsByTagName("a")[0];
      alert(link.nodeName);   
     window.onload=function(){
      
      link.onclick=function () {
        window.open(link.href,"good","width=400px,height=300px");
        return false;
    
      }  
    }
　　</script

ログイン後にコピー

ここでは特性文字列の具体的な設定については詳しく説明しません。興味がある場合は、ここをクリックしてください

5. js では、シングルスレッド言語として、タイムアウト値を設定できます (コードは次のとおりです)。指定されたイベントの後に実行される) と間隔時間値 (指定された時間ごとにループされる) を使用して、特定の瞬間にコードの実行をスケジュールします。

タイムアウト呼び出し: setTimeout (js コード文字列、ミリ秒時間) シングルスレッド言語として、js タスクキューは一度に 1 つのコードのみを実行できます。設定された時間間隔後にタスクキューが空になると、コード文字列が実行されます。それ以外の場合は、前のコードが実行されるまで待ってから実行します。

var al=setTimeout(function () {
      alert("good");
    },5000);
    alert(al); //2

ログイン後にコピー

ここでは、5 秒後に良好な結果を出力するように匿名関数を呼び出しました。ウィンドウに警告ボックスがポップアップ表示され、2 が表示されます。 setTimeout() 関数が固有の数値 ID を返していることがわかります。この ID を使用してタイムアウト呼び出しをクリアできます。clearTimeout(ID) を使用してクリアできます。

間接呼び出し: setInterval()。setTimeout() と同じパラメータを受け取り、数値 ID も返します。これは、clearTimeout() を使用してクリアできます。

6. システムダイアログメソッド:alert()、confirm()、prompt() など。以前のブログで書きました。ここをクリックしてください。

location オブジェクト

は、BOM 内のオブジェクトではありません。 Location は window オブジェクトの属性であると言われていますが、これは後で説明する DOM の document オブジェクトの属性でもあります。つまり、window.location と document.location は同じオブジェクトを参照します。

Location オブジェクトの属性リスト。これらの属性を変更すると、新しいページがロードされ、履歴に新しいレコードが生成されます。 location.replace() を使用しても、履歴に新しいレコードは生成されません。

portプロトコルsearch

hash	"#contents"	URLにハッシュを返します。""
host	"はありません	サーバー名とポート番号 (利用可能な場合) を返します
hostname	"www.google.com"	ポート番号なしでサーバー名を返します
href 「www.google.com "	現在のページの完全なURLを返します。ディレクトリ名
"8080"	ポート番号を返します。そうでない場合は空の文字列を返します
「http:」	ページで使用されているプロトコルに戻る
"?=javascript"	疑問符で始まるクエリ文字列を返します	navigator オブジェクト: ブラウザーを識別するための事実上の標準。そのプロパティとメソッドは主にブラウザーの種類を検出するために使用されます。残りの履歴オブジェクト (履歴記録の保存) や画面オブジェクト (クライアントの機能を示す) などは、js でのプログラミングには役に立たないため、詳細は説明しません。 ------------------------------------------------ ---------------------------------- DOM: DOM は XML に基づいており、 HTML API 用に拡張された DOM はノードツリーの展開に依存します。まず、ドキュメントノードが各ノードのルートノードであることを明確にする必要があります。ドキュメントノードには、要素 html (ドキュメント要素) という子ノードが 1 つだけあります。ノードタイプ: すべての DOM ノードタイプ (テキストノード、属性ノード、要素ノード) によって実装される DOM1 のインターフェイス。このインターフェイスは、Node タイプとして js に実装されます。 nodeType 属性。すべてのノードが所有します。要素 - 1、属性 - 2、テキスト - 3... nodeName 属性の 12 個の数値で表されます。要素ノードの場合、nodeName の値はラベル名です。 nodeValue 属性、要素ノードの場合、nodeValue の値は null です。ノード関係: 各ノードは childNodes 属性を持ち、NodeList (配列状のオブジェクト) オブジェクトを保存します。各ノードには、親ノードを指すparentNode属性があります。 childNode 内のノードは同じparentNode を持ちます。兄弟ノードには、previousSibling プロパティと nextSibling プロパティを使用してアクセスできます。同時に、childNodes[0]==firstChild, childNodes[childNodes.length-1]==lastChild. 操作ノード:appendChild()により、ノードをNodeListの末尾にプッシュし、新しく追加されたノードを返します。 insertBefore() は、ノードを NodeList の先頭に移動し、新しく追加されたノードを返します。 replaceChild(newChild,targetChild) は、ターゲットノードを置き換えます。元のノードはドキュメント内にありますが、位置がありません。 RemoveChild(tragetChild) はノードを削除し、replaceChild() と同様の効果があります。 cloneChild(boolean)、true は完全なコピー (ノード全体とサブノード) を意味し、false は基本コピーを意味します。 Document タイプ: はドキュメントを表します。 document オブジェクトは HTMLDDocument (Document タイプから継承) のインスタンスであり、HTML ページ全体を表します。同時に、ドキュメントオブジェクトはウィンドウオブジェクトのプロパティでもあるため、グローバルオブジェクトとしてアクセスできます。 document.firstChild==html. document.body==body. document.doctype---> への参照。 document.title--->title document.url--->location.url. 要素の検索: getElementById()、getElementsByTagName()、getElementsByClassName(). ドキュメントの書き込み: write()、writeln( ) 、open()、close() 要素の型: getAttribute()、クラスの場合は、classNameの代わりに「class」を使用します。element.classNameを使用すると、クラスの属性を取得できます。 setAttribute()、属性を設定し、属性が存在する場合はそれを置き換えます。それ以外の場合は、作成します。 removeAttribute()、要素の属性を完全に削除します。 createElement()、新しい要素を作成します。テキストタイプ: createTextNode()、テキストノードを作成します。2 つのテキストノードが隣接する兄弟ノードである場合、2 つのテキストはスペースなしで接続されます。上記は私があなたのためにまとめたものです。関連記事: JavaScriptの基本仕様 JavaScriptの基本的な使い方 p5.js_javascriptで花火の特殊効果を作成するサンプルコードTips

以上がJavaScriptの構成の実装（BOMとDOMの詳細な解釈）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。