ブラウザーでのレンダリングを理解する: CSSOM

この記事は、ブラウザでのレンダリングに関するシリーズの一部です。以前の記事をまだ読んでいない場合は、以下のリンクをチェックしてください:

• ブラウザでのレンダリングを理解する: DOM

前回の記事では、Web ページの構造を定義する DOM (Document Object Model) を通じて、HTML がブラウザーによってどのように処理されるかを検討しました。しかし、Web ページは HTML だけで作られているわけではありません。CSS には、CSSOM (CSS Object Model) と呼ばれる、オブジェクトの形式での独自の表現があることはまだ知られていません。

ブラウザは DOM と組み合わせて CSSOM を使用してページを構築し、構造 (HTML) とスタイル (CSS) を組み合わせて、調和のとれた視覚的なプレゼンテーションを実現します。

この記事では、CSSOM についての知識を深め、その構造、重要性、操作方法を理解します。

CSSOMとは何ですか?

DOM と同様、CSSOM は階層データ構造ですが、その機能は Web ドキュメントの CSS を表すことです。

CSSOM は、スタイル ファイルが読み込まれて処理された後にブラウザによって生成されます。 DOM とは別に構築されていますが、両方が連携して動作するため、ブラウザーは正しい構造 (DOM) でページを組み立て、適切なスタイル (CSSOM) を適用できます。

CSSOM の主な機能は、ページ上の各要素に適用する必要があるスタイルの詳細な「マップ」をブラウザーに提供することです。

以下の CSSOM の視覚的表現を参照してください:

コードでは、この表現は次のようになります:

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

そして、前に見た CSSOM を参照する DOM ツリーは次のように表されます:

CSSOM の操作

ブラウザは、JavaScript を使用して CSS を操作できる一連の API を提供します。 DOM API に似ていますが、HTML ではなく CSS を使用します。

この API を使用すると、ページの CSS を動的に読み取り、操作できます。

スタイルを操作する最も簡単な方法は、ドキュメント内に存在するスタイル プロパティを使用することです。

CSSOM 要素に初めてアクセスして操作するには、ブラウザー コンソールを開いて次のコードを実行します。

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

上記のコード スニペットを実行した後、ページ要素を調べて本文を分析することをお勧めします。現在、ボディにはインライン スタイルがあり、多かれ少なかれ次のようになります。

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

常にパターン element.style.propertyname に従って、ページ上の CSS プロパティを追加または変更できます。

インライン スタイルを操作するもう 1 つの方法は、スタイルに存在するいくつかのメソッドを使用することです。

• setProperty: このメソッドを使用すると、インライン プロパティの値を追加または変更できます。

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

• getPropertyValue: このメソッドを使用すると、インライン プロパティの値にアクセスできます。

<p>Isso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.<br>
A mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.<br>
</p>

<pre class="brush:php;toolbar:false">console.log(document.body.style.background); // '''

• removeProperty: このメソッドを使用すると、インライン プロパティを削除できます。

document.body.style.setProperty("background", "red");

// Agora execute o próximo comando

document.body.style.setProperty("background", "blue");

getComputedStyle は読み取り専用で動作します。任意の要素または疑似要素のスタイル情報にアクセスできますが、変更を行うことはできません。

インラインではないスタイルはどうなるでしょうか?

インライン スタイルを記述することはあまり一般的ではないため、スタイルシートで定義した計算済みスタイルにもアクセスできます。これを行うには、スタイル シートに直接アクセスして操作します。

ブラウザコンソールで以下のコードスニペットを実行します:

document.body.style.getPropertyValue("background"); // blue

これを使用すると、HTML の先頭で宣言されたすべてのスタイル シートにアクセスできるようになります。

これらのスタイルシートはリスト形式 (配列のように見えますが、そうではありません) で返され、インデックスを介してアクセスできます。

document.body.style.removeProperty("background");

このブログは Tailwind CSS で作成されており、スタイルシートの操作がより複雑になるため、今後は別の場所でテストを実行することをお勧めします。

このページにアクセスし、コンソールでコマンドを実行します。

document.styleSheets;

上記のコードを実行すると、スタイル シートに存在するすべての CSS にアクセスできるようになります。上記と同じロジックに従って、インデックスを通じて要素にアクセスできます。

document.styleSheets[1];

上記のコードでは、ページ本文のスタイル宣言にアクセスしています。

document.styleSheets[0].cssRules;

スタイル プロパティにアクセスすると、インライン スタイルを記述せずに、CSS プロパティを追加または変更できます。

インデックスを変更したり、さまざまな要素の CSS を変更したりして、この API をもう少し試してみることをお勧めします。

結論

DOM と同様に、CSSOM はブラウザーがレンダリング プロセスに使用するツリー形式の表現です。

ページのすべての CSS にアクセスし、JavaScript を使用して自由に操作できます。このタイプの操作を実行する方法を知ることは、スタイル付きコンポーネントやリニアなどの CSS ツールを理解するために不可欠です。

基礎知識は最も重要ですが、常に軽視されています。
Web 開発のコンテキストでは、HTML、CSS、JavaScript、およびブラウザの動作方法を理解することが不可欠です。この強固な基礎があれば、これらの基礎から派生するあらゆるテクノロジーを学ぶことができます。

どうもありがとうございます！！

ここに来ていただきありがとうございます!

この読書を通して何か新しいことを学んでいただければ幸いです。

また次回お会いしましょう!

参考文献

CSS オブジェクト モデル

オブジェクト モデルの構築

CSSOM — CSS オブジェクト モデル

CSS オブジェクト モデル (CSSOM) の概要とガイド

以上がブラウザーでのレンダリングを理解する: CSSOMの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。