home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

querySelector JavaScript:A Guide

getElementById . getElementByClass . คุณอาจเคยได้ยินเกี่ยวกับฟังก์ชันเหล่านี้มาก่อน ทั้งคู่อนุญาตให้คุณเลือกองค์ประกอบเฉพาะใน JavaScript

เมื่อคุณเลือกองค์ประกอบแล้ว คุณสามารถเปลี่ยนเนื้อหา แก้ไขสถานะ หรือแม้แต่ทำให้หายไปได้

มีฟังก์ชันอื่นที่คุณสามารถใช้เลือกรายการบนหน้าเว็บใน JavaScript:querySelector . ฟังก์ชันนี้มีน้องสาวชื่อ querySelectorAll ซึ่งส่งคืนองค์ประกอบทั้งหมดที่ตรงกับข้อความค้นหาหนึ่งๆ

ในคู่มือนี้ เราจะพูดถึงวิธีใช้ querySelector และ querySelectorAll วิธีการ เราจะอธิบายตัวอย่างของวิธีการเหล่านี้ในการใช้งานจริง เพื่อให้คุณพร้อมใช้ในโค้ดของคุณ

querySelector คืออะไร

querySelector เป็นฟังก์ชันที่ส่งคืนองค์ประกอบที่ตรงกับการสืบค้น CSS สังเกต querySelector เมธอดจะคืนค่าอินสแตนซ์แรกของตัวเลือกเท่านั้น เมื่อใช้ querySelector คุณสามารถระบุตัวเลือก CSS ใดก็ได้ที่คุณต้องการ ตัวอย่างเช่น คุณสามารถดึงองค์ประกอบที่มีชุดรหัสเฉพาะ หรือองค์ประกอบตามชื่อแท็ก

คุณสามารถใช้ฟังก์ชันนี้ได้ดังนี้:

var elementName = document.querySelector('#thisElement');

เราได้ระบุตัวเลือก CSS เพื่อให้ตรงกับเครื่องหมายคำพูด นอกจากนี้ คุณสามารถใช้วิธีการเพื่อเลือกองค์ประกอบภายในองค์ประกอบอื่นได้:

var parentElement = document.querySelector('main');
var childElement = document.querySelector('#childElement');

สิ่งนี้จะส่งคืนองค์ประกอบด้วย ID #childElement ซึ่งอยู่ภายในแท็ก

ในไฟล์ HTML ของเรา

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

querySelectorAll วิธีการทำงานในลักษณะเดียวกัน ข้อแตกต่างคือจะส่งกลับค่าที่ตรงกันทั้งหมดที่พบโดยตัวเลือกข้อความค้นหา แทนที่จะเป็นเพียงรายการแรก:

var allParagraphs = document.querySelectorAll('p');

นี่จะส่งคืนรายการแท็ก

ทั้งหมดบนหน้า HTML

ต่อไปนี้คือตัวอย่างบางส่วนของตัวเลือกที่คุณสามารถใช้กับฟังก์ชันนี้ได้

  • p:เลือกแท็ก

    ทั้งหมดบนหน้า

  • #name_field:เลือกองค์ประกอบที่มีรหัส “name_field”
  • .list:เลือกองค์ประกอบทั้งหมดที่มีชื่อคลาส “list”
  • div> p:เลือกทั้งหมด

    องค์ประกอบภายใน

    องค์ประกอบ

คุณสามารถระบุตัวเลือกหลายตัวโดยใช้ querySelector และ querySelectorAll วิธีการ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือก CSS โปรดดูคำแนะนำเกี่ยวกับตัวเลือกแอตทริบิวต์ CSS และ HTML

หากไม่พบรายการที่ตรงกัน ระบบจะคืนค่า null

วิธีใช้ตัวเลือกการค้นหา

มาสร้างเว็บแอปพลิเคชันอย่างง่ายเพื่อแสดงให้เห็นว่า querySelector วิธีการทำงาน เราจะสร้างหน้าเว็บที่แสดงข้อเท็จจริงเกี่ยวกับ HTML เราจะใช้ querySelector เพื่อเพิ่มปุ่มซึ่งเมื่อคลิกแล้วจะเปิดใช้งาน “โหมดมืด”

การตั้งค่าส่วนหน้า

เราจะเริ่มต้นด้วยการตั้งค่าส่วนหน้าสำหรับเพจของเรา:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Facts!</title>
		<link rel="stylesheet" href="./facts.css">
	</head>

	<body>
		<div class="mainBox">
			<h1 class="text">HTML Facts!</h1>
			<p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p>
			<button type="button">Enable dark mode</button>
		</div>
		<script src="./facts.js"></script>
	</body>
</html>

เราได้สร้างหน้าเว็บ HTML แบบง่ายๆ ที่แสดงข้อเท็จจริงเกี่ยวกับ HTML ขณะนี้ หน้าของเรามีลักษณะดังนี้:

querySelector JavaScript:A Guide

แม้ว่าหน้าเว็บของเราจะให้ข้อเท็จจริงเกี่ยวกับ HTML แก่ผู้ใช้ แต่ไม่มีคุณลักษณะหลักสองประการ:สไตล์และปุ่มโหมดมืดที่ใช้งานได้ มาเพิ่มสไตล์ต่อไปนี้ให้กับไฟล์ชื่อ fact.css:

.mainBox {
    margin: auto;
    width: 50%;
    text-align: center;
    background: hotpink;
    padding: 5%;
}

body {
    background: lightblue;
}

button {
    padding: 10px;
    background: lightgreen;
    border-radius: 10px;
    border: none;
}

สไตล์เหล่านี้ทำให้เว็บไซต์ของเราดูสวยงามน่าพึงพอใจยิ่งขึ้น:

querySelector JavaScript:A Guide

นั่นคือทั้งหมดที่เราต้องทำในส่วนหน้า ตอนนี้เราจะเน้นไปที่การเพิ่มโหมดมืดโดยใช้ JavaScript

การเพิ่มโหมดมืดโดยใช้ JavaScript

ฟังก์ชันโหมดมืดของเราควรมีสองคุณสมบัติ:

  • หัวเรื่องและย่อหน้าในกล่องควรเปลี่ยนเป็นสีขาว
  • พื้นหลังสีน้ำเงินของเว็บไซต์ของเราควรเปลี่ยนเป็นสีดำ

เริ่มต้นด้วยการเลือกองค์ประกอบ DOM (องค์ประกอบของหน้าเว็บ) ที่เราต้องการกำหนดเป้าหมาย:ส่วนหัว ย่อหน้า และเนื้อหาหลักของหน้าเว็บของเรา เราจะทำสิ่งนี้ในไฟล์ชื่อ fact.js:

const heading = document.querySelector("h1");
const paragraph = document.querySelector("p");
const body = document.querySelector("body");

รหัสนี้ส่งคืนองค์ประกอบแรกในเอกสารที่มีแท็ก

,

และ ตอนนี้ เราจะสร้างฟังก์ชันที่เปลี่ยนสีของแท็กข้อความและเนื้อหาของเรา เราจะเปลี่ยนข้อความหัวเรื่องและย่อหน้าเป็นสีขาว และพื้นหลังของเว็บไซต์เป็นสีดำ

function enableDarkMode() {
	heading.setAttribute("style", "color: white;");
	paragraph.setAttribute("style", "color: white;");
	body.setAttribute("style", "background-color: black;");
}

เราเกือบจะอยู่ที่นั่นแล้ว ขั้นตอนต่อไปคือการตั้งค่าตัวฟังเหตุการณ์ ผู้ฟังนี้จะฟังทุกครั้งที่ผู้ใช้คลิกปุ่มของเรา เมื่อผู้ใช้คลิกปุ่ม โหมดมืดจะเปิดใช้งาน:

document.querySelector("button").addEventListener("click", enableDarkMode);

ตอนนี้ มาดูกันว่าจะเกิดอะไรขึ้นเมื่อเราคลิกปุ่มของเรา:

querySelector JavaScript:A Guide

เว็บไซต์ของเราเปลี่ยนเป็นโหมดมืดได้สำเร็จ

บทสรุป (และความท้าทาย)

คุณจะสังเกตเห็นว่ารหัสของเราอนุญาตให้ผู้ใช้เปิดใช้งานโหมดมืดเท่านั้น สิ่งที่ช่วยให้? สิ่งนี้นำเสนอความท้าทายสำหรับคุณ:เขียนโค้ดที่จะอนุญาตให้ผู้ใช้ปิดการใช้งานโหมดมืดบนไซต์

querySelector วิธีช่วยให้คุณเลือกองค์ประกอบ HTML ตามแบบสอบถามตัวเลือก CSS เมธอดนี้คืนค่าอินสแตนซ์แรกของการจับคู่ คุณสามารถใช้ querySelectorAll วิธีดึงรายการองค์ประกอบทั้งหมดที่ตรงกับ selector ที่ระบุ

ตอนนี้คุณพร้อมที่จะเริ่มใช้ querySelector เมธอดอย่าง JavaScript pro!