HTML の外部ファイルと同様、マークアップの構成は、そのスタイル、形式、動作とは別のものです。確かに JavaScript を使用して要素やテキストのスタイルを変更することはできますが、マークアップのレイアウト方法の構成を実際に変更することの方が興味深いです。
マークアップは組織化、フレームワークを提供するだけであることを覚えておいてください。そうすれば成功への道が開けます。さらに少し歩を進めると、ブラウザがどのようにテキスト構成をすべて取得して、非常に興味深いもの、つまりそれぞれを変更、追加、削除できるオブジェクトのセットに変換するかがわかります。
テキスト マークアップの利点
Web ブラウザについて説明する前に、プレーン テキストが HTML の保存に最適な選択肢である理由を検討する価値があります (詳細については、マークアップに関する他のアイデアを参照してください)。メリットとデメリットに関係なく、ページが表示されるたびに HTML がネットワーク経由で Web ブラウザに送信されることを思い出してください (簡潔にするため、キャッシュなどは考慮されていません)。テキストを配信するのにこれ以上効率的な方法はありません。バイナリ オブジェクト、ページのグラフィック表現、再編成されたマークアップ ブロックなど。これらはすべて、プレーン テキスト ファイルよりもネットワーク上で渡すのが困難です。
さらに、ブラウザも栄光をさらに高めます。現在のブラウザでは、ユーザーはテキスト サイズの変更、画像の拡大縮小、ページの CSS または JavaScript (ほとんどの場合) のダウンロードなどが可能ですが、ページのあらゆる種類のグラフィック表現をブラウザに送信することは完全に不可能になっています。ただし、ブラウザーは、ブラウザーがそのタスクを処理することを信頼するのではなく、ブラウザー内のページに任意の処理を適用できるように、生の HTML を必要とします。同様に、CSS と JavaScript および CSS と HTML マークアップを分離するには、簡単に分離できる形式が必要です。繰り返しになりますが、このタスクにはテキスト ファイルが最適な方法です。
最後になりましたが、新しい標準 (HTML 4.01 や XHTML 1.0 および 1.1 など) では、コンテンツ (ページ内のデータ) をプレゼンテーションやスタイル (通常は CSS によって適用される) から分離することが約束されていることを覚えておいてください。プログラマーが HTML を CSS から分離し、ページのさまざまな部分を結合するページの表現をブラウザーに強制的に取得させた場合、これらの標準の利点のほとんどが失われることになります。ブラウザに到着するときにこれらの部分を分離しておくことで、ブラウザはサーバーから HTML を取得する際に前例のない柔軟性を得ることができます。
マークアッププレーン テキスト編集
に関するその他の考え
: 正しいか間違っているか?
プレーン テキストはマークアップの保存には最適ですが、マークアップの編集には適していません。 Web ページのマークアップを操作するには、Macromedia DreamWeaver やより強力な Microsoft® FrontPage® などの IDE を使用するのが一般的です。これらの環境では、特に CSS と JavaScript を使用する場合に、Web ページを作成するためのショートカットやヘルプが提供されることがよくあります。CSS と JavaScript はどちらも実際のページ マークアップ以外のファイルから取得されます。多くの人が依然として古き良きメモ帳や vi を好むことは問題ではありません (私もその 1 人であることを認めます)。いずれにせよ、最終結果はマークアップでいっぱいのテキスト ファイルになります。
Web 上のテキスト: 良いことは
言われていますが、テキストは、Web 上で何千回も送信される HTML や CSS などのドキュメントに最適な媒体です。ブラウザーでテキストを表現するのは難しいと私が言うとき、私は特に、テキストをユーザーが閲覧できる視覚的なグラフィック ページに変換することを指します。これは、ブラウザが実際に Web ブラウザからページを取得する方法とは何の関係もありません。この場合も、テキストが最適な選択です。
テキスト マークアップの欠点
テキスト マークアップには、デザイナーやページ作成者にとって驚くべき利点があるのと同様に、ブラウザにとっては非常に驚くべき欠点もあります。具体的には、ブラウザーがテキスト マークアップをユーザーに視覚的に直接表現することは困難です (詳細については、マークアップに関する他のアイデアを参照してください)。次の一般的なブラウザ タスクを考慮してください。
· 要素のタイプ、クラス、ID、および HTML ドキュメント内の位置に基づいて、CSS スタイル (通常は外部ファイルの複数のスタイル シートから) をマークアップに適用します。
·JavaScript コード (通常は外部ファイルにあります) に基づいて、HTML ドキュメントのさまざまな部分にスタイルと書式設定を適用します。
・JavaScriptコードに基づいてフォームフィールドの値を変更します。
·JavaScriptコードに基づいて、画像の反転や画像の交換などの視覚効果をサポートします。
複雑なのは、これらのタスクのコーディングにあるわけではありません。すべてが非常に簡単です。複雑さは、ブラウザーが要求されたアクションを実際に実装することに起因します。たとえば、マークアップがテキストとして保存されている場合、center-text クラスの p 要素にテキスト (text-align: center) を入力したい場合、これを実現するにはどうすればよいでしょうか。
·テキストにインライン スタイルを追加しますか?
·ブラウザ内の HTML テキストにスタイルを適用し、コンテンツを中央に配置するだけですか?
·スタイルのない HTML を適用し、その後書式設定を適用しますか?
これらの非常に難しい問題が、今日ブラウザを作成する人が非常に少ない理由です。 (ブラウザを作成した人が誰であれ、私の心からの感謝を受け入れてください。)
ページ マークアップを取得するにはテキストが最適な解決策ではありますが、プレーン テキストがブラウザの HTML を保存する良い方法ではないことは疑いの余地がありません。ページの構造を変更する JavaScript の機能を組み込むと、状況はもう少し微妙になります。ブラウザは変更された構造をディスクに書き換えるべきでしょうか?ドキュメントの最新バージョンを維持するにはどうすればよいですか?
確かに、テキストが答えではありません。変更するのは難しく、スタイルや動作を適用するのは難しく、基本的に今日の Web ページの動的な性質からはかけ離れています。
ツリー ビューに頼る
という問題に対する答え(少なくとも今日の Web ブラウザが選択した答え) は、ツリー構造を使用して HTML を表現することです。リスト 1 を参照してください。この記事のマークアップを表す、非常に単純で退屈な HTML ページです。
リスト 1.テキスト マークアップ内の
単純な HTML ページ<html>
<頭>
<title>木、木、どこでも</title>
</head>
<本文>
<h1>木、木、どこにでも</h1>
<p><em>本当に</em>退屈なページへようこそ。</p>
<div>
すぐにまた来てください。
<img src="カムアゲイン.gif" />
</div>
</body>
</html>
ブラウザはページを受け取り、図 1 に示すようにツリー構造に変換します。
この記事を継続的に進めるために、記事を少し簡略化しました。 DOM や XML の専門家は、Web ブラウザのツリー構造でドキュメントのテキストが表現および分解される方法に空白が与える影響を認識しているでしょう。表面的な理解は物事を曖昧にするだけなので、空白の影響を理解したい場合は、それが最善の策です。そうでない場合は、何も考えずに読み続けることをお勧めします。問題が発生したとき、そのときに必要なことがすべてわかります。
実際のツリーの背景は別として、最初に気づくのは、ツリー内のすべてが最も外側の HTML を含む要素である html 要素から始まっているということです。木の比喩を使用すると、これはルート要素と呼ばれます。したがって、これはツリーの最下位レベルですが、ツリーを見て分析するときは、通常、これから始めます。それがうまくいく場合は、木全体を逆さまにすることもできますが、それは木のメタファーを少し拡張します。
ルートから流れる線は、ラベルが付けられたさまざまな部分間の関係を表します。 head 要素と body 要素は HTML ルート要素の子であり、title は head の子であり、テキスト「Trees,trees,everywhere」は title の子です。ブラウザが図 1 のような構造を取得するまで、ツリー全体がこのように編成されます。
追加の用語
ツリーの比喩に合わせて、ヘッドとボディは HTML のブランチと呼ばれます。それらは自分自身の子を持つため、ブランチと呼ばれます。ツリーの最後に到達すると、「木、木、どこでも」や「本当に」などの本文に到達します。これらは、独自の子を持たないため、葉と呼ばれることがよくあります。これらの用語をすべて覚える必要はありません。特定の用語の意味を理解しようとするときは、ツリー構造を想像するだけではるかに簡単です。
オブジェクトの値
基本的な用語をいくつか理解したところで、要素名とテキストを含む小さな四角形に注目してみましょう (図 1)。各四角形はオブジェクトであり、ブラウザーはその四角形内のテキストの問題を解決します。オブジェクトを使用して HTML ドキュメントの各部分を表すことにより、構成の変更、スタイルの適用、JavaScript によるドキュメントへのアクセスの許可などを簡単に行うことができます。
オブジェクト タイプとプロパティ
マーカー 考えられる各タイプには、独自のオブジェクト タイプがあります。たとえば、HTML の要素は Element オブジェクト タイプで表されます。ドキュメント内のテキストは Text タイプで表され、属性は Attribute タイプで表されます。
そのため、Web ブラウザはオブジェクト モデルを使用してドキュメントを表現できるだけでなく (静的テキストを扱う必要がなくなる)、オブジェクト タイプを使用して何かが何であるかを即座に伝えることもできます。図 1 に示すように、HTML ドキュメントは解析されてオブジェクトのコレクションに変換され、山括弧やエスケープ シーケンス (たとえば、< には <、> には > を使用するなど) は問題になりません。これにより、ブラウザーの作業 (少なくとも入力 HTML を解析した後) がはるかに簡単になります。何かが要素なのか属性なのかを判断し、そのタイプのオブジェクトを処理する方法を決定するのは簡単です。
オブジェクトを使用することにより、Web ブラウザはこれらのオブジェクトのプロパティを変更できます。たとえば、各要素オブジェクトには親要素と子要素のリストがあります。したがって、新しい子要素またはテキストを追加すると、その要素の子要素のリストに新しい子要素が追加されるだけです。これらのオブジェクトにはスタイル プロパティもあるため、要素またはテキスト セグメントのスタイルをすばやく変更するのは非常に簡単です。たとえば、JavaScript を使用して div の高さを変更するには、次のようにします。
someDiv.style.height = "300px";
つまり、Web ブラウザーを使用すると、オブジェクトを使用してツリーの外観と構造を非常に簡単に変更できます。プロパティ。これを、ページをテキストとして表現するためにブラウザが内部で実行しなければならない複雑な処理と比較してください。プロパティや構造を変更するたびに、ブラウザは静的ファイルを書き換え、再解析して、画面に再表示する必要があります。オブジェクトを使えば、これらすべてが解決されます。
ここで、いくつかの HTML ドキュメントを展開し、ツリーでアウトラインを描いてみましょう。これは珍しい要求のように思えるかもしれませんが (特にコードが非常に少ないこのような記事では)、これらのツリーを操作できるようにしたい場合は、その構造をよく理解しておく必要があります。
途中で、奇妙なものを発見するかもしれません。たとえば、次のことを考えてみましょう。
属性はどうなるでしょうか?
·要素に分割されたテキスト (em や b など) はどうなりますか?
·適切に構造化されていない HTML (たとえば、終了 p タグが欠落している場合) はどうなりますか?
これらの問題に慣れると、次のセクションをより深く理解できるようになります。
厳密さは時には良いこともあります
先ほど述べた演習を試してみると、マークされたツリー ビューに潜在的な問題が見つかるかもしれません (そうでない場合は、私の言葉を信じてください!)。実際、リスト 1 と図 1 にはいくつかの問題が見つかります。まず、p 要素がどのように分解されるかを見てください。平均的な Web 開発者に「p 要素のテキストの内容は何ですか?」と尋ねると、最も一般的な答えは「本当に退屈な Web ページへようこそ」でしょう。これを図 1 と比較すると、この答えは (論理的ではありますが) 単純に正しくないことがわかります。
実際、p 要素には 3 つの異なる子オブジェクトがあり、そのどれにも「本当に退屈な Web ページへようこそ」という完全なテキストは含まれていません。 「ようこそ」や「退屈な Web ページ」などのテキストの一部は見つかりますが、すべてではありません。これを理解するには、マークアップ内のすべてのものを何らかの型のオブジェクトに変換する必要があることに注意してください。
また、順番は関係ありません！ブラウザが正しいオブジェクトを、HTML で指定した順序とは異なる順序で表示した場合、ユーザーが Web ブラウザにどのように反応するか想像できますか?段落がページ タイトルと記事タイトルの間に挟まれていて、それが自分で文書を整理する方法ではない場合はどうすればよいでしょうか?明らかに、ブラウザは要素とテキストの順序を維持する必要があります。
この例では、p 要素には 3 つの異なる部分があります:
· em 要素の前のテキスト · em 要素自体 · em 要素の後のテキスト
この順序を間違えると、テキストの間違った部分に注目してしまう可能性があります。すべてを整理するために、p 要素にはリスト 1 の HTML に示されている順序で 3 つの子オブジェクトがあります。さらに、キーテキスト「really」は p の子要素ではなく、p の子要素である em の子要素です。
この概念を理解することは非常に重要です。 「本当に」テキストは他の p 要素テキストと一緒に表示される可能性がありますが、それでも em 要素の直接の子です。他の p テキストとは異なる形式を持つことができ、他のテキストとは独立して移動できます。
このことを念頭に置くために、リスト 2 とリスト 3 に HTML を図示して、(テキストが最終的に画面にどのように表示されるかに関係なく) テキストに正しい親要素があることを確認してください。
リスト 2.
巧妙な要素のネストを使用して<html> を
マークアップする
<頭>
<title>これは少し難しいです</title>
</head>
<本文>
<h1><u>細心の注意を払って</u>くださいね?</h1>
<div>
<p>この p は実際には<em>必要</em>ではありませんが、
<span id="bold-text">組織の<i>および</i>構造</span>
ページの内容を把握しやすくなります。</p>
</div>
</body>
</html>
リスト 3. より賢い要素のネスト
<html>
<頭>
<title>さらに複雑なネスト</title>
</head>
<本文>
<div id="本体">
<div id="コンテンツ">
<テーブル>
<tr><th>手順</th><th>プロセス</th></tr>
<tr><td>1</td><td><em>ルート要素</em>を調べます。</td></tr>
<tr><td>2</td><td>最初に <span id="code">頭</span> を処理します。
通常は簡単なので。</td></tr>
<tr><td>3</td><td><span id="code">本文</span>に取り組みます。
<em>時間をかけてください</em>。</td></tr>
</テーブル>
</div>
<div id="閉じる">
このリンクはアクティブでは<em>あり</em>ませんが、アクティブである場合、答えは次のとおりです。
これに <a href="answers.html"><img src="exercise.gif" /></a> を入力すると、
でも<em>とにかくエクササイズをしてください！</em>
</div>
</div>
</body>
</html>
これらの演習の答えは、この記事の最後にある GIF ファイル、図 2 のtricy-solution.gif および図 3 のtricier-solution.gif にあります。覗き見せずに、まず時間をかけて自動的に応答してください。これは、ツリーを編成するときにルールがどれほど厳密に適用されるかを理解するのに役立ち、HTML とそのツリー構造を習得するのに非常に役立ちます。
属性についてはどうですか？
プロパティをどうするかを考えているときに問題が発生していませんか?前に述べたように、属性には独自のオブジェクト タイプがありますが、実際には、属性はそれを表示する要素の子ではありません。お気づきのとおり、ネストされた要素とテキストは同じ属性「レベル」にありません。リスト 2 と 3 の演習の答え プロパティは表示されていません。
プロパティは実際にはブラウザで使用されるオブジェクト モデルに格納されますが、いくつかの特殊なケースがあります。各要素には、子オブジェクトのリストとは別に、使用可能なプロパティのリストがあります。したがって、 div 要素には、属性「id」と別の属性「class」を含むリストが含まれる場合があります。
要素の属性には一意の名前が必要であることに注意してください。つまり、要素は 2 つの「id」属性または 2 つの「class」属性を持つことができません。これにより、リストの管理とアクセスが容易になります。次の記事で説明するように、getAttribute("id") などのメソッドを呼び出すだけで、名前で属性の値を取得できます。同様のメソッド呼び出しを使用して、プロパティを追加したり、既存のプロパティの値を設定 (リセット) することもできます。
属性名の一意性により、このリストはサブオブジェクトのリストとは異なることに注意してください。 p 要素には複数の em 要素を含めることができるため、子オブジェクト リストには複数の重複が含まれる可能性があります。子リストとプロパティ リストは同様に動作しますが、一方には重複 (オブジェクトの子) を含めることができますが、もう一方には重複 (要素オブジェクトのプロパティ) を含めることができません。最後に、属性を持つのは要素のみであるため、テキスト オブジェクトには属性を格納するための追加のリストがありません。
乱雑な HTML
ブラウザがマークアップをツリー表現に変換する方法に進む前に、検討する価値のある別のトピックがあります。それは、整形式ではないマークアップをブラウザがどのように処理するかということです。整形式とは、XML で広く使用されている用語であり、次の 2 つの基本的な意味があります。
· すべての開始タグには、対応する終了タグがあります。したがって、ドキュメント内のすべての <p> は </p> と一致し、すべての <div> は </div> と一致します。
最も内側の開始タグは最も内側の終了タグと一致し、次に最も内側の開始タグはその次に最も内側の終了タグと一致し、以下同様に続きます。したがって、<b><i>太字と斜体</b></i>は、最も内側の開始タグ <i> が最も内側の終了タグ <b> と適切に一致しないため、不正です。整形式にするには、開始タグの順序または終了タグの順序を切り替えます。 (両方を切り替えた場合でも問題は発生します)。
これら 2 つのルールを詳しく見てみましょう。これら 2 つのルールにより、文書の整理が簡素化されるだけでなく、不確実性も排除されます。最初に太字を適用し、次に斜体を適用する必要がありますか?それともその逆ですか？この順序と不確実性が大した問題ではないと思われる場合は、CSS ではルールが他のルールをオーバーライドできることに留意してください。つまり、たとえば、b 要素のテキストのフォントが i 要素のフォントと異なる場合、次のようになります。書式設定が適用される順序は非常に重要です。したがって、HTML の整形式性が重要な役割を果たします。
ブラウザは、整形式ではないドキュメントを受信した場合、最善を尽くします。結果として得られるツリー構造は、良くても作成者が意図した元のページに近似したものになり、最悪の場合は認識できなくなります。ブラウザにページをロードしてまったく予期しない結果が表示されたことがある場合は、おそらくブラウザの結果を見て、構造がどうあるべきかを推測し、イライラしながら作業を続けたことがあるでしょう。もちろん、この問題を解決するのは非常に簡単です。ドキュメントが適切にフォーマットされていることを確認してください。標準化された HTML の記述方法がわからない場合は、リソースを参照してサポートを求めてください。
DOM の概要
ここまでで、ブラウザが Web ページをオブジェクト表現に変換することはご存知でしょう。また、オブジェクト表現が DOM ツリーであることさえ想像できたかもしれません。 DOM は Document Object Model の略で、World Wide Web Consortium (W3C) から入手可能な仕様です (いくつかの DOM 関連のリンクは「リソース」にあります)。
しかし、より重要なのは、DOM がオブジェクトのタイプとプロパティを定義し、ブラウザがマークアップを表現できるようにすることです。 (このシリーズの次の記事では、JavaScript および Ajax コードで DOM を使用するための仕様について説明します。)
ドキュメント オブジェクト
まず、オブジェクト モデル自体にアクセスする必要があります。 Web ページ上で実行される JavaScript コードで組み込みの document 変数を使用するのは非常に簡単です。次のようなコードを記述でき
ます。
もちろん、このコード自体は役に立ちませんが、これはすべての Web で機能することを示しています。ブラウザがドキュメントを作成する オブジェクトは JavaScript コードで使用でき、オブジェクト表現マークアップの完全なツリーが示されています (図 1)。
各項目はノードです
。ドキュメント オブジェクトが重要であることは明らかですが、それはほんの始まりにすぎません。先に進む前に、ノードというもう 1 つの用語を学習する必要があります。マークアップのすべての部分がオブジェクトによって表されることはすでにご存知ですが、それは単なるオブジェクトではなく、特定の種類のオブジェクト、つまり DOM ノードです。テキスト、要素、属性などのより具体的なタイプはすべて、この基本的なノード タイプを継承します。したがって、テキスト ノード、要素ノード、属性ノードが存在する可能性があります。
すでに JavaScript プログラミングの経験が豊富であれば、おそらくすでに DOM コードを扱っているでしょう。これまでこの Ajax シリーズを読んできた方は、しばらくの間 DOM コードを扱っているはずです。たとえば、コード行 var number = document.getElementById("phone").value; は、DOM を使用して特定の要素を検索し、その要素の値 (この場合はフォーム フィールド) を取得します。そのため、たとえ気づかなくても、JavaScript コードにドキュメントを入力するたびに DOM を使用していることになります。
すでに学んだ用語について詳しく説明すると、DOM ツリーはオブジェクトのツリーですが、より具体的にはノード オブジェクトのツリーです。 Ajax アプリケーションやその他の JavaScript では、これらのノードを使用して、要素とその内容の削除、特定のテキストの強調表示、新しい画像要素の追加などの効果を生成できます。これらはすべてクライアント側 (Web ブラウザで実行されるコード) で発生するため、これらの影響はサーバーと通信することなく即座に発生します。多くの場合、リクエストがサーバーに送信され、レスポンスが解釈される間に長い停止なしに Web ページ上のコンテンツが変更されるため、最終的にはアプリケーションの応答性が向上します。
ほとんどのプログラミング言語では、各ノード タイプの実際のオブジェクト名を学習し、利用可能なプロパティを学習し、タイプとキャストを理解する必要がありますが、JavaScript ではこれは必要ありません。 (すでに見たように) 変数を作成し、それに希望のオブジェクトを割り当てることができます
。
varphoneNumberElement = document.getElementById("電話");
varphoneNumber =phoneNumberElement.value;
型はありません。必要に応じて JavaScript が変数を作成し、それに正しい型を割り当てます。その結果、JavaScript から DOM を操作することが簡単になります (今後の記事では、XML に関連した DOM について取り上げる予定であり、これはさらに独創的になります)。
最後
に、ここでちょっとしたサスペンスを残しておきたいと思います。明らかに、これは DOM について完全に網羅した説明ではありません。実際、この記事は DOM の単なる紹介です。 DOM には、今日紹介したもの以外にもたくさんの機能があります。
このシリーズの次の記事では、これらのアイデアを拡張し、JavaScript で DOM を使用して Web ページを更新し、HTML を迅速に変更し、ユーザーにとってよりインタラクティブなエクスペリエンスを作成する方法について詳しく説明します。 Ajax リクエストでの XML の使用に特化した後の記事で、DOM に再び戻ります。そのため、Ajax アプリケーションの主要部分である DOM についてよく理解してください。
この時点で、DOM を深く理解することは、DOM ツリー内を移動する方法、要素とテキストの値を取得する方法、ノードのリストを反復処理する方法などを詳しく説明するなど、非常に簡単になりますが、これでは次のようなことが残るかもしれません。 DOM はコードがすべてであるという印象がありますが、そうではありません。
次の記事を読む前に、ツリー構造について考え、独自の HTML で試してみて、Web ブラウザが HTML をマークアップのツリー ビューにどのように変換するかを確認してください。さらに、DOM ツリーの構成について考え、この記事で紹介した特殊なケース (属性、要素が混在するテキスト、テキスト コンテンツのない要素 (img 要素など)) を使用して実践してください。
これらの概念をしっかりと理解し、JavaScript と DOM の構文 (次の記事) を学習すると、応答がはるかに簡単になります。
リスト 2 と 3 には、サンプル コード付きの回答があることを忘れないでください。