JavaScriptの構成の実装（BOMとDOMの詳細な解釈）

それでは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 サイトの他の関連記事を参照してください。