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 に示すようにツリー構造に変換します。

この記事を継続的に進めるために、記事を少し簡略化しました。 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.

を

<頭>


<本文>

細心の注意を払ってくださいね?

リスト 3. より賢い要素のネスト

<頭>


<本文>

<テーブル>
手順プロセス
1ルート要素を調べます。
2最初に 頭 を処理します。
通常は簡単なので。
3本文に取り組みます。
時間をかけてください。

このリンクはアクティブではありませんが、アクティブである場合、答えは次のとおりです。
これに を入力すると、
でもとにかくエクササイズをしてください！

これらの演習の答えは、この記事の最後にある 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 つの基本的な意味があります。

· すべての開始タグには、対応する終了タグがあります。したがって、ドキュメント内のすべての

は