JavaScript - ドキュメントオブジェクト
こんにちは、志を抱くプログラマーたち！今日は、JavaScriptのドキュメントオブジェクトの興味深い世界に飛び込みます。プログラミングが初めてであれば心配しないでください – 私はこの旅を一歩一歩ガイドします。私と一緒にこの冒険に乗り出しましょう！
ウィンドウドキュメントオブジェクト
ブラウザでJavaScriptを扱う際、最も重要なものの一つとして扱うのがドキュメントオブジェクトです。しかし、それに進む前に、まずはその親であるウィンドウオブジェクトを理解しましょう。
ウェブブラウザを家として考えます。ウィンドウオブジェクトはその家全体を表し、ドキュメントオブジェクトは主にアクションが起こるメインのリビングルームのようなものです。ブラウザウィンドウに表示されるすべてはウィンドウオブジェクトの一部であり、ウェブページのコンテンツは特にドキュメントオブジェクトの一部です。
以下に簡単な例を示します：
console.log(window.document === document); // 出力: trueこれにより、documentは実際にはwindowオブジェクトのプロパティですが、便宜上直接documentとしてアクセスできることが示されています。
JavaScript ドキュメントオブジェクトのプロパティ
ドキュメントオブジェクトがどこに位置するかを理解したら、そのプロパティを探ってみましょう。これらのプロパティは、ウェブページのさまざまな部分にアクセスし、操作することを可能にします。
1. document.title
このプロパティを使うと、ウェブページのタイトルを取得したり設定したりできます – あなたがブラウザタブに表示されるテキストのことです。
console.log(document.title); // 現在のページタイトルを出力
document.title = "私の素晴らしいページ"; // ページタイトルを変更2. document.body
このプロパティを使うと、HTMLドキュメントの<body>要素にアクセスできます。
document.body.style.backgroundColor = "ライトブルー";この行は、ページ全体の背景色をライトブルーに変更します。すごいですね？
3. document.URL
この読み取り専用プロパティは、現在のページの完全なURLを提供します。
console.log(document.URL); // 诸如 "https://www.example.com/page.html" 之类的出力JavaScript ドキュメントオブジェクトのメソッド
メソッドは、私たちのドキュメントオブジェクトのスーパーパワーです。これにより、ウェブページでさまざまな興味深いことを行うことができます。
1. document.getElementById()
これは最も頻繁に使用するメソッドの一つです。HTMLのIDを使って要素を取得します。
let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "こんにちは、JavaScriptで変更されました！";この例では、ID "mySpecialDiv" を持つ要素を見つけ、そのコンテンツを変更しています。
2. document.createElement()
このメソッドを使うと、新しいHTML要素をから scratch！で作成できます。
let newParagraph = document.createElement("p");
newParagraph.textContent = "私は新しいパラグラフで、お会いできて嬉しいです！";
document.body.appendChild(newParagraph);ここで、新しいパラグラフ要素を作成し、テキストを設定し、ドキュメントのボディの最後に追加しています。
3. document.querySelector()
この強力なメソッドは、CSSセレクターを使って要素を選択します。
let firstButton = document.querySelector("button");
firstButton.style.color = "赤";これは、ページ上の最初のボタンを見つけ、そのテキストの色を赤にします。
ドキュメントオブジェクトのプロパティリスト
以下に、ドキュメントオブジェクトの主要なプロパティを便利な表にまとめます：
| プロパティ | 説明 |
|---|---|
| document.title | 現在のドキュメントのタイトル |
| document.body |
<body>要素 |
| document.head |
<head>要素 |
| document.URL | ドキュメントの完全なURL |
| document.domain | ドキュメントサーバーのドメイン名 |
| document.lastModified | ドキュメントが最後に修正された日付 |
ドキュメントオブジェクトのメソッドリスト
そして、以下に重要なドキュメントオブジェクトのメソッドを表にまとめます：
| メソッド | 説明 |
|---|---|
| document.getElementById() | 指定されたIDを持つ要素を返す |
| document.getElementsByClassName() | 指定されたクラス名を持つ要素のコレクションを返す |
| document.getElementsByTagName() | 指定されたタグ名を持つ要素のコレクションを返す |
| document.querySelector() | CSSセレクターに一致する最初の要素を返す |
| document.querySelectorAll() | CSSセレクターに一致するすべての要素を返す |
| document.createElement() | 新しいHTML要素を作成する |
| document.write() | HTML表現やJavaScriptコードをドキュメントに書き込む |
ドキュメントオブジェクトを操作することを学ぶことは、ウェブ開発の世界で魔法使いになることと同じです。これらのツールを使うことで、ウェブページを生き生きとし、ユーザーのアクションに応じて素晴らしい方法で反応させることができます。
このレッスンを終えるにあたり、かつて私が持った生徒が思い出されます。最初はこれらのプロパティやメソッドに怯えていましたが、練習を重ねることで非常に熟練しました（ほとんど寝ていてもウェブページを操作できる位です）。鍵は実験をし、楽しむことです。
ですから、私の愛する生徒たち、これらの概念で遊んでみてください。このページのタイトルを変更したり、新しい要素を作成してボディに追加してみてください。練習を重ねることで、自然なものとなります。すぐにプロのようにインタラクティブなウェブ体験を制作するようになるでしょう！
快適なコーディングを続け、プログラミングの世界では好奇心が最大の資産です。常に探求し、質問し、そして最も重要なこととして、コーディングを続けてください！
Credits: Image by storyset