== $ 0 (ศูนย์เท่ากับศูนย์ดอลลาร์) หมายความว่าอะไรในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome เมื่อฉันเลือกองค์ประกอบฉันเห็น ==$0ถัดจากองค์ประกอบที่เลือก นั่นหมายความว่าอย่างไร?

มันเป็นดัชนีโหนด DOM ที่เลือกล่าสุด Chrome กำหนดดัชนีให้กับแต่ละโหนด DOM ที่คุณเลือก ดังนั้น$0จะชี้ไปที่โหนดสุดท้ายที่คุณเลือกเสมอและ$1จะชี้ไปที่โหนดที่คุณเลือกก่อนหน้านั้น ลองคิดดูว่ามันเป็นปมของโหนดที่เลือกล่าสุด

เป็นตัวอย่างพิจารณาดังต่อไปนี้

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

ตอนนี้คุณเปิด devtools คอนโซลที่เลือก#sunday, #mondayและ#tuesdayในลำดับที่กล่าวถึงคุณจะได้รับรหัสที่ชอบ:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

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

angular.element($0).scope()

Voila คุณสามารถเข้าถึงขอบเขตโหนดผ่านทางคอนโซล

$ 0 ส่งคืนองค์ประกอบที่เลือกล่าสุดหรือวัตถุ JavaScript $ 1 ส่งคืนองค์ประกอบที่เลือกล่าสุดเป็นอันดับสองและอื่น ๆ

อ้างอิง: การอ้างอิงCommand Line API

คำตอบอื่น ๆ ที่นี่อธิบายอย่างชัดเจนว่ามันหมายถึงอะไรฉันชอบที่จะอธิบายการใช้งาน

คุณสามารถเลือกองค์ประกอบในelementsแท็บและสลับไปที่consoleแท็บในโครเมี่ยม เพียงพิมพ์$0 or $1หรือหมายเลขใดก็ตามและกด Enter และองค์ประกอบจะปรากฏในคอนโซลสำหรับการใช้งานของคุณ

นี่คือคำใบ้ของ Chrome ที่จะบอกคุณว่าถ้าคุณพิมพ์ $ 0 บนคอนโซลมันจะเทียบเท่ากับองค์ประกอบนั้น ๆ

ภายใน Chrome จะรักษาสแต็กโดยที่ $ 0 เป็นองค์ประกอบที่เลือก $ 1 คือองค์ประกอบที่ถูกเลือกครั้งสุดท้าย $ 2 จะเป็นองค์ประกอบที่เลือกไว้ก่อนหน้า $ 1 และต่อไปเรื่อย ๆ

นี่คือแอปพลิเคชั่นบางส่วน:

• การเข้าถึงองค์ประกอบ DOM จากคอนโซล: $ 0
• การเข้าถึงคุณสมบัติจากคอนโซล: $ 0.parentElement
• การอัพเดตคุณสมบัติของพวกเขาจากคอนโซล: $ 1.classList.add (... )
• การอัปเดตองค์ประกอบ CSS จากคอนโซล: $ 0.styles.backgroundColor = "aqua"
• ทริกเกอร์เหตุการณ์ CSS จากคอนโซล: $ 0.click ()
• และทำสิ่งที่ซับซ้อนมากขึ้นเช่น$ 0.appendChild (document.createElement ("div"))

ดูการกระทำทั้งหมดนี้:

คำสั่งสนับสนุน:

ฉันจะบอกว่ามันเป็นเพียงชวเลขไวยากรณ์เพื่อรับการอ้างอิงขององค์ประกอบ HTML ในช่วงเวลาการแก้จุดบกพร่อง, normaly งานประเภทนี้จะดำเนินการโดยวิธีการเหล่านี้

document.getElementById , document.getElementsByClassName , document.querySelector

ดังนั้นการคลิกที่องค์ประกอบ html และรับตัวแปรอ้างอิง ($ 0) ในคอนโซลเป็นการประหยัดเวลาอย่างมากในระหว่างวัน