การเชื่อมต่อเมธอดและคุณสมบัติเป็นสายโซ่ใน JavaScript
สมมติว่าเรามีอินพุต:
<input id="elem" value="text">
มาแสดงข้อความในอินพุตออกทางหน้าจอกัน:
let elem = document.querySelector('#elem');
console.log(elem.value); // แสดงผล 'text'
อย่างที่คุณเห็น อันดับแรกเราได้องค์ประกอบ
จาก id ของมัน บันทึกองค์ประกอบนี้
ลงในตัวแปร elem จากนั้นจึงแสดง
คุณสมบัติ value จากตัวแปรนี้ออกทางหน้าจอ
จริงๆ แล้วเราสามารถไม่ต้องใส่ตัวแปร
elem ก็ได้ แต่สร้างสายโซ่ด้วยจุดแบบนี้:
console.log( document.querySelector('#elem').value ); // แสดงผล 'text'
ในลักษณะเดียวกัน - เป็นสายโซ่ - เราสามารถทำการ เขียนทับแอตทริบิวต์ได้:
document.querySelector('#elem').value = 'www';
โค้ดต่อไปนี้ถูกกำหนดให้:
<img id="image" src="avatar.png">
let image = document.querySelector('#image');
console.log(image.src);
ปรับปรุงโค้ดด้านบนใหม่ โดยให้
ใช้สายโซ่แทนการนำเข้าแอตทริบิวต์ image
