JavaScript 基礎トレーニング

JavaScript オブジェクト

JavaScript 関数

JS HTML DOM

JS ブラウザBOM

AJAX 基礎トレーニング

JavaScript 参考マニュアル

JS DOM HTMLコンテンツの変更 JS HTML DOMメソッド

JS HTML DOMシレンサ

JavaScriptは、HTML要素の内容や値を取得または変更し、効果を適用するために最もよく使用されます。

これには、まず要素を見つける必要があります。これを行う方法はいくつかあります：

IDでHTML要素を検索
タグ名でHTML要素を検索
クラス名でHTML要素を検索します
CSSセレクタでHTML要素を検索します
HTML要素をHTMLオブジェクトコレクションで検索します

IDでHTML要素を検索

次のように使用できますgetElementById()このメソッドは、要素のユニークなIDに基づいて要素を選択します。

これはDOMツリーでHTML要素を見つける最も簡単な方法です。

以下の例では、ID属性を持つ一つの要素を選択id="msg"の要素：

例

var x = document.getElementById("msg");

テストをしてみて‹/›

要素が見つかった場合、このメソッドはその要素をオブジェクトとして返します。

要素が見つからない場合、myElementにはnullが含まれます。

タグ名でHTML要素を検索

以下を使用することもできますgetElementsByTagName()このメソッドは、タグ名に基づいてHTML要素を選択します。

指定されたタグ名を持つドキュメント内のすべての要素に似た配列のリストを返します。

この例ではすべての<p>要素：

例

var x = document.getElementsByTagName("p");

テストをしてみて‹/›

ドキュメント内のすべての段落要素の背景色を変更：

例

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length; i++) {
　　　x[i].style.backgroundColor = "coral";
}

テストをしてみて‹/›

この例では選択id="wrapper"の要素を、次に選択「wrapper」内のすべての<p>要素：

例

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

テストをしてみて‹/›

クラス名でHTML要素を検索します

この機能を使用してgetElementsByClassName()メソッドを使用して特定のクラス名を持つすべての要素を選択します。

このメソッドは、指定されたクラス名を持つドキュメント中のすべての要素の配列に似たリストを返します。

この例では、class="demo"の要素のリスト：

例

var　x　=　document.getElementsByClassName("demo");

テストをしてみて‹/›

CSSセレクタでHTML要素を検索します

この機能を使用してquerySelectorAll()指定されたCSSセレクタに一致する要素を選択するメソッドです（ID、クラス、タイプなど）。

このメソッドは、指定されたセレクタに一致するすべての要素の配列に似たリストを返します。

CSSセレクタは、ドキュメント中のHTML要素を選択する非常に強力で効果的な方法を提供します。

例

var　x　=　document.querySelectorAll("div");

テストをしてみて‹/›

この例では、“note”のドキュメント中のすべての<div>要素のリスト：

例

var　x　=　document.querySelectorAll("div.note");

テストをしてみて‹/›

HTML要素をHTMLオブジェクトコレクションで検索します

HTMLドキュメントの中で最上位の要素は、ドキュメント属性として直接使用できます。

例えば、属性を使用してアクセスできます<html>要素document.documentElement。

と要素がアクセスできるdocument.body属性。

例

var　html　=　document.documentElement;
var　body　=　document.body;

テストをしてみて‹/›

注意：もしdocument.bodyにおいてタグの前に使用する（例えば、<head>内），それがbody要素ではなくnullを返します。

以下のHTMLオブジェクト（およびオブジェクトコレクション）もアクセスできます：

属性	説明
document.anchors	すべての名前属性を持つ<a>要素
document.applets	すべてを返す<applet>要素HTMLにおいて5（既に廃止されています）
document.baseURI	ドキュメントの絶対基本URIを返します
document.body	返す要素
document.cookie	ドキュメントのcookieを返します
document.doctype	ドキュメントのドキュメントタイプを返します
document.documentElement	返す<html>要素
document.documentMode	ブラウザが使用するモードを返します
document.documentURI	ドキュメントのURIを返します
document.domain	ドキュメントのサーバドメインを返す
document.domConfig	廃止されました；DOM設定を返す
document.embeds	すべてを返す<embed>要素
document.forms	すべてを返す<form>要素
document.head	返す<head>要素
document.images	すべてを返す<img>要素
廃止されました；	DOM実装を返す
document.inputEncoding	ドキュメントのエンコード（文字セット）を返す
document.lastModified	ドキュメントの更新日時を返す
document.links	href属性を持つすべてを返す<area>および<a>要素
document.readyState	ドキュメントの（読み込んでいる）状態を返す
document.referrer	参照者のURI（リンクドキュメント）を返す
document.scripts	すべてを返す<script>要素
document.strictErrorChecking	強制エラーチェックを実行するかどうかを返す
document.title	返す<title>要素
document.URL	ドキュメントの完全なURLを返す

JS DOM HTMLコンテンツの変更 JS HTML DOMメソッド