ホームページ >ウェブフロントエンド >jsチュートリアル >jsのドキュメントオブジェクトの紹介
jsのドキュメントオブジェクトの紹介
- PHPzオリジナル
- 2024-02-18 13:06:07749ブラウズ
JavaScript の Document オブジェクトの概要とコード例
はじめに:
JavaScript では、Document オブジェクトは HTML ドキュメント全体を表すインターフェイスです。ドキュメントへのアクセス方法と操作方法を説明します。この記事では、Document オブジェクトの一般的なメソッドとプロパティを紹介し、いくつかの具体的なコード例を示します。
- getElementById メソッド
getElementById は、Document オブジェクトの重要なメソッドであり、指定された要素の id 属性に基づいて、対応する要素ノードを取得するために使用されます。ページへの動的な変更は、要素ノードのプロパティまたはコンテンツを変更することによって実現できます。以下は具体的なコード例です:
<html>
<body>
<h1 id="myHeading">Hello, World!</h1>
<script>
var heading = document.getElementById("myHeading");
heading.innerHTML = "Hello, JavaScript!";
</script>
</body>
</html>上記のコードでは、ID「myHeading」を持つ要素ノードが getElementById メソッドを通じて取得され、innerHTML 属性を使用してそのコンテンツが次のように変更されます。 「こんにちは、JavaScript!」。
- getElementsByTagName メソッド
getElementsByTagName メソッドは、指定されたタグ名のすべての要素ノードを取得し、NodeList オブジェクトを返すために使用されます。 NodeList オブジェクトの length プロパティを使用して、一致する要素の数を取得し、インデックスによって各要素にアクセスできます。以下はサンプル コードです。
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.color = "red";
}
</script>
</body>
</html>上記のコードでは、すべての li 要素ノードが getElementsByTagName メソッドを通じて取得され、各 li 要素のテキストの色が for ループを通じて赤に変更されます。
- createElement メソッドと appendChild メソッド
createElement メソッドは新しい要素ノードを作成するために使用され、appendChild メソッドは新しい要素ノードを指定された親ノードに追加します。以下はサンプル コードです。
<html>
<body>
<div id="myDiv"></div>
<script>
var newElement = document.createElement("p");
newElement.innerHTML = "This is a new paragraph.";
document.getElementById("myDiv").appendChild(newElement);
</script>
</body>
</html>上記のコードでは、createElement メソッドを使用して新しい p 要素ノードが作成され、appendChild メソッドを使用して ID「myDiv」を持つ div 要素に追加されます。 。
概要:
この記事では、getElementById、getElementsByTagName、createElement、appendChild など、JavaScript の Document オブジェクトの一般的なメソッドとプロパティをいくつか紹介します。これらのメソッドとプロパティを使用すると、HTML ドキュメントの要素ノードに簡単にアクセスして操作できます。この記事で提供されているコード例が、JavaScript を学習および使用している読者にとって役立つことを願っています。
以上がjsのドキュメントオブジェクトの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。