Pendahuluan
DOM adalah sebuah bahasa pemrogaman dari Javascript karena suatu perkembangan dari bahasa Javascript ini. DOM ini mempunyai kepanjangan yaitu Document Object Model yang berkaitan dengan object dari element manapun. Dan pada kali ini kita lagi berada di series DOM Selection yang dimana DOM Selection ini berguna untuk mengambil sebuah elemen seperti class,id,tag dan lain-lain. Oleh karena itu ada bermacam-macam syntax atau query untuk memanggil itu semua
- document.getElementById(); : untuk mengambil ID dari HTML
- document.getElementsByTagName(); : untuk mengambil Tag dari HTML
- document.getElementsByClassName() : untuk mengambil Class dari HTML
- document.querySelector() : untuk mengambil semua element HTML
- document.querySelectorAll() : untuk mengambil semua element HTML tergantung pada pemanggilannnya
Alat & Bahan
- Laptop
- Code Editor
Langkah-langkah
- Berikut fungsi untuk document.getElementById(), document.getElementsByTagName(), document.getElementsByClassName()
- Maka akan tampil seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar DOM Selection</title>
<style>
* {
border: 2px solid #dedede;
padding: 15px;
margin: 15px;
}
html {
margin: 0;
padding: 0;
}
body {
max-width: 600px;
margin: 30px auto;
font-family: sans-serif;
color: #333;
}
</style>
</head>
<body>
<h1 id="judul">Hello World</h1>
<div class="container">
<section id="b">
<p class="p1">paragraf 1</p>
<a href="">Saya</a>
<p class="p2">paragraf 2</p>
<p class="p3">paragraf 3</p>
</section>
<section id="b">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
<style>
* {
border: 2px solid #dedede;
padding: 15px;
margin: 15px;
}
html {
margin: 0;
padding: 0;
}
body {
max-width: 600px;
margin: 30px auto;
font-family: sans-serif;
color: #333;
}
</style>
// dom selection
const judul = document.getElementById('judul');
judul.style.color = 'red';
judul.style.backgroundColor = '#ccc';
judul.innerHTML = 'Sofronius';
// documenttagname
const p = document.getElementsByTagName('p');
for (let i = 0; i < p.length; i++) {
p[i].style.backgroundColor = ' lightblue';
}
const h1 = document.getElementsByTagName('h1')[0];
h1.style.fontSize = '50px';
// class name
const p1 = document.getElementsByClassName('p1')[0];
p1.innerHTML = 'ini diubah boss';
- Berikut fungsi untuk document.querySelector(),document.querySelectorAll()
- Maka akan tampil seperti ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar DOM Selection</title>
</head>
<body>
<h1 id="judul">Hello World</h1>
<div class="container">
<section id="a">
<p class="p1">paragraf 1</p>
<a href="">Saya</a>
<p class="p2">paragraf 2</p>
<p class="p3">paragraf 3</p>
</section>
<section id="b">
<p>paragraf 4</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
<style>
* {
border: 2px solid #dedede;
padding: 15px;
margin: 15px;
}
html {
margin: 0;
padding: 0;
}
body {
max-width: 600px;
margin: 30px auto;
font-family: sans-serif;
color: #333;
}
</style>
const sectionB = document.querySelector('section#b');
const p4 = sectionB.getElementsByTagName('p')[0];
p4.style.backgroundColor = 'red';
Kesimpulan
Dari berbagai sintaks yang ada diatas tadi berfungsi untuk melakukan pemgambilan terhadap object pada HTML
Penutup
Sekian untuk
0 Comments