最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS 例

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScript HTML DOM要素

❮前 次の章❯

このページでは、HTMLページ内のHTML要素を見つけてアクセスする方法を教示しています。

HTML要素を見つけます

多くの場合、JavaScriptで、あなたは、HTML要素を操作したいです。

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

  • HTML要素を見つけるid
  • タグ名でHTML要素を見つけます
  • HTML要素を見つけるclass名
  • CSSセレクタによってHTML要素を見つけます
  • HTMLオブジェクトのコレクションによってHTML要素を見つけます

HTML要素を見つけるId

DOMでHTML要素を見つけるための最も簡単な方法は、要素の使用しているid 。

この例では、持つ要素を見つけるid="intro" ：

例

var myElement = document.getElementById("intro");
»それを自分で試してみてください

要素が見つかった場合、この方法は、（内のオブジェクトとしての要素が返されmyElement ）。

要素が見つからない場合、 myElementヌルが含まれます。

タグ名によってHTML要素を見つけます

この例では、すべての見つかった<p>要素を：

例

var x = document.getElementsByTagName("p");
»それを自分で試してみてください

この例では、持つ要素を見つけるid="main" 、その後、すべての見つかった<p>内の要素"main" ：

例

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
»それを自分で試してみてください

HTML要素を見つけるClass名

あなたは同じで、すべてのHTML要素検索したい場合はclass名を、使用getElementsByClassName()

この例では、とのすべての要素のリストを返しますclass="intro" 。

例

var x = document.getElementsByClassName("intro");
»それを自分で試してみてください

クラス名で検索する要素は、Internet Explorer 8およびそれ以前のバージョンでは動作しません。

CSSセレクタによってHTML要素を見つけます

あなたが指定したCSSセレクタに一致するすべてのHTML要素（検索したい場合はid 、クラス名、タイプ、属性、属性の値、など）を使用querySelectorAll()メソッドを。

この例では、すべてのリストを返します<p>を持つ要素class="intro" 。

例

var x = document.querySelectorAll("p.intro");
»それを自分で試してみてください

querySelectorAll()メソッドは、Internet Explorer 8およびそれ以前のバージョンでは動作しません。

HTMLオブジェクトのコレクションによってHTML要素を見つけます

この例では、とフォーム要素見つけたid="frm1"フォームコレクションに、そしてすべての要素の値を表示します。

例

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
»それを自分で試してみてください

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

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4» 演習5»


❮前 次の章❯