JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScript HTMLDOMナビゲーション


HTML DOMを使用すると、ノードの関係を使用してノードツリーをナビゲートできます。


DOMノード

W3C HTML DOM標準によれば、HTMLドキュメント内のすべてがノードです。

  • ドキュメント全体がドキュメントノードです
  • すべてのHTML要素は要素ノードです
  • HTML要素内のテキストはテキストノードです
  • すべてのHTML属性は属性ノードです(非推奨)
  • すべてのコメントはコメントノードです
DOM HTML tree

HTML DOMを使用すると、ノードツリー内のすべてのノードにJavaScriptでアクセスできます。

新しいノードを作成したり、すべてのノードを変更または削除したりできます。


ノードの関係

ノードツリー内のノードは、相互に階層関係にあります。

親、子、および兄弟という用語は、関係を説明するために使用されます。

  • ノードツリーでは、最上位ノードはルート(またはルートノード)と呼ばれます
  • ルート(親がない)を除いて、すべてのノードには正確に1つの親があります
  • ノードには多数の子を含めることができます
  • 兄弟(兄弟または姉妹)は、同じ親を持つノードです
<html>

  <head>
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html>
ノードツリー

上記のHTMLから、次のように読むことができます。

  • <html>ルートノードです
  • <html>親がいない
  • <html><head>の親です<body>
  • <head>の最初の子です<html>
  • <body>の最後の子です<html>

と:

  • <head>子供が1人います:<title>
  • <title>1つの子(テキストノード)があります:「DOMチュートリアル」
  • <body>2人の子供がいます:<h1>そして<p>
  • <h1> 子供が1人います:「DOMレッスン1」
  • <p> 子供が1人います:「Helloworld!」
  • <h1><p>兄弟です


ノード間のナビゲート

次のノードプロパティを使用して、JavaScriptでノード間を移動できます。

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

子ノードとノード値

DOM処理でよくあるエラーは、要素ノードにテキストが含まれていることを期待することです。

例:

<title id="demo">DOM Tutorial</title>

要素ノード <title>(上記の例)にはテキストが含まれていません。

これには、値が「DOMチュートリアル」のテキストノードが含まれています。

innerHTMLテキストノードの値には、ノードのプロパティ からアクセスでき ます。

myTitle = document.getElementById("demo").innerHTML;

innerHTMLプロパティへのアクセスはnodeValue 、最初の子のへのアクセスと同じです。

myTitle = document.getElementById("demo").firstChild.nodeValue;

最初の子へのアクセスも次のように実行できます。

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

次のすべての(3)の例は、要素のテキストを取得し、<h1>それを要素にコピーし<p>ます。

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

InnerHTML

このチュートリアルでは、innerHTMLプロパティを使用してHTML要素のコンテンツを取得します。

ただし、上記の他の方法を学ぶことは、ツリー構造とDOMのナビゲーションを理解するのに役立ちます。


DOMルートノード

完全なドキュメントへのアクセスを許可する2つの特別なプロパティがあります。

  • document.body -ドキュメントの本文
  • document.documentElement -完全なドキュメント

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

nodeNameプロパティ

nodeNameプロパティは、ノードの名前を指定します

  • nodeNameは読み取り専用です
  • 要素ノードのnodeNameはタグ名と同じです
  • 属性ノードのnodeNameは属性名です
  • テキストノードのnodeNameは常に#textです
  • ドキュメントノードのnodeNameは常に#documentです

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

注: nodeName常にHTML要素の大文字のタグ名が含まれます。


nodeValueプロパティ

nodeValueプロパティは、ノードの値を指定します

  • 要素ノードのnodeValueはnull
  • テキストノードのnodeValueはテキスト自体です
  • 属性ノードのnodeValueは属性値です

nodeTypeプロパティ

プロパティはnodeType読み取り専用です。ノードのタイプを返します。

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

最も重要なnodeTypeプロパティは次のとおりです。

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2  class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

タイプ2はHTMLDOMでは非推奨です(ただし機能します)。XMLDOMでは非推奨ではありません。