Zenn
😽

[JavaScript]DOM

2023/11/15に公開
初心者
JavaScript
tech

DOM操作とは

  • ウェブサイトを動的に書き換える技術
  • Document Object Model(DOM)という、HTMLやXMLをアプリケーションから操作するための仕組みを利用

DOMツリーとは

HTMLドキュメントやXMLドキュメントをツリー構造として表現したもの
この説明は言葉で説明するよりも画像検索の方が頭に入りやすいです)))
IT mediaより

ノードとは

文書を構成する要素・属性・テキストといったオブジェクト
上記画像の四角１つ１つがノードでありオブジェクト

  • 要素ノード
  • 属性ノード
  • テキストノード

オブジェクト：関連のあるデータと機能の集合

ブラウザオブジェクトの階層構造

ポイントは
window>document>forms>elements
という構造になっていること。

Windowオブジェクトとは

  • ブラウザを操作するための機能を集めたオブジェクト
  • ブラウザオブジェクトの階層構造の最上位に位置する

Docmentオブジェクト

  • Windowオブジェクト内に表示された、HTMLで表現されているコンテンツを保持しているオブジェクト
  • Window内に表示されたドキュメントを操作するのは、Documentオブジェクトの役割
    Documentオブジェクト=DOM

Locationオブジェクト

  • 現在表示されているページのロケーションに関する情報を提供する
  • 現在の表示URLアドレスに関する情報を取得できる

Historyオブジェクト

  • ブラウザの履歴の操作
  • 画面上に表示しているページの移動などの操作

Screenオブジェクト

  • ディスプレイに関する情報を提供

Formオブジェクト

  • Formに関する情報を提供
  • Formの操作が出来る

Anchorオブジェクト

  • ページ上のアンカーに関する情報を扱う

Imagesオブジェクト

  • 画像に関する情報を提供
  • 画像を操作する機能の提供

Elementオブジェクト

  • HTMLドキュメントにおける要素(タグ)

getElementById　メソッド

指定したidを持つ要素を１つ取得する

構文

document.ElementById(id)

指定したidを持つ要素がなければnullが返される

inde.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Javascript basic</title>
</head>
<body>
  <p id="result">pタグの文字列です</p>
  <input id="button" type="button" value="Get!">
  <script src="dom.js"></script>
</body>
</html>
dom.js
'use strict';
const e = document.getElementById('button');
// イベント処理
e.addEventListener('click',() => {
//<p id="result">pタグの文字列です</p>を指定
  const result = document.getElementById('result');
//テキストだけを持ってくる
  console.log(result.innerText);
}, false)

getElementsByTagNameメソッド

指定したタグ名を持つ要素を取得するメソッド

構文
//tagName:取得したい要素のタグ名
document.getElementsByTagName(tagName)

戻り値：HTMLCollection(配列と似た構造のデータ)
タグが存在しない時：nullではなく　空のHTMLCollection([])を返す

index.html
  <div>element1(div)</div>
  <p>element2(p)</p>
  <div>element3(div)</div>
  <span>element4(span)</span>
  <div>element5(div)</div>
  <input id="button" type="button" value="Get!">
  <script src="dom.js"></script>
dom.js
'use strict';
const e = document.getElementById('button');
// イベント処理
e.addEventListener('click',() => {
  //divタグを取得
  const elements = document.getElementsByTagName('div');
  for(let i = 0; i < elements.length; i++){
    console.log(elements[i].innerText);
  }
}, false)

getElementsByNameメソッド

指定したname属性を持つ要素を取得するメソッド
ラジオボタン、チェックボックス、name属性が等しい要素群の取得に利用

構文
//name:name属性の値
document.getElementsByName(name)

戻り値：HTMLCollection(配列と似た構造のデータ)
タグが存在しない時：nullではなく　空のHTMLCollection([])を返す

index.html
  <input name="result" type="text">
  <input id="button" type="button" value="Get!">
  <script src="dom.js"></script>
dom.js
'use strict';
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const elements = document.getElementsByName('result');
  console.log(elements[0].value);
}, false);

getElementsByClassNameメソッド

指定した class属性 を持つ要素を取得するメソッド
ラジオボタン、チェックボックス、name属性が等しい要素群の取得に利用

構文
//class:class属性の値
document.getElementsByClassName(className)

戻り値：HTMLCollection(配列と似た構造のデータ)
タグが存在しない時：nullではなく　空のHTMLCollection([])を返す

▼ボタンをクリックするとclass名がfooの要素を取得し、そのコンテンツをコンソールに出力する

index.html
  <ul>
    <li class="foo">element1</li>
    <li class="bar">element2</li>
    <li class="foo">element3</li>
    <li>element4</li>
    <li class="bar">element5</li>
  </ul>
  <input id="button" type="button" value="Get!">
dom.js
'use strict';
const e = document.getElementById('button');
e.addEventListener('click', () => {
  //引数：取得したいクラス名
  const elements = document.getElementsByClassName('foo');
  for(let i = 0; i< elements.length; i++){
    console.log(elements[i].innerText);
  }
}, false);

ノード追加

createElementメソッド

要素を作成する
ノードを作成するだけのため、別途ドキュメントに追加する処理が必要

構文
//elementName:要素名
document.createElement(elementName)

createTextNodeメソッド

テキストノードを作成する
ノードを作成するだけのため、別途階層に追加する処理が必要

構文
//text:テキスト
document.createTextNode(text)

appendChildメソッド

説明された要素を現在の要素の最後の子要素として追加
戻り値:追加した子ノード

構文
//element:要素オブジェクト
//node:追加する子ノード
element.appendChild(node)

▼サンプルコード

  • 空のリスト・ボタンを配置
  • ボタンをクリックする
  • リストの項目が追加される
  • 追加される文字列はtest

ノードを置換する

replaceChildメソッド

指定した子ノードを置き換える
newChildとoldChildを入れ替える
(appendChildとremoveChildを同時に行う)

構文
replaceNode = parentNode.replaceChild(newChile, oldChild)

parentNode:置き換え対象の親ノード
newChild:置き換え後のノード
oldChile:置き換え対象のノード
replaceNode:置き換えられたノード

▼サンプルコード

  • リストとボタンを配置
  • ボタンをクリックする
  • リストの子要素を置換する処理
index.html
<body>
  <ul>
    <li id="oldList">old element</li>
  </ul>
  <input id="button" type="button" value="Replace!">
  <script src="main.js"></script>
</body>
main.js
'use strict';
const e = document.getElementById('button');
e.addEventListener('click',() => {
  //空のli要素作成
  const newList = document.createElement('li');
  //生成したノードにid属性newListを付与
  newList.setAttribute('id','newList');
  //テキストノードを生成
  const newText = document.createTextNode('new element');
  //生成したノードを空のli要素の子ノードとして追加
  newList.appendChild(newText);
  //置換前の変数oldListの参照を変数oldListに代入
  const oldList = document.getElementById('oldList');
  //親ノードulの参照を変数parentNodeに代入
  const parentNode = oldList.parentNode;
  //既存ノードoldListを新規に作成したli要素に置換
  parentNode.replaceChild(newList, oldList);
}, false)

ノードを削除

removeChildメソッド

指定した子ノードを取り除く
(取り除いたノードoldChildは再利用できる)

構文
//child:DOMから取り除く子ノード
//oldChild:取り除かれた子ノードの参照
oldChild = element.removeChild(child)

▼サンプルコード

  • リストとボタンを設置
  • ボタンをクリックする
  • リストの子要素が最後のものから削除される
index.html
<body>
  <ul id="list">
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
  </ul>
  <input id="button" type="button" value="Remove!">
  <script src="main.js"></script>
</body>
main.js
'use strict';
const e = document.getElementById('button');
e.addEventListener('click',() => {
  const parentElement = document.getElementById('list');
  const elements = parentElement.getElementsByTagName('li');
  const removeIndex = elements.length -1;
  ////element数が返ってくる
  //console.log(elements.length);
  parentElement.removeChild(elements[removeIndex]);
}, false);

Discussion