Cara menggunakan get element value javascript

DOM (Document Object Model) Selector digunakan untuk menyeleksi elemen dari suatu halaman web. perhatikan script dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>Sample DOM</title>
</head>
<body>
<header>
<h3>Blog pembelajaran Javascript</h3>
</header> <section id="content">
<div id="sidebar" class="sidebar-left">
<h3 class="title">Categories</h3>
<ul>
<li>Pemrograman</li>
<li>Permainan</li>
<li>Sport</li> <li>Umum</li>
</ul>
<img src="banner.jpg" alt="" /> </div>
<div id="article">
<h3 class="title">Mengenal DOM</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit dolorem fugit magni totam vel iste eius voluptates laborum ullam doloremque, vero iusto, suscipit cumque. Hic nulla tempora ratione, est consequuntur! </p>
</div>
</section> 
</body>
</html>

Pada script diatas, kita memiliki beberapa elemen yang terdiri dari heading, list, image, paragraph, dll. Bagaimanakah caranya kita menyeleksi tulisan ‘Sport’ pada list diatas dengan menggunakan javascript? atau Bagaimana caranya kita mengganti judul ‘Mengenal DOM’ dengan menggunakan javascript?

Untuk menjawab semua pertanyaan diatas, terlebih dahulu kita harus melakukan proses penyeleksian elemen. Dimana proses tersebut bertujuan untuk melakukan modifikasi seperti merubah attribut, menambahkan class, merubah style, text dan masih banyak lagi perubahan yang bisa kita lakukan. Untuk melakukan proses tersebut maka dibutuhkan suatu pengenal atau identitas dari suatu elemen yang bisa kita sebut sebagai DOM Selector.

Dalam artikel sebelumnya, saya pernah menulis tentang CSS Selector. Apa itu CSS Selector? Bagaimana cara kerjanya? Hubungannya apa sama DOM Selector? biar gak penasaran, rekan-rekan bisa kunjungi link berikut ini untuk mempelajari kembali CSS Selector.

Pada Javascript DOM Selector bisa kita lakukan dengan beberapa cara, diantaranya :

Get Element by ID
Get Element by ID digunakan untuk menyeleksi elemen dengan menggunakan ID pada element tersebut. Sintaks yang digunakan adalah :
```
document.getElementById('nama Id')
```
Sintaks diatas akan mengembalikan nilai null jika tidak terdapat elemen dengan id tersebut. Contoh penggunaan :
```
var sidebar = document.getElementById("sidebar");
sidebar.style.width="33%"; // mengganti properti width menjadi 33%
```
Catatan : element ID harus unik dalam satu halaman web. Jika terdapat beberapa elemen dengan id yang sama, maka salah satunya tidak akan di proses. Berbeda halnya jika kita menggunakan iframe, karena iframe itu pada dasarnya menggunakan halaman yang berbeda
Get Element by Class Attribute
Get Element by Class digunakan untuk menyeleksi elemen dengan menggunakan Class pada suatu elemen. Sintaks yang digunakan adalah :
```
document.getElementsByClassName('namaKelas')
```
Photo by KOBU Agency on Unsplash
Sintaks diatas akan menyeleksi semua elemen yang memiliki class dengan nama ‘namaKelas’. Selector ini akan mengembalikan/return berupa list/collection dalam bentuk array. Masih ingat dengan materi class dalam pembelajaran css? value class dalam sebuah elemen bisa terdiri dari beberapa class dipisahkan dengan koma. contohnya : “aa abb”, ini berarti elemen ini memiliki class “aa” dan juga “bb”. Perhatikan contoh dibawah ini:
```
<p class="aa">1</p>
<p class="bb">2</p>
<p class="bb aa">3</p>
<p class="bb cc aa">4</p>
<script>
//elemen yang akan terseleksi adalah 3 dan 4
var seleksi = document.getElementsByClassName("aa bb");
//jika kita ingin menyeleksi nomer 3 saja, kemudian merubah warnanya menjadi merah
seleksi[0].style.color = "red"
</script>
```
Get Element by Name
Get element by Name digunakan untuk menyeleksi elemen berdasarkan attribute name pada elemen/tag (name=”name_value“) Sintaks yang digunakan adalah :
```
document.getElementsByName('Name')
```
Seperti halnya getElementbyClassName, selector ini juga akan mengembalikan/return berupa list/collection dalam bentuk array.
perhatikan contoh html dibawah ini :
```
<p name="abc">1</p>
<div class="zz" name="xyz">2</div>
<div class="zz" name="xyz">3</div>
<form> 
input name="xyz" type="text" size="20">
</form>
```
berikut ini kode javascript yang akan kita buat untuk menyeleksi elemen dengan nama “xyz” yang terletak pada elemen kedua.
```
var xyz = document.getElementsByName("xyz");
xyz[1].style.color="red"; // make the first one red
```
Get Element by Tag Name
Get element by tag name digunakan untuk menyeleksi elemen berdasarkan nama tag/elemen pada HTML. contoh nama tag yang sering kita jumpai misalnya : div,header,footer,section, ol, li, dll. Sintaks yang digunakan adalah :
```
document.getElementsByTagName('Name')
```
Seperti halnya selector sebelumnya, selector ini juga akan mengembalikan/return berupa list/collection dalam bentuk array. perhatikan contoh dibawah ini :
```
var list = document.getElementsByTagName("p"); // menyeleksi semua tag P
list.length; // menghitung jumlah elemen p pada halaman HTML
list[0].style.color = "red"; // menyeleksi paragraf yang pertama dan merubah warnanya menjadi merah
```
Catatan : getElementsByClassName, getElementsByName, adan getElementsByTagName tidak bersifat unik, sehingga dalam satu halaman biasanya ditemukan beberapa elemen dengan key tersebut. Oleh karena itu, jika kita menggunakan selector ini, maka return yang dikembalikan berupa list array.
Get Elements by CSS Selector
Get element by CSS Selector menyeleksi elemen dengen menggunakan CSS Selector. Sintaks yang digunakan untuk menyeleksi elemen denganCSS Selector ini adalah:
```
document.querySelector(css_selector)
```
sintaks diatas digunakan untuk menyeleksi elemen pertama yang menggunakan CSS selector yang kita gunakan.
```
document.querySelectorAll(css_selector)
```
sedangkan sintaks diatas digunakan untuk menyeleksi semua elemen menggunakan CSS selector yang kita gunakan.
Perhatikan contoh berikut ini :

Demikianlah penjelasan mengenai DOM Selector pada Javascript. jika rekan-rekan mendapatkan kesalahan atau sekedar ingin menyampaikan pertanyaan terkait materi diatas, silakan kirim melalui form disquss dibawah ini. Dengan senang hati saya akan menerimanya.

Terima Kasih

kode javascript

Cara menggunakan get element value javascript

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social