การเชื่อมต่อเมธอดและคุณสมบัติเป็นสายโซ่ใน JavaScript

สมมติว่าเรามีอินพุต:

html<input id="elem" value="text">

มาแสดงข้อความในอินพุตออกทางหน้าจอกัน:

javascriptlet elem = document.querySelector('#elem');
console.log(elem.value); // แสดงผล 'text'

อย่างที่คุณเห็น อันดับแรกเราได้องค์ประกอบ จาก id ของมัน บันทึกองค์ประกอบนี้ ลงในตัวแปร elem จากนั้นจึงแสดง คุณสมบัติ value จากตัวแปรนี้ออกทางหน้าจอ

จริงๆ แล้วเราสามารถไม่ต้องใส่ตัวแปร elem ก็ได้ แต่สร้างสายโซ่ด้วยจุดแบบนี้:

javascriptconsole.log( document.querySelector('#elem').value ); // แสดงผล 'text'

ในลักษณะเดียวกัน - เป็นสายโซ่ - เราสามารถทำการ เขียนทับแอตทริบิวต์ได้:

javascriptdocument.querySelector('#elem').value = 'www';

html<img id="image" src="avatar.png">

javascriptlet image = document.querySelector('#image');
console.log(image.src);