30 Hari Belajar JavaScript : Hari Ke 25 (JavaScript DOM Part : 3)

Halo! Semuanya selamat datang kembali diseries 30haribelajarjavascript. Pada hari ke 25 ini kita akan melanjutkan pembahasan JavaScript DOM Part 3. Langsung saja meluncur!

NamedNodeMap

NamedNodeMap merepresentasikan kumpulan object attribute. Object di dalam NamedNodeMap tidak memiliki urutan tertentu, tidak seperti pada NodeList, meskipun mereka dapat diakses dengan indeks seperti pada Array.

Objek NamedNodeMap bersifat live dan dengan demikian akan diperbarui secara otomatis jika ada perubahan pada isinya baik secara internal maupun di tempat lain.

<img src="https://wallpaperaccess.com/full/1600334.jpg" alt="ini-gambar" id="gambar">
<script>
      const gambar = document.getElementById("gambar")
      const attributes = gambar.attributes
      for (let attribute of attributes) {
            console.info(`${attribute.name} ${attribute.value}`)
       }
 </script>

NamedNodeMap

TextNode

Saat kita membuat dokumen HTML, kadang kita membuat teks tanpa tag Saat halaman web tersebut direpresentasikan dalam DOM, text tanpa tag bukanlah merupakan Element, melainkan Node. Lebih tepatnya adalah TextNode.

 Triton
       <script>
              const text = document.body.firstChild
              console.info(text)
       </script>

TextNode

Namun kita juga bisa membuat textNode sendiri menggunakan method document.createTextNode(string)Hasilnya berupa Text yang bisa kita tambahkan ke Node lain pada dokumen HTML.

<script>
       const text = document.createTextNode("Mitsubishi Triton")
       document.body.appendChild(text)
 </script>

Created TextNode

Event Handler

Node memiliki kemampuan bereaksi terhadap suatu event, misalkan event di klik mouse di atas node tersebut dan lain-lain. Ada banyak sekali jenis event yang bisa kita buatkan aksinya ketika event tersebut terjadi atau bahasa kerennya mah adalah Event Handler.

Nah ternyata! Ada dua cara untuk menambahkan Event Handler ke Node, menggunakan Event Target atau Global Event Handler. Perbedaan tersebut ialah.

Jika kita menggunakan Event Target, kita bisa menggunakan method addEventListener(type, callback) untuk menambahkan Event Handler. Event Target sendiri merupakan parent class dari Node, artinya semua Node memiliki kemampuan dari Event Target.

<input id="clickThisButton" type="button" value="Click Me"></input>
<script>
      const clickThisButton = document.getElementById("clickThisButton")
      clickThisButton.addEventListener("click", function () {
      clickThisButton.setAttribute("value", "Button has been Clicked")
      })
 </script>

before Click

After Click

Apabila, kita menggunakan Global event handler untuk menambahkan event handler, maka hanya kontrak yang bisa kita gunakan untuk menambah event handler sesuai dengan type event nya. Hal ini dikarenakan Global Event Handler bukanlah sebuah superclass.

 <input id="clickThisButton" type="button" value="Click Me"></input>
 <script>
      const clickThisButton = document.getElementById("clickThisButton")
      clickThisButton.onclick = ("click", function () {
      clickThisButton.setAttribute("value", "Button has been Clicked")
       })
  </script>

Event

Dari tadi kita sudah berdiskusi tentang Event, tapi sampai sekarang kita belum berkenalan dengan apa itu Event ? :v

Jadi DOM sendiri itu memiliki banyak sekali jenis event, tidak hanya click yang baru-baru ini kita pelajari. Jenis event yang bisa kita gunakan biasanya disesuaikan dengan target event nya, misalkan pada element video, ada event play, pause, sedangkan pada element button, tidak ada event play atau pause.

Kemudian Saat kita membuat callback function untuk Event Handler, kita juga bisa menerima data event yang memicu event itu terjadi atau bahasa kerennya mah trigger event :v . Data Event tersebut bisa berbeda-beda, tergantung jenis Event nya, contohnya untuk click, data event nya berupa Mouse Event (yang berisi lokasi mouse dan lain-lain.

<h1 id="text">Click This Box</h1>
<div id="box" style="width: 100px; height: 100px; background-color: orange;"></div>
<script>
     const text = document.getElementById("text")
     const box = document.getElementById("box")
     box.onclick = function (event) {
          text.textContent = `You click at ${event.x}, ${event.y}`
     }
 </script>

get coordinate when you clicked this box

Style

Seperti yang sudah kita ketahui bahwa, dengan DOM kita bisa manipulasi seluruh konten dalam halaman website, salah satunya ialah attribute style.

Menariknya adalah Kita tidak perlu menggunakan setAttribute("style","value:) setiap ingin melakukan manipulasi attribute style dari sebuah element, melainkan kita bisa menggunakan element.style.name=value Mantap sekali bukan? Bukan!

Namun yang perlu kita perhatikan ialah, saat mengubah sebuah style, penamaan style menjadi berubah. Pada style css, rata-rata menggunakan format lowercase dan -, misalkan background-color. Sedangkan pada DOM Style, menggunakan format pascalCase, misalkan backgroundColor. Oke:v

<input type="button" value="red">
<input type="button" value="yellow">
<input type="button" value="green">
<div id="box" style="width:100px; height: 100px; background-color: purple;"></div>

<script>
     const box = document.getElementById("box")
     const allButtons = document.querySelectorAll("input")
     for (const button of allButtons) {
          button.onclick = function () {
          button.style.backgroundColor = button.getAttribute("value")
          }
      }
</script>

When your click button, button has been changed color

Hai! Perkenalkan nama saya Bahrul Rozak, saat ini saya masih berstatus sebagai Mahasiswa di salah satu perguruan tinggi swasta di Jakarta. Selain sebagai mahasiswa saya memiliki pengalaman di bidang Web Development khususnya Back End Development .

Saya harap artikel yang saya buat ini dapat membantu Anda untuk menjadi Web Developer yang handal.

# Selamat belajar dan selamat berkarya!

# See my art

https://github.com/Bahrul-Rozak

# See my professional experience

https://www.instagram.com/rozak.developer/