DOM Input dan Output

Kita bisa mengambil input dari DOM yang ada di HTML dan kita juga bisa menampilkan output ke DOM yang ada di HTML. Untuk mengambil input dari DOM, kita bisa menggunakan document.querySelector(), document.getElementById(), document.getElementsByClassName(), dan document.getElementsByTagName(). Untuk menampilkan output ke DOM, kita bisa menggunakan document.querySelector(), document.getElementById(), document.getElementsByClassName(), dan document.getElementsByTagName().

Contoh 1

Kita bisa mengambil input dari input DOM yang ada di HTML. Untuk mengambil input dari DOM, kita bisa menggunakan document.querySelector().

const input = document.querySelector("input");

Kemudian, kita bisa mengambil value dari input tersebut dengan menggunakan input.value.

const input = document.querySelector("input");
const value = input.value;

Contoh 2

Kita juga bisa mengambil input dari DOM yang ada di HTML dengan menggunakan document.getElementById().

const input = document.getElementById("input");
const value = input.value;

<input id="input" type="text" />

Contoh 3

Kita juga bisa mengambil input dari DOM yang ada di HTML dengan menggunakan document.getElementsByClassName().

const input = document.getElementsByClassName("input");
const value = input.value;

<input class="input" type="text" />

Contoh 4

Kita juga bisa mengambil input dari DOM yang ada di HTML dengan menggunakan document.getElementsByTagName().

const input = document.getElementsByTagName("input");
const value = input.value;

<input type="text" />

Memanipulasi Input dari DOM dan Menampilkan Output ke DOM

Kita bisa memanipulasi input dari DOM dan menampilkan output ke DOM. Untuk memanipulasi input dari DOM, kita bisa menggunakan document.querySelector(), document.getElementById(), document.getElementsByClassName(), dan document.getElementsByTagName(). Untuk menampilkan output ke DOM, kita bisa menggunakan document.querySelector(), document.getElementById(), document.getElementsByClassName(), dan document.getElementsByTagName().

Contoh 1

Kita bisa memanipulasi input dari DOM dan menampilkan output ke DOM. Untuk memanipulasi input dari DOM, kita bisa menggunakan document.querySelector().

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DOM Input dan Output</title>
  </head>
  <body>
    <input type="text" />
    <button>Submit</button>
    <p></p>
    <script src="index.js"></script>
  </body>
</html>

index.js

const input = document.querySelector("input");
const button = document.querySelector("button");
const p = document.querySelector("p");
 
button.addEventListener("click", function () {
  const value = input.value;
  p.innerHTML = value;
});

Contoh 2

Kita bisa memanipulasi input dari DOM dan menampilkan output ke DOM. Untuk memanipulasi input dari DOM, kita bisa menggunakan document.getElementById().

index.html

<!DOCTYPE html>
 
<html lang="en">
  <head>
    <title>DOM Input dan Output</title>
  </head>
  <body>
    <input id="input" type="text" />
    <button id="button">Submit</button>
    <p id="p"></p>
    <script src="index.js"></script>
  </body>
</html>

index.js

const input = document.getElementById("input");
const button = document.getElementById("button");
const p = document.getElementById("p");
 
button.addEventListener("click", function () {
  const value = input.value;
  p.innerHTML = value;
});

Contoh 3

Membuat output dari 2 input.

index.html

<!DOCTYPE html>
 
<html lang="en">
  <head>
    <title>DOM Input dan Output</title>
  </head>
  <body>
    <input id="input1" type="text" />
    <input id="input2" type="text" />
    <button id="button">Submit</button>
    <p id="p"></p>
    <script src="index.js"></script>
  </body>
</html>

index.js

const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
 
const button = document.getElementById("button");
const p = document.getElementById("p");
 
button.addEventListener("click", function () {
  const value1 = input1.value;
  const value2 = input2.value;
  p.innerHTML = value1 + " " + value2;
});

DOM Intro Intro