B. Menggunakan DOM (Document Object Model) untuk mengontrol elemen HTML

Document Object Model (DOM) adalah representasi struktur halaman web dalam bentuk tree, sehingga kita bisa mengakses element HTML seperti mengakses properti dari sebuah object. Berikut adalah beberapa cara menggunakan DOM untuk mengontrol elemen HTML:

Mengakses elemen HTML dengan getElementById Untuk mengakses elemen HTML berdasarkan id-nya, kita bisa menggunakan method getElementById. Method ini akan mengembalikan elemen HTML yang memiliki id yang sesuai dengan parameter yang diberikan. Contoh:

<div id="myDiv">Hello World!</div>
<script>
  var div = document.getElementById('myDiv');
  console.log(div); // <div id="myDiv">Hello World!</div>
</script>

Mengakses elemen HTML dengan getElementsByTagName Untuk mengakses elemen HTML berdasarkan tag-nya, kita bisa menggunakan method getElementsByTagName. Method ini akan mengembalikan array yang berisi semua elemen HTML yang memiliki tag yang sesuai dengan parameter yang diberikan. Contoh:

<p>Paragraph 1</p>
<p>Paragraph 2</p>

<script>
  var paragraphs = document.getElementsByTagName('p');
  console.log(paragraphs); // [<p>Paragraph 1</p>, <p>Paragraph 2</p>]
</script>

Mengakses elemen HTML dengan getElementsByClassName Untuk mengakses elemen HTML berdasarkan class-nya, kita bisa menggunakan method getElementsByClassName. Method ini akan mengembalikan array yang berisi semua elemen HTML yang memiliki class yang sesuai dengan parameter yang diberikan. Contoh:

<div class="container">
  <p class="text">Paragraph 1</p>
  <p class="text">Paragraph 2</p>
</div>


<script>
  var texts = document.getElementsByClassName('text');
  console.log(texts); // [<p class="text">Paragraph 1</p>, <p class="text">Paragraph 2</p>]
</script>

Mengubah isi elemen HTML Untuk mengubah isi elemen HTML, kita bisa menggunakan properti innerHTML. Contoh:

<div id="myDiv">Hello World!</div>
<script>
  var div = document.getElementById('myDiv');
  div.innerHTML = 'Hello JavaScript!';
</script>

Mengubah atribut elemen HTML Untuk mengubah atribut elemen HTML, kita bisa menggunakan properti setAttribute. Contoh:

<a id="myLink" href="#">Link</a>
<script>
  var link = document.getElementById('myLink');
  link.setAttribute('href', 'http://example.com');
</script>