UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#287 JavaScriptを使用してDOMを操作する例

記入日:2023-10-22 編集日:2023-10-22

JavaScriptを使用してDOMを操作する例の解説をしてみようと思います。

この記事を読むと(約5分)
JavaScriptを使用してDOMを操作する例をイメージできます。

JavaScriptを使用してDOMを操作

JavaScriptを使用してDOM(Document Object Model)を操作する例を示します。

事例: ページ内の要素の追加と削除
この例では、ToDoリストを作成し、新しいタスクを追加したり、最後のタスクを削除したりすることができます。

<!DOCTYPE html>
<html>
<head>
  <title>DOM操作の例</title>
</head>
<body>
  <h1>ToDoリスト</h1>
  <ul id="todo-list">
    <li>タスク1</li>
    <li>タスク2</li>
    <li>タスク3</li>
  </ul>
  <input type="text" id="new-task" placeholder="新しいタスクを入力">
  <button onclick="addTask()">タスクを追加</button>
  <button onclick="removeLastTask()">最後のタスクを削除</button>

  <script>
    function addTask() {
      var newTaskText = document.getElementById("new-task").value;
      var todoList = document.getElementById("todo-list");
      var newTask = document.createElement("li");
      newTask.textContent = newTaskText;
      todoList.appendChild(newTask);
      document.getElementById("new-task").value = "";
    }

    function removeLastTask() {
      var todoList = document.getElementById("todo-list");
      var lastTask = todoList.lastElementChild;
      if (lastTask) {
        todoList.removeChild(lastTask);
      }
    }
  </script>
</body>

1. addTask 関数は、入力フィールドから新しいタスクのテキストを取得し、
新しい <li> 要素を作成し、リストに追加します。そして、入力フィールドをクリアします。

2. removeLastTask 関数は、リストから最後のタスクを削除します。

この例では、JavaScriptを使用して動的にDOMを変更する方法が示されています。
これにより、ユーザーがページ上でタスクを追加・削除できるようになります。

ToDoリスト

  • タスク1
  • タスク2
  • タスク3

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。