Mengetahui Keunggulan menggunakan Query Selector di Javascript -

Jadi untuk menjawab pertanyaan dari murid, karena ketika kita ingin meng otak-atik sebuah website yang kita harus lakukan adalah memanggil sebuah tagnya, sama halnya seperti kita ingin menstyle dengan css ya, dan dimana ketika kita menggunakan javascript, ada banyak cara untuk memanggil sebuah elementnya, jadi kemarin juga ada yang tanya, jadi pakai yang mana ya, pak enaknya, jawabanya seterah menurut saya, sama saja, tetapi disini saya akan mencoba memberi tau dan mengetahui keunggulan menggunakan query selector di javascript, jadi maksudnya seperti apa perhatikan terus ya teman-teman.

Oke jadi untuk mengetahui keunggulan menggunakan query selector di javascript, saya akan mencontohkan nya dengan menggunakan cara lain, jadi ketika kita menggunakan document.getElementById, document.getElementsByClassName, document.getElementsByTagName, itu semua bisa, tetapi yang membedakannya dengan cara itu kita harus menyesuaikan ya, jadi harus ada id, class, terleih dahulu, dan cara pemanggilan class, tagname, tidak bisa memanggil untuk id, begitupun sama dengan yang lain, tetapi disini di javascript ada salah satu yang bisa memanggil semua layaknya seperti jquery, jika teman-teman sudah pernah belajar jquery ya, pasti tau saat kita memanggil sebuah tagnya yaitu dengan $(“#id”), $(“.class”) jadi seperti, sama teman-teman, jadi dengan document.querySelector() kita bisa menggunakan seperti jquery itu, yang membedakan adalah jadi lebih panjang ya. oke sekarang kita lihat contoh kodenya:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mengetahui Keunggulan menggunakan Query Selector di Javascript</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1 class="text-center">Mengetahui Keunggulan menggunakan Query Selector di Javascript</h1>
				<p class="contohClass text-primary">contoh Class</p>
				<p id="contohId" class="text-danger">contoh ID</p>
				<h4>Tanpa Atribute</h4>
			</div>	
		</div>		
	</div>
	<script type="text/javascript">
		var classNode = document.getElementsByClassName("contohClass")
		var idNode = document.getElementById("contohId")
		var tagNode = document.getElementsByTagName("h4")
		var selectorClass = document.querySelector(".contohClass")
		var selectorId = document.querySelector("#contohId")
		var selectorTag = document.querySelector("h4")

		var selectorAllp = document.querySelectorAll("p")

		console.log(classNode[0])
		console.log(idNode)
		console.log(tagNode[0])

		console.log(selectorClass)
		console.log(selectorId)
		console.log(selectorTag)
		console.log(selectorAllp[1])
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Mengetahui Keunggulan menggunakan Query Selector di Javascript</title>

</head>

<body>

<h1 class="text-center">Mengetahui Keunggulan menggunakan Query Selector di Javascript</h1>

<p class="contohClass text-primary">contoh Class</p>

<p id="contohId" class="text-danger">contoh ID</p>

<h4>Tanpa Atribute</h4>

</div>

var classNode = document.getElementsByClassName("contohClass")

var idNode = document.getElementById("contohId")

var tagNode = document.getElementsByTagName("h4")

var selectorClass = document.querySelector(".contohClass")

var selectorId = document.querySelector("#contohId")

var selectorTag = document.querySelector("h4")

var selectorAllp = document.querySelectorAll("p")

console.log(classNode[0])

console.log(idNode)

console.log(tagNode[0])

console.log(selectorClass)

console.log(selectorId)

console.log(selectorTag)

console.log(selectorAllp[1])

</script>

</body>

</html>

disini saya akan mencotohkannya atau lihat hasilnya dengan sebuah console.log ya teman-teman. dan bisa di lihat jika kita menggunakan sebuah class dan tagname, kita harus sepesifik memberikan class index keberapa yang ingin kita esekusi, sama tag juga, karena apa, karena class dan tag tidak hanya satu, begitupun querySelector, jika lebih dari satu, kita bisa menambahkan ALL, seperti di atas, silahkan teman-teman lihat di atas, dan lihat hasilnya disini

Oke sudah sedikit paham ya teman-teman, dan saya rasa cukup sampai disini mengetahui keunggulan menggunakan query selector di javascript semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Mengetahui Keunggulan menggunakan Query Selector di Javascript

Facebook DUMET School

Categories