ホームページ > 記事 > ウェブフロントエンド > JavaScript の DOM と BOM の概要

JavaScript の DOM と BOM の概要

不言転載: 2018-11-20 14:53:572369ブラウズ

この記事では、JavaScript の DOM と BOM について説明します。必要な方は参考にしてください。

ドキュメントオブジェクトモデル (DOM)

インタビュアーは「ドキュメントオブジェクトモデルとは何か知っていますか?」と尋ねるのが好きです。そこで、今日はそれを 1 つずつ説明します。

##DOM：Document Object Model

Document

中国語訳: ドキュメント。ここでのドキュメントとは、ページを作成するときの XML および HTML ページを指します。これを Web ブラウザにロードすると、DOM がバックグラウンドで静かに生成され、作成した Web ページのドキュメントがドキュメントオブジェクトに変換されます。

オブジェクト

中国語訳: オブジェクト。JS を勉強する学生は、JavaScript の「すべてがオブジェクトである」という文に精通している必要があります。言語の種類は、次の 3 つのタイプに大別できます。

ユーザー定義オブジェクト

```
var obj = {}
```
#)
##組み込みオブジェクト
JavaScript に組み込まれたオブジェクトは、当社が作成する必要はなく、配列、数学、データなど、直接使用できます。
ホストオブジェクト
前回では、環境をホストした後、ホストオブジェクトとは何かを理解したはずです。ここでは、ウィンドウやドキュメントなど、ブラウザによって提供されるオブジェクトについて説明します。
DOM における主な関心事はドキュメントです。ドキュメントオブジェクトの主な機能は、Web ページのコンテンツを処理することです。

Model

中国語翻訳: モデル、この単語を DOM から抽出すると、下の図を見てください ~ 理解しやすいでしょう。たとえば、図に示すように、これは一連のコミュニティ構築モデルです。基本的に、住宅を購入する人は、この一連のモデルに従うだけで理解できます。建設が完了した後のコミュニティの長さはどのようになるか、公共施設はどのくらいあるのか、植生面積はどれくらいか...

DOM もこのようなモデルのようなものですが、それを表します。現在の Web ページがブラウザウィンドウに読み込まれ、JavaScript を使用してそれを操作して読み取ることができます。

モデルを取得したら、そのモデルを理解できるようにする必要もあります (これは、このモデルが何に使用されるかを知る必要があるため理解できます)。モデルを理解するのは、人と話しているようなものです。盲人は、太陽が見えないため、概念がありません。ただし、DOM は読めます。 JavaScript を使用する場合、まずモデルを理解できる必要があります。

DOM はドキュメントを 1 つの主要な枝と無数の枝からなるツリーとして表します。実際、私は個人的には家系図に似ていると考えています。タグ間の関係を説明するとき、並列タグと入れ子のタグを示すために「親」、「子」、「兄弟」などの単語をよく使用するためです。

たとえば、次の図:

具体的なコードは次のとおりです:

<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">

<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>

<p>欢迎观看本次文章，包含以下内容：</p>

<ul>

    <li>ECMAScript</li>

    <li>DOM</li>

    <li>BOM</li>

</ul>
</body>
</html>

抽象化します上記の構造を DOM ツリーに変換します。

JavaScript の DOM と BOM の概要