DOMマニピュレーション

33712 ワード
webdev dom javascript html テキストリンク
ドキュメントオブジェクトモデル(DOM)は、Webドキュメントのプログラミングインターフェイスです.ブラウザーがロードされるとき、ブラウザーはあらゆるウェブページのDOMをつくります.DOMはノードとオブジェクトからなる.我々は、さまざまなセレクタの助けを借りて、JavaScriptコード内のこれらのノードにアクセスすることができますし、参照を使用してHTMLの要素を変更します.
そこで、このブログでは、JavaScriptを使用してHTML要素にアクセスして作成する方法をいくつか紹介します.つのボタンを持って、2つの数字を取るフォームを作成し、それらを乗算し、出力を表示し、他のDOMからフォームを削除します.
これは、私たちの最終製品がどのように見えるかです

さて、ストレートに座って、あなたのIDEを準備し、それに飛び込みましょう.
HTMLファイルの作成index.html フォームを作成および削除するための2つのボタンと、フォームが表示されるセクションを持つこと.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>
</head>

<body>
  <button id="create_form" class="button">Create Form</button>
  <button id="delete_form" class="button">Delete Form</button>
  <section id="form_area"></section>
</body>

</html>
さて、私たちは、DOMを操作しているのでmain.js JavaScriptコードのファイルとHTMLファイルに含める.ヘッドタグの中にスクリプトタグを追加します.
<script defer src="./main.js"></script>

フォームを作成する手順


フォーム要素を作成し、属性を割り当てる


let form = document.createElement("form");
form.setAttribute("id", "form");
form.setAttribute("class", "multiplication-form");
  • 何document ? ドキュメントはHTMLページがロードされるとき、ブラウザによってつくられるオブジェクトです、したがって、基本的にHTMLタグの中の我々のHTMLコードは文書に含まれています.
  • createElement() 名前として、このメソッドは、パラメータとして提供されるHTML要素を作成します
  • setAttribute() このメソッドは、属性をHTML要素に追加するために使用されます

    • 2 .入力要素とsubmitボタンを作成する


    フォーム要素と追加属性を作成したように、属性を持つ2つの入力要素を作成しようとします
    最初の入力タグ
  • 型番
  • ID番号
  • クラス入力
  • 必須- true
  • placeholder -入力番号1
    • 第2入力タグ
  • 型番
  • ID番号
  • クラス入力
  • 必須- true
  • placeholder -数値2を入力する
    • つのボタンを
  • タイプ-送信する
  • IDボタン
  • クラスボタン
  • あなたが書くことができるボタンの中にテキストを追加するには
    ボタン."提出"
    • ビューコード
    let input1 = document.createElement("input");
input1.setAttribute("type", "number");
input1.setAttribute("id", "first_number");
input1.setAttribute("class", "input");
input1.setAttribute("required", "true");
input1.setAttribute("placeholder", "enter number 1");

let input2 = document.createElement("input");
input2.setAttribute("type", "number");
input2.setAttribute("id", "second_number");
input2.setAttribute("class", "input");
input2.setAttribute("required", "true");
input2.setAttribute("placeholder", "enter number 2");

let button = document.createElement("button");
button.setAttribute("type", "submit");
button.setAttribute("id", "submit_button");
button.setAttribute("class", "button");
button.innerText = "Submit";

    フォーム要素内に追加する


    別の要素の中に要素を追加するにはappend() 二番目appendChild() .append() 複数の要素を一度に追加し、appendChild() 一つの要素だけを追加し、更新された要素の参照を返すことができます
    Appendを使用してすべての要素を追加します
    form.append(
  input1,
  input2,
  button,
);

    フォーム要素をHTML DOMに追加する


    さて、フォーム要素を追加するには、セクションタグのアクセスを必要とし、フォームを追加できるようにします.
    私たちはquerySelector() メソッド.
    const section = document.querySelector("#form_area");
section.append(form);
    The querySelector() メソッドは、異なるセレクタの助けを借りてDOMからタグを選択して返します.ここではid セレクタとして.

    出力を表示する


    出力を表示するには、もう一つの要素をセクションタグ、すなわちdivタグに追加する必要があります.
    let div = document.createElement("div");
div.setAttribute("id", "output");
div.setAttribute("class", "output-div");
section.append(div);
    今、すべてのコードを一緒に機能するように見える
    const section = document.querySelector("#form_area");
function createForm() {
  let form = document.createElement("form");
  form.setAttribute("id", "form");
  form.setAttribute("class", "multiplication-form");

  let input1 = document.createElement("input");
  input1.setAttribute("type", "number");
  input1.setAttribute("id", "first_number");
  input1.setAttribute("class", "input");
  input1.setAttribute("required", "true");

  let input2 = document.createElement("input");
  input2.setAttribute("type", "number");
  input2.setAttribute("id", "second_number");
  input2.setAttribute("class", "input");
  input2.setAttribute("required", "true");

  let button = document.createElement("button");
  button.setAttribute("type", "submit");
  button.setAttribute("id", "submit_button");
  button.setAttribute("class", "button");

  let div = document.createElement("div");
  div.setAttribute("id", "output");
  div.setAttribute("class", "output-div");

  form.append(
    input1,
    input2,
    button,
  );

  section.append(form);
  section.append(div);
}

    イベントリスナーの作成


    これで、我々の形はすべての要素で準備ができています.しかし、現在フォームを作成するときにフォームを表示する必要があります.そのためには、ボタンにアクセスし、リスナーを置く必要があります.
    const createFormButton = document.querySelector("#create_form");
createFormButton.addEventListener("click", createForm);
  • addEventListener() は、特定のタグで発生するイベントをリッスンするメソッドです.これは、最初のパラメータとしてイベントの種類と2番目のパラメータとしてコールバック関数を受け取ります.
  • コールバックは、あるタスクが完了した後に呼び出される関数です.この場合、ボタンをクリックした後、CreateForm関数を呼び出してフォームを作成します.

    • フォームを削除する手順


    1 .削除フォーム関数の作成


    セクションタグ内のすべての要素を削除するには、すべての要素からセクションとループにアクセスし、1つずつ削除します
    function deleteForm() {
  while (section.firstChild) {
    section.removeChild(section.firstChild);
  }
}
    この関数は最初にフォームタグを削除し、次にセクションからdivタグを削除します.書くことができますconsole.log(section.firstChild) whileループで何が起こっているかチェックします.

    2 .削除ボタンにイベントリスナーを追加する


    今すぐ削除ボタンをクリックした後のフォームの削除をトリガするには、我々はボタンを作成するためのボタンと同じようにイベントリスナーを追加する必要があります.
    const deleteFormButton = document.querySelector("#delete_form");
deleteFormButton.addEventListener("click", deleteForm);
    この時点で、コードを実行し、[ Create ]ボタンをクリックするとフォームフォームの表示が表示されますが、[作成]ボタンをクリックするとフォーム要素がピリングし続けます.
    フォーム要素を追加するのを防ぐには、セクションタグ内の要素を作成して追加する前にdelete関数を実行します.
    我々のcreateForm() 関数は以下のようになります-
    function createForm() {
  deleteForm(); 
  let form = document.createElement("form");
  form.setAttribute("id", "form");
  form.setAttribute("class", "multiplication-form");
// ...rest of the code
}

    乗算関数の作成


    今、我々のボタンを操作している.「作成」ボタンがフォームを作成し、削除ボタンが削除されます.しかし、今、我々は我々のフォームを働かせたいです.それは我々が入力した番号を乗算し、結果を表示する必要があります.そのためには、入力値を乗算し、フォームを送信した後に作成した出力divに表示する関数を作成する必要があります.
    function multiplyNumbers(event) {
  const number1 = document.querySelector("#first_number");
  const number2 = document.querySelector("#second_number");
  const output = document.querySelector("#output");
  output.innerText = parseInt(number1.value) * parseInt(number2.value);
  event.preventDefault();
}

    フォームタグへのイベントリスナーの追加


    Submitイベントを聞くには、フォームにSubmitイベントリスナーを追加する必要がありますが、HTMLページが読み込まれたときにフォームが作成されないため、フォーム要素にグローバルにアクセスできません.中に入れる必要があるcreateForm() イベントリスナーを追加する前に、要素を作成します.
    document.querySelector("#form").addEventListener("submit", multiplyNumbers);
    これで我々の全体のアプリが完了します.で以下のスタイルを加えてくださいstyle.css ファイルを使用してインポートlink タグをきれいに見えるか、独自のスタイルを追加することができます.
    <link rel="stylesheet" href="style.css></link>

    body{
  margin: 0;
  text-align: center;
}

.button{
  margin: 2rem 1rem;
  padding: 0.2rem 0.5rem;
  max-width: 10rem;
  height: 2rem;
  font-size: 1rem;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 0.5rem;
  color: white;
  background-color: blueviolet;
  cursor: pointer;
  transition: scale 0.2s;
}

.button:active{
  transform: scale(0.95);
  transition: scale 0.2s;
}

.multiplication-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: fit-content;
  padding: 2rem 1rem 0 1rem;
  margin: 1rem auto;
  border: 2px solid black;
  border-radius: 0.5rem;
}

.input{
  margin: 0.5rem 1rem;
  padding: 0 0.5rem;
  height: 2rem;
  max-width: 15rem;
  font-size: 1rem;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 0.5rem;
  font-weight: bold;
  color: blueviolet;
  outline: none;
}

.output-div{
  max-width: 32rem;
  margin: 2rem auto;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: underline;
}
    をクリックすることができますGitHub link すべてのコードとチェックコードのすべてのステップでコミットを介して.何か新しいことを学びましたように.ハッピーコーディング!
    テスト:Oracle 19 c RACプライベートネットワークの追加
    次のJSと一緒のChatWoot