30 Hari Belajar JavaScript : Hari Ke 26 (JavaScript DOM Part : 4)
--
Halo semuanya! Selamat datang kembali di series #30haribelajarjavascript. Pada hari ke 26 ini kita akan melanjutkan kembali materi JavaScript DOM bagian 4. Langsung saja mari kita lanjutkan!
InnerText dan InnerHTML
Mari kita awali series ini dengan pembahasan innerText dan innerHTML. Selain textContent, terdapat property lain bernama innerText untuk mendapatkan isi text dari sebuah element.
Memang tujuan antara textContent dan innerText itu sama, yaitu untuk mengambil atau mengubah isi text konten dari sebuah element, namun walaupun keduanya sama ternyata ada perbedaan yang sangat signifikan diantara keduanya.
Jika kita menggunakan textContent maka beliau ini akan mengembalikan semua isi dari konten text sebuah element. Akan tetapi jika kita menggunakan innerText beliau ini sedikit lebih canggih yaitu beliau bisa tahu, bagian text mana yang ditampilkan dan beliau hanya akan mengambil text yang ditampilkan saja. Wah canggih sekali bukan? Bukan!
<p id="content">
<script>
console.info("Hai!")
</script>
<b>Belajar</b><i> JavaScript</i><b> Bersama Mamang Ozak :v</b>
</p>
<script>
const content = document.getElementById("content")
console.info(content.textContent)
console.info(content.innerText)
</script>
Terlihat sekali perbedaanya bukan? Jika kita menggunakan innerText maka hanya akan menampilkan text saja, bukan keseluruhan kontennya seperti textContent padahal kan console.info(“hai”) harusnya kan diterjemahkan menjadi string hai, ini malah ditampilkan bersama syntaxnya :v
Lantas bagaimana dengan InnerHTML?
Nah kalau inner HTML ini beliay akan mengambil seluruh element HTML nya sebagai text dalam bentuk tipe data string. Beliau ini juga cocok jika kita ingin mengubah isi dari element menggunakan text yang berisi tag HTML. Contohnya seperti ini
<p id="content">
<script>
console.info("Hai!")
</script>
<b>Belajar</b><i> JavaScript</i><b> Bersama Mamang Ozak :v</b>
</p>
<script>
const content = document.getElementById("content")
console.info(content.innerHTML)
</script>
semua tag HTML akan diambil dan direturn dalam bentuk stringnya, mantap sekali bukan? Bukan!
Nah salah satu kemampuan dari innerHTML adalah, kita bisa mengubah isi dari children sebuah element hanya dengan string. Tag yang terdapat di dalam String secara otomatis akan menjadi child element.
<p id="content">
</p>
<script>
const content = document.getElementById("content")
content.innerHTML = "<b>Belajar</b> JavaScript <i> Mamang Ozak</i>"
</script>
Window
Window merupakan representasi window pada browser yang berisikan DOM Document, yaitu struktur representasi dari halaman website yang terdiri dari element-element HTML.
Beberapa fungsi JavaScript sebenarnya berasal dari object Window, seperti alert(), confirm(), dan prompt(). Fungsi-fungsi ini digunakan untuk menampilkan pesan, meminta konfirmasi atau menerima input dari pengguna melalui jendela dialog.
Selain fungsi-fungsi tersebut, ada banyak sekali property, method dan event lain yang bisa kita gunakan pada object Window. Property-property ini mencakup informasi tentang jendela, seperti ukuran, posisi, URL halaman, dan lainnya. Method-method memungkinkan kita untuk melakukan manipulasi terhadap jendela, seperti membuka atau menutup jendela, mengganti URL, dan lain-lain. Sedangkan event adalah interaksi atau kejadian yang terjadi pada Window, seperti mengklik tombol, menggeser Window, atau mengisi formulir.
Hal yang menarik adalah, untuk menggunakan Window, kita tidak perlu secara eksplisit membuat object Window. Window adalah object global yang sudah tersedia secara default di dalam lingkungan JavaScript pada browser. Kita dapat mengaksesnya dengan menggunakan kata kunci “window” tanpa perlu mendeklarasikan object baru. Sebagai contoh, jika kita ingin mengakses property atau memanggil method dari objek Window, kita dapat menggunakan syntax window.property atau window.method
<p id="content">
</p>
<script>
const content = document.getElementById("content")
const width = window.screen.width
const height = window.screen.height
content.textContent = `Window width ${width} Window Heigt ${height}`
</script>
Query Selector
Sebelumnya kita telah menggunakan method querySelectorAll()pada object Document dan sekarang kita akan membahas lebih detail tentang Query Selector.
Query Selector adalah method yang digunakan untuk melakukan seleksi terhadap node-node sesuai dengan pola yang ingin kita cari.
Ada dua method yang dapat digunakan untuk Query Selector:
Yang pertama ialah, menggunakan method document.querySelector() method ini digunakan untuk menyeleksi node pertama yang sesuai dengan pola yang ditentukan.
Yang kedua ialah, menggunakan method document.querySelectorAll() method ini digunakan untuk menyeleksi semua node yang sesuai dengan dengan pola yang ditentukan.
Kemudian pola untuk Query Selector adalah menggunakan CSS Selector. Penggunakan Pola nya mirip ketika kita membuat Selector di CSS seperti universal selector, type selector, class selector, id selector, attribute selector dan lain-lain.
Anda bingung? Apalagi saya :v
Oke mari kita jabarkan satu persatu saja.
Universal Selector
Universal Selector merupakan selector untuk menyeleksi semua element (*). Untuk menggunakan universal selector kita bisa lakukan seperti ini querySelectorAll("*") .
const element = document.querySelectorAll("*")
console.info(element)
Type Selector
Type Selector adalah selector yang digunakan untuk menyeleksi tag type HTML yang kita pilih. Untuk menggunakan type selector, kita bisa langsung sebutkan nama tag nya seperti ini querySelectorAll("tagHTML")
<p>Belajar JavaScript</p>
<script>
const element = document.querySelectorAll("p")
console.info(element)
</script>
Class Selector
Class Selector merupakan selector untuk menyeleksi semua element yang memiliki class yang sesuai selector. Untuk menggunakannya, kita bisa sebutkan nama class nya diawali dengan (“.namaClassnya”) seperti ini querySelectorAll(“.namaClassnya”)
<p class="description">Belajar JavaScript</p>
<script>
const element = document.querySelectorAll(".description")
console.info(element)
</script>
ID Selector
ID Selector merupakan selector yang digunakan untuk menyeleksi id yang sesuai selector. Untuk menggunakannya, kita bisa gunakan nama id diawali dengan karakter #. Contohnya seperti ini querySelectorAll("#namaID"
<p class="description" id="desc">Belajar JavaScript</p>
<script>
const element = document.querySelectorAll("#desc")
console.info(element)
</script>
Attribute Selector
Attribute Selector merupakan selector yang bisa kita gunakan untuk menyeleksi element berdasarkan attribute nya. Kita bisa menggunakan selector [attribute] atau bisa juga untuk tag tertentu, misal menggunakan selector div[attribute]. Seperti ini
querySelectorAll("[class]")
<div class="short">Belajar</div>
<div class="shortTitle">Belajar JavaScript</div>
<script>
const element = document.querySelectorAll("[class]")
console.info(element)
</script>
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
