JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでdocument.documentElementを操作する方法

JavaScriptの document.documentElement プロパティを使用すると、ドキュメントのルート要素（<html> 要素）を取得できます。このプロパティは、HTML文書全体の最上位ノードへの参照を返すため、ページ全体に共通するスタイルの変更や、ルート要素の情報（nodeName など）の確認に活用できます。

document.documentElementの基本的な使い方

以下のコードでは、document.documentElement.nodeName を使ってルート要素のノード名を取得し、画面に表示しています。あわせて、document.body.style.backgroundColor でページの背景色も変更しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Example</title>
   </head>

   <body>
      <p>デモテキスト</p>

      <script>
         // ページ全体の背景色をグレーに変更
         document.body.style.backgroundColor = "gray";

         // ルート要素のノード名を取得して表示
         var a = document.documentElement.nodeName;
         document.write("Node Name: " + a);
      </script>

   </body>
</html>

実行結果

このコードを実行すると、ブラウザ上に「Node Name: HTML」と表示されます。これは、HTML文書のルート要素が <html> 要素であり、その nodeName が「HTML」であることを示しています。

主な活用シーン

  • ダークモードの切り替え： ルート要素に対してクラスを追加・削除することで、サイト全体のテーマを一括で変更できます。
  • CSSカスタムプロパティの操作： :root に定義されたCSS変数をJavaScriptから動的に書き換えられます。
  • スクロール位置の取得： scrollTop や scrollHeight など、ページ全体のスクロール情報を参照する際に利用されます。

このように document.documentElement は、HTML文書の最上位ノードにアクセスするための重要なプロパティです。DOM操作を行う際の基本として、ぜひ覚えておきましょう。

  1. JavaScriptのHTML DOMでaddEventListener()メソッドを使う方法をわかりやすく解説

    addEventListener()メソッドとは？ addEventListener()メソッドを使用すると、指定したHTML要素にイベントハンドラ（イベント発生時に実行される関数）を追加できます。クリックやダブルクリック、キー入力など、さまざまなイベントに対する処理を柔軟に登録できるのが特徴です。 基本的な構文は以下のとおりです。 要素.addEventListener(イベント名, 実行する関数); 同じ要素・同じイベントに対して複数のハンドラを登録できる点が、onclick属性などの従来の書き方との大きな違いです。 サンプルコード 次のコードを実行して、ボタンをダブルクリックしてみてくだ

  2. MongoDBにJavaScript関数を保存・実行する方法をわかりやすく解説

    MongoDBに保存されたJavaScriptを操作する方法 MongoDBでは、JavaScriptの関数をデータベース内の特別なコレクション「system.js」に保存できます。この仕組みを利用すれば、よく使う処理をサーバー側に登録しておき、必要なときにいつでも呼び出すことが可能です。関数の保存には db.system.js.save() メソッドを使用します。 JavaScript関数を保存する基本構文 db.system.js.save({ _id: anyFunctionName, value: function (returnValue) { re