面接質問DOM操作(ブラウザオブジェクトモデル)

トピック

  • Fusionはブラウザのタイプを認識します
  • URLの各部分を分析して分解します

知識のポイント

  • ナビゲーター
  • 画面
  • ロケーション
  • 歴史
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します

W3C標準は、jsの基本(変数、プロトタイプ、スコープ、非同期)に関連するものは何も指定していません。ブラウザーのjs操作ページのAPIとグローバル変数を定義しています。

1、DOM

1.1、DOMエッセンス

DOMは次のように理解できます。ブラウザはブラウザが認識できるモデルを構築でき、jsは取得したHTMLコードで動作できます。

###### 1.2、DOMノードの操作


var div1 = document.getElementById('div1');  // 元素
var div2 = document.getElementsByTagName('div2');  //集合
var div3 = document.getElementsByClassName('div3');  //集合
var div4 = document.querySelectorAll('div4');  //集合

1.3、DOM構造体の操作


var div1 = document.getElementById('div1');
// 新增节点
var p1 = document.creatrElement('p');
p1.innerHTML = 'this is p1';
div1.appendChild(p1);  // 增加新创建的元素  
// 移动已有节点
var p2 = document.getElementById('p2');
div1.appendChild(p2);
// 获取父节点
var parent = div1.parentElement;
// 获取子节点
var childs = div1.childNodes;
// 删除节点
div1.removeChild(childs[0])

1.4、DOM属性(改善予定)

属性とプロパティの違いは何ですか?

属性はhtmlタグ属性の変更であり、
プロパティはjsオブジェクト属性の変更です。

2、良い

2.1、ナビゲーター

ナビゲーターオブジェクト
ナビゲーターオブジェクトには、ブラウザーに関する情報が含まれています。
注:ナビゲーターオブジェクトに適用される公開標準はありませんが、すべてのブラウザーがこのオブジェクトをサポートしています。

ナビゲーターオブジェクトコレクション
セットする 説明
プラグイン[] ドキュメント内のすべての埋め込みオブジェクトへの参照を返します。
コレクションはプラグインオブジェクトの配列であり、その要素はブラウザがインストールしたプラグインを表します。Plug-inオブジェクトは、サポートするMIMEタイプのリストなど、プラグインに関する情報を提供します。
plugins []配列はIE4によって定義されていますが、IE 4はプラグインとプラグインオブジェクトをサポートしていないため、IE4では常に空です。
ナビゲーターオブジェクトのプロパティ
属性 説明
appCodeName ブラウザのコードネームを返します。
appCodeName ブラウザのコードネームを返します。
appMinorVersion ブラウザのマイナーバージョンに戻ります。
appName ブラウザの名前を返します。
appVersion ブラウザのプラットフォームとバージョン情報を返します。
browserLanguage 現在のブラウザの言語を返します。
cookieEnabled ブラウザでCookieが有効になっているかどうかを示すブール値を返します。
cpuClass ブラウザシステムのCPUレベルを返します。
オンライン システムがオフラインモードであるかどうかを示すブール値を返します。
プラットホーム ブラウザが実行されているオペレーティングシステムプラットフォームを返します。
systemLanguage OSが使用するデフォルトの言語を返します。
ユーザーエージェント クライアントからサーバーに送信されたユーザーエージェントヘッダーの値を返します。
userLanguage OSの自然言語設定を返します。
2.2、画面
ナビゲーターオブジェクトメソッド
方法 説明
javaEnabled() ブラウザでJavaが有効かどうかを指定します。
taintEnabled() ブラウザがデータ汚染を有効にするかどうかを指定します。

ナビゲーターオブジェクトの説明
ナビゲーターオブジェクトには、使用されているブラウザーを説明する属性が含まれています。これらの属性は、プラットフォーム固有の構成に使用できます。

このオブジェクトの名前は明らかにNetscapeのナビゲーターブラウザですが、JavaScriptを実装する他のブラウザもこのオブジェクトをサポートしています。

Navigatorオブジェクトのインスタンスは一意であり、Windowオブジェクトのnavigatorプロパティを使用して参照できます。

2.3、場所

Locationオブジェクト
Locationオブジェクト
Locationオブジェクトには、現在のURLに関する情報が含まれています。
LocationオブジェクトはWindowオブジェクトの一部であり、window.locationプロパティを介してアクセスできます。

ロケーションオブジェクトのプロパティ
属性 説明
ハッシュ ポンド記号(#)で始まるURL(アンカー)を設定または返します。
ホスト 現在のURLのホスト名とポート番号を設定または返します。
ホスト名 現在のURLのホスト名を設定または返します。
href 完全なURLを設定または返します。
パス名 現在のURLのパス部分を設定または返します。
現在のURLのポート番号を設定または返します。
プロトコル 現在のURLのプロトコルを設定または返します。
探す 疑問符(?)から始まるURL(クエリ部分)を設定または返します。
ロケーションオブジェクトメソッド
属性 説明
割当() 新しいドキュメントをロードします。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。

除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。

除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。

2.4、history
History 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

Historyオブジェクトはwindowオブジェクトの一部であり、window.historyプロパティからアクセスできます。

注:Historyオブジェクトに適用される公開標準はありませんが、すべてのブラウザーがこのオブジェクトをサポートしています。

履歴オブジェクトのプロパティ
属性 説明
長さ ブラウザの履歴リストにあるURLの数を返します。
履歴オブジェクトメソッド
方法 説明
バック() 履歴リストに前のURLをロードします。
forward() 履歴リストの次のURLをロードします。
go() 履歴リストの特定のページをロードします。
履歴オブジェクトの説明

Historyオブジェクトは元々、ウィンドウの閲覧履歴を表すために設計されました。ただし、プライバシー上の理由から、Historyオブジェクトでは、スクリプトが既にアクセスされた実際のURLにアクセスすることはできなくなりました。使用され続ける関数は、back()、forward()、およびgo()メソッドのみです。

次のコード行は、戻るボタンをクリックするのと同じ操作を実行します。

history.back()

次のコード行は、戻るボタンを2回クリックするのと同じ操作を実行します。

history.go(-2)

おすすめ

転載: blog.csdn.net/WLIULIANBO/article/details/115044405