Mendapatkan Nama Class HTML getElementsByClassName DOM
 |
| Ilustrasi getElementsByClassName DOM HTML |
Parameter: membutuhkan sebuah method yang hanya mengambil satu parameter saja, yang merupakan string yang mengandung nama class spasi terpisah dari elemen yang akan dicari. Untuk pencarian dengan multi nama class, maka harus dipisahkan dengan karakter spasi.
Catatan: dapat digunakan properti length untuk mengembalikan nilai koleksi dari semua elemen html pada dokumen untuk nama class spesifik dan dilakukan looping sepanjang elemen html tersebut, sehingga bisa menemukan informasi yang dibutuhkan.
<!DOCTYPE html>
<html>
<head>
<title>
Method getElementByClassName() DOM
</title>
<style>
h1
{
color: green;}
body
{
text-align: center;}
.example
{
padding: 10px;
margin: auto;
margin-top: 10px;
border: 1px solid black;
width: 300px;}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Method getElementByClassName() DOM
</h2>
<div>
<h4 class="example">
div1
</h4>
<h4
class="yellowBorder example">
div2
</h4>
<h4 class="greenBorder example">
div3
</h4>
<h4 class="example">
div4
</h4>
</div>
<script>
document.getElementsByClassName('greenBorder example')[0].style.border =
"10px solid green";
document.getElementsByClassName('yellowBorder example')[0].style.border =
"10px solid yellow";
</script>
</body>
</html>
Blog Elfan
Method getElementByClassName() DOM
div1
div2
div3
div4
<!DOCTYPE html>
<html>
<head>
<title>
Method getElementByClassName() DOM
</title>
<style>
h1
{
color: green;}
body
{
text-align: center;}
button
{
background-color: black;
color: white;
width: 300px;
padding: 10px;
margin: 10px;
cursor: pointer;}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Method getElementByClassName() DOM
</h2>
<div>
<button
onclick="red()"
class="black red">
Klik untuk mengubah tombol
merah
</button>
<br>
<button
onclick="blue()"
class="black blue">
Klik untuk mengubah tombol
biru
</button>
<br>
<button
onclick="yellow()"
class="black yellow">
Klik untuk mengubah tombol
biru
</button>
<br>
<button
onclick="black()">
Klik untuk mengubah semua
tombol ke initial statenya
</button>
</div>
<script>
function red()
{
document.getElementsByClassName('red')[0]
.style.backgroundColor = 'red';
}
function blue()
{
document.getElementsByClassName('blue')[0]
.style.backgroundColor = 'blue';
}
function yellow()
{
document.getElementsByClassName('yellow')[0]
.style.backgroundColor = 'yellow';
}
function black()
{
var elements = document.getElementsByClassName('black');
for(var i = 0; i < elements.length; i++)
{elements[i].style.backgroundColor = 'black';}
}
</script>
</body>
</html>
Blog Elfan
Method getElementByClassName() DOM
- 3 Contoh Penggunaan Properti Image Collection DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti Implementation DOM pada HTML [klik]
- 2 Contoh Penggunaan Method importNode() DOM pada HTML [klik]
- Cara Penggunaan Properti inputEncoding DOM pada HTML [klik]
- Cara Penggunaan Properti lastModified DOM pada HTML [klik]
- 3 Contoh Penggunaan Link Collection pada DOM HTML [klik]
- Cara Penggunaan Method normalize() DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method getElementByClassName() DOM pada html?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan method getElementByClassName() pada dom html:
Hapus1. Google Chrome 4.0
2. Internet Explorer 9.0
3. Microsoft Edge 12.0
4. Firefox 3.0
5. Opera 9.5
6. Safari 3.1
Apa fungsi method getElementByClassName() pada dom html?
BalasHapusMethod getElementsByClassName() berfungsi untuk mengembalikan kumpulan dari semua elemen dalam dokumen dengan class name yang telah ditentukan sebagai object dari HTMLcollection.
HapusObject HTMLcollection mewakili kumpulan dari node yang dapat diakses dengan nomor indeks tertentu.
Method getElementByClassName() merupakan interface dari dokumen yang digunakan untuk mengembalikan object seperti array dari semua elemen child yang memiliki semua name class yang telah diberikan sebelumnya. Ketika dipanggil, dokumen akan dilakukan pencarian secara menyeluruh, termasuk juga root node.
Hapus