ホームページ > 記事 > ウェブフロントエンド > JavaScriptにおけるDOMとBOMの違いと使い方を完全マスター

JavaScriptにおけるDOMとBOMの違いと使い方を完全マスター

WBOY転載: 2022-04-02 13:03:141900ブラウズ

この記事では、javascript に関する関連知識を提供します。主に DOM と BOM、およびそれらの違いと使用法に関する関連事項を紹介します。一緒に見てみましょう。皆様のお役に立てれば幸いです。ヘルプ。

I. 簡単な説明: DOM と BOM とは何ですか?

記事の冒頭で、一般的に言えば、DOMとは何か、BOMとは何かについて触れておきたいと思います。なぜなら、この記事は最終的に目的とするものだからです。なぜなら、私は JavaScript の基礎をある程度持っている友人ですが、DOM と BOM を理解していない、あるいはそれさえ知らないからです。

ただし、DOM と BOM について説明する前に、JavaScript の構造全体を 示させてください。:

上の図では、JavaScript、ECMAScript、DOM、BOM という 4 つの要素があることがわかります。では、これら 4 つの要素の間にはどのような関係があるのでしょうか?式を使用してそれらの間の関係を要約します。

JavaScript = ECMAscript BOM DOM

それらを

一つずつ比較してみましょう。概要:

ECMAscript:

ECMAScript は、
ECMA International (旧欧州コンピュータ製造者協会) ECMA- によって採用された言語です。 262 標準化されたスクリプトプログラミング言語,JavaScript (略して JS) の標準であり、ブラウザはこの標準を実装することになります。

ECMAscript は、JavaScript がブラウザ上で実行されるスクリプト言語であることがわかっているため、各ブラウザが JavaScript の構文を実行する方法を規定する規則に近いものです。規定はありますが、 ページ上の各要素を操作する方法がまだ不足しています この時点で、次のような DOM が誕生しました。

DOM:

DOM (

ドキュメントオブジェクトモデル、ドキュメントオブジェクトモデル
) は言語に依存しません。 XML、HTML ドキュメントの操作に使用されるアプリケーションプログラミングインターフェイス。 JavaScript の場合: JavaScript で Html
を操作できるようにするために、
JavaScript には独自の DOM プログラミングインターフェイスがあります。 一文要約:
DOM は、JavaScript が HTML 要素にアクセスして操作するための「メソッド」を提供します

(インターフェースという単語を使用しない理由は、一部の友人がそのインターフェイスを見ることになるのではないかということです。これは恐ろしい状況ですが、実際のところ、

の最も正確な説明は、JavaScript のインターフェイスを提供するということです。)##BOM:

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

です。

BOM は、ブラウザの動作を制御するインターフェイス
です。 JavaScript の場合: JavaScript でブラウザの動作を制御できるようにするため、JavaScript には独自の BOM インターフェイス
があります。
一文の要約: BOM は、ブラウザの動作を制御するための「メソッド」を JavaScript に提供します。

最後に、JavaScript の上記 3 つのコンポーネントのうち、

ECMscript は仕様です 、他の 2 つは、それぞれ HTML 要素とブラウザに対応する「メソッド」を提供します ということで、後者の 2 つである DOM と BOM について、

で体系的に説明します。初心者向けなので、

以下の説明はできるだけ簡単に説明します。基礎知識がなくても安心して食べられます! II. DOM とその関連操作まず、DOM の関連知識を 2 つの部分に分けて説明しましょう

：

II.I DOM ツリー

わかりました、DOM ツリーとは何ですか?

DOM を学習した初心者の中には、この言葉に馴染みのない人もいるかもしれませんが、実は DOM ツリーは特別空想的なものではありません。 ##DOM ツリーは、毎日扱うページの HTML 要素で構成されるツリーです:

BOM ツリー

, 各ノードは 2 つの ID を持つことができます: 親ノードの子ノードになることも、他の子ノードの親ノードになることもできます。次のコードを見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_demo</title>
</head>
<body>
    <p>
        <a href="https://blog.csdn.net/qq_52736131">跳探戈的小龙虾</a>
    </p>
</body>
</html>

上記のコード、その DOM ツリー

は次のようになります:

这时候有人要问了，你说这么半天的DOM树，跟操作html元素有关吗？

答案是非常有关，而且只有了解了文档的DOM树结构，才能准确而有效的操作DOM元素，否则会出现各种意料之外的bug。在我们操作一个页面的HTML元素之前，要对整个页面的DOM有一个清晰的绘图，即使在不实实在在绘图，也要在脑中有一个清晰的脉络结构。

II.II DOM的一些常见的操作元素方法

关于JavaScript中DOM的一些常见的操作html元素的方法，我又双叒叕分成几个子部分给大家归类介绍：

获取节点的DOM方法

//1.通过元素的id属性值来获取元素，返回的是一个元素对象
var element = document.getElementById(id_content)

//2.通过元素的name属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByName(name_content)

//3.通过元素的class属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByClassName(class_content)

//4.通过标签名获取元素，返回的是一个元素对象数组
var element_list = document.getElementsByTagName(tagName)

获取/设置元素的属性值的DOM方法

//1.获取元素的属性值，传参自然地是属性名，例如class、id、href
var attr = element.getAttribute(attribute_name)

//2.设置元素的属性值，传参自然地是元素的属性名及要设置的对应的属性值
element.setAttribute(attribute_name,attribute_value)

创建节点(Node)的DOM方法

//1.创建一个html的元素，传参是元素类型，例如p、h1-5、a，下以p为例
var element = document.createElement("p")

//2.创建一个文本节点，传参的是对应的文本内容(注意是文本节点，不是某个html元素)
var text_node = document.createTextNode(text)

//3.创建一个属性节点，传参是对应的属性名
var attr_node = document.createAttribute(attribute_name)
element.setAttributeNode(attr_node)

特别注意第三个，创建属性节点这个方法，要搭配具体的元素，也就是你要先获取某个具体元素element，创建一个属性节点，最后对这个元素添加这个属性节点(setAttributeNode)。

增添节点的DOM方法

//1.向element内部的最后面添加一个节点，传入的参数是节点类型
element.appendChild(Node)

//2.向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数
element.insertBefore(new_Node,existed_Node)

注意，添加节点之前，你要先创建好节点，同时要选好父节点element，第二个方法甚至你还要找好插入位置后面的兄弟节点。

删除节点的DOM方法

//删除element内的某个节点，传参是节点类型参数
element.removeChild(Node)

注意，删除时，要找到对应的父节点element才可以顺利删除。

DOM常见的一些属性

最后是一些常见的DOM属性：

//1.获取当前元素的父节点
var element_father = element.parentNode

//2.获取当前元素的html元素型子节点
var element_son = element.children

//3.获取当前元素的所有类型子节点，包括html元素、文本和属性
var element_son = element.childNodes

//4.获取当前元素的第一个子节点
var element_first = element.firstChild

//5.获取当前元素的前一个同级元素
var element_pre = element.previousSibling

//6.获取当前元素的后一个同级元素
var element_next = element.nextSibling

//7.获取当前元素的所有文本，包括html源码和文本
var element_innerHTML = element.innerHTML

//8.获取当前元素的所有文本，不包含html源码
var element_innerTEXT = element.innerText

其中，第七个的意思是说把元素内的html代码和文本都转成文本，原先的html代码是执行的，转成文本相当于变成了普通的字符串！

III. BOM及其相关操作

III.I BOM总述

下面我们再讲一讲BOM，由于篇幅有限，BOM不做特别细致的讲解(实用性的确也没有DOM那么大)。我们回顾一下开始的时候关于BOM的介绍：

BOM给JavaScript提供用来操作浏览器的若干的"方法"

那么首先我们用一张图把整个BOM的结构给大家梳理一下，与DOM类似，BOM也有一个树状结构：

III.II BOM常见对象的介绍

window对象

从上面这张图上，我们可以看到：

window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。

window对象有以下常见的属性和方法：

##setInterval(expression, ミリ秒)指定された後の式を計算します時間間隔setInterval(function,millis enconds,[arguments]) #setTimeout(expression,milli 秒)タイマーの期限切れ後に式を計算しますsetTimeout(expression,milli 秒,[arguments])タイマーが切れた後の式を計算する関数その中に、alert() 関数があることがわかります。 JavaScript、入力ストリームと出力ストリーム

プロパティ/メソッド	意味
オープナー	現在のウィンドウの親ウィンドウ
length	ウィンドウ内のフレーム数
document	現在ウィンドウに表示されているドキュメントオブジェクト
alert(string)	警告ダイアログボックスを作成し、メッセージを表示します
close()	ウィンドウを閉じる
confirm()	ユーザー確認を必要とするダイアログボックスを作成する
open(url,name,[options])	新しいウィンドウを開いて、新しいウィンドウオブジェクトを返します
prompt(text ,defaultInput)	ユーザーに情報の入力を求めるダイアログボックスを作成します

#指定された時間間隔の後に関数を呼び出す

Everyone

ほとんどの人は、最初のデモとしてalert() 関数のポップアップウィンドウを使用します。したがって、これを見たときは次のように尋ねるかもしれません: その時使用されたalert() 関数に関してはwindowが出てこないようなので、ここのalert()は前に習ったalert()と同じでしょうか

？答えは次のとおりです:

これらの 2 つのalert() は実際には同じ関数 です。window を省略できる理由は、

window のすべてのプロパティとメソッドであるためです。、2 つの表現メソッドを持つことができます

:
(1) window.property/window.method()

(2) 直接プロパティ / 呼び出しmethod()

は、alert() だけではなく、上記のウィンドウのプロパティと関数がすべて確立されており、興味のある友人は自分で試すことができます。

location オブジェクト

location オブジェクトとは何ですか?

location オブジェクトは window オブジェクトのプロパティであり、現在のウィンドウにロードされているドキュメントに関する情報を提供し、いくつかのナビゲーション機能も提供します。

location オブジェクトには、次の共通のプロパティとメソッドがあります:

プロパティ/メソッド##ホスト名href##パス名パス名portポート番号protocolプロトコル部分 searchクエリ文字列reload()現在の URL をリロードしますrepalce() 現在のページを新しい URL に置き換えます

実際、上記の構造図を注意深く観察すると、次のことがわかります:

location オブジェクトは、window オブジェクトの属性であるだけでなく、document オブジェクトの属性でもあります。

##これは次の意味です:

##window.location = location = document.location

##history オブジェクト

history

オブジェクトとは何ですか?

履歴オブジェクトは、ウィンドウオブジェクトの属性です。ユーザーのインターネットアクセスの記録が保存されます。このレコードのタイムスタンプは、ウィンドウが開かれた瞬間から計算されます。

履歴オブジェクトには、次の共通のプロパティとメソッドがあります:

コンテンツ	##host#ホスト名: ポート番号
ホスト名
URL全体

プロパティ/メソッドlength履歴オブジェクト内のレコードの数back ()戻ると同様に、前のブラウザ履歴エントリの URL に移動します。forward()ブラウザの次の URL に移動しますforward と同様の履歴エントリgo(num)ブラウザは履歴オブジェクト内で前方または後方に移動します

説明

navigator オブジェクト

最後に navigator

オブジェクトを紹介します:

navigator オブジェクトは 1 つです。クライアントのブラウザを識別する BOM の window 属性。

#ナビゲーターに関連するいくつかの一般的なプロパティ:

Properties完全なブラウザ名とバージョン情報プラットフォームシステムブラウザが配置されているプラットフォームpluginsブラウザにインストールされているプラグイン情報の配列userAgentブラウザのユーザーエージェント文字列userLanguageオペレーティングシステムのデフォルト言語上記が今回の内容のすべてですが好きな友達は

# #説明	appName

3 回連続で応援してください！

???!
また、当ブログは[
ライジングスタープロジェクト]に参加しておりますので、

???

を応援よろしくお願いします！ [関連する推奨事項: JavaScript ビデオチュートリアル ]

以上がJavaScriptにおけるDOMとBOMの違いと使い方を完全マスターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript ecmascript html String Object xml 字符串接口 Length JS function 对象 dom bom location history href alert bug prompt

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：ノード esmodule モードで commonjs モジュールを呼び出す方法の簡単な分析次の記事：ノード esmodule モードで commonjs モジュールを呼び出す方法の簡単な分析

続きを見る