【JavaScript】DOM操作 - fuuengineerのブログ

f:id:fuuengineer:20211114214558p:plain

idをキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>IDをキーに要素を取得</title>
  </head>
  <body>
    <p id="result">pタグの文字列です。</p>
    <input type="button" value="取得" onclick="show()">
    <script src="js/element_id.js"></script>
  </body>
</html>

javascript

// IDをキーに要素を取得
// getElementByIdメソッド

// 現在のid:resultの内容（テキスト）をコンソールに表示。
// id:resultの内容（テキスト）を、現在時刻（日時）に書き換え。

// show関数を実行
function show() {
  // resultのidを変数に代入
  var result = document.getElementById('result');
  // pタグの内部をコンソールに表示
  console.log(result.innerText);
  // 現在時刻を取得して変数に代入
  var nowDate = new Date();
  // 日本でよく使う日時の表現に変換
  result.innerText = nowDate.toLocaleString();
}

タグ名をキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タグ名をキーに要素を取得</title>
  </head>
  <body>
    <div>要素1(div)</div>
    <p>要素2(p)</p>
    <div>要素3(div)</div>
    <span>要素4(span)</span>
    <div>要素5(div)</div>

    <input type="button" value="取得" onclick="showElements()">  
    <script src="js/elements_tag_name.js"></script>
  </body>
</html>

javascript

// タグ名がdivの要素を取得し、その内容（テキスト）をコンソールに出力する。
function showElements() {
  var elements = document.getElementsByTagName('div');
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
  }
}

name属性をキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>name属性をキーに要素を取得</title>
  </head>
  <body>
    <input type="text" name="result">
    <input type="button" value="取得" onclick="showElements()">
    
    <script src="js/elements_name.js"></script>
  </body>
</html>

javascript

// テキストボックスとボタンを配置、
// ボタンをクリックしたら、
// name属性が’result’の要素を取得して、その入力内容（テキスト）をコンソール表示する。
function showElements() {
  // 要素複数
  var elements = document.getElementsByName('result');
  // elementsのオブジェクトの中からコンソールに出力
  console.log(elements[0].value);
}

class属性をキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>class属性をキーに要素を取得</title>
  </head>
  <body>
    <ul>
      <li class="foo">要素1</li>
      <li class="bar">要素2</li>
      <li class="foo">要素3</li>
      <li>要素4</li>
      <li class="bar">要素5</li>
    </ul>
    <input type="button" value="取得" onclick="showElements()">
    <script src="js/elements_class.js"></script>
  </body>
</html>

javascript

// ボタンをクリックしたら、class名が’foo’の要素を取得し、
// その内容（テキスト）をコンソールに出力する。
function showElements() {
  var elements = document.getElementsByClassName('foo');
  for(var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
  }
}

ノードを追加

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードを追加</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input type="button" value="取得" onclick="append()">
    <script src="js/append_child.js"></script>
  </body>
</html>

javascript

// 空のリスト、ボタンを配置
// ボタンをクリックすると、
// リストの項目が追加される。
// 追加される文字列は”追加文字列”とする。
function append() {
  // li要素を生成
  var li = document.createElement('li');
  // テキストノードを生成
  var text = document.createTextNode('追加文字列');
  // liタグの要素に、テキストノード textを追加
  li.appendChild(text);
  // idがlistsのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される。
  lists.appendChild(li);
}

ノードの置換

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードの置換</title>
  </head>
  <body>
    <ul>
      <li id="oldList">古い要素です</li>
    </ul>
    <input type="button" value="置換" onclick="replace()">
    <script src="js/replace_child.js"></script>
  </body>
</html>

javascript

// リストとボタンを配置
// ボタンをクリックしたら、リストの子要素を置換する処理
function replace() {
  // 空のli要素を作成
  var newList = document.createElement('li');
  // 生成したノードにid属性"newList"を付与
  newList.setAttribute('id', 'newList');
  // テキストノードを生成
  var newText = document.createTextNode('新しい要素です');
  // 生成したノードを、空のli要素の子ノードとして追加
  newList.appendChild(newText);
  // 置換前の変数oldListの参照を変数oldListに代入。
  // (参照とは、オブジェクトへのリンクのことを言う)
  // https://developer.mozilla.org/ja/docs/Glossary/Object_reference
  var oldList = document.getElementById('oldList');
  // 親ノードulの参照を変数parentNodeに代入
  var parentNode = oldList.parentNode;
  // 既存ノードoldListを、新規に作成したli要素newListと置換
  parentNode.replaceChild(newList, oldList);
}

ノードの削除

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードの削除</title>
  </head>
  <body>
    <ul id="lists">
      <li>要素1</li>
      <li>要素2</li>
      <li>要素3</li>
      <li>要素4</li>
      <li>要素5</li>
    </ul>
    <input type="button" value="削除" onclick="remove()">
    <script src="js/remove_child.js"></script>
  </body>
</html>

javascript

// リストとボタンを設置
// ボタンをクリックすると
// リストの子要素が最後のものから削除される
function remove() {
  var parentElement = document.getElementById('lists');
  var elements = parentElement.getElementsByTagName('li');
  var removeIndex = elements.length - 1;
  parentElement.removeChild(elements[removeIndex]);
}

ノードを追加の応用

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードを追加</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input type="text" id="textBox">
    <input type="button" value="追加" onclick="append()">
    <script src="js/exercise.js"></script>
  </body>
</html>

javascript

// 「ノードを追加」のレクチャーで学習したコードを改修、
// ユーザーがテキストボックスに文字列を入力後
// ユーザーがボタンを押すと
// リストの最後の項目として文字列が追加されるプログラムを書いてみましょう。

// 補足
// テキストボックスの要素を取得するには、getElementByIDを利用できる。

function append() {
  // テキストボックスの要素を取得
  var textBox = document.getElementById('textBox');
  // li要素を生成
  var li = document.createElement('li');
  // テキストノードを生成
  var text = document.createTextNode(textBox.value);
  // liタグの要素に、テキストノード textを追加
  li.appendChild(text);
  // idがlistsのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される。
  lists.appendChild(li);
}