Javascript จะถูกดำเนินการตามลำดับจากบนลงล่าง โค้ด Javascript จะไม่รอจนกว่าจะโหลดเพจก่อนจึงจะดำเนินการ ตัวอย่างเช่น หน้าเว็บมีโค้ด HTML ต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="ele">ยินดีต้อนรับสู่ www.VeVB.COm</div>
หากคุณเพิ่มโค้ด Javascript ต่อไปนี้ก่อนบรรทัดโค้ด HTML นี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
document.getElementById('ele').innerHTML= 'ยินดีต้อนรับสู่บล็อกของฉัน';
</สคริปต์>
เรียกใช้เพจแล้วคุณจะได้รับข้อความแสดงข้อผิดพลาด: "document.getElementById('ele') is null" เหตุผลก็คือเมื่อเรียกใช้ javascript ข้างต้น จะไม่มีองค์ประกอบ DOM ที่มี ID 'ele' บนเพจ
มีสองวิธีแก้ไข:
1. วางโค้ดจาวาสคริปต์หลังโค้ด HTML:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="ele">ยินดีต้อนรับสู่ www.VeVB.COm</div>
<script type="text/javascript">
document.getElementById('ele').innerHTML='ยินดีต้อนรับสู่บล็อกของฉัน';
</สคริปต์>
2. รอจนกระทั่งหน้าเว็บโหลดแล้วจึงเรียกใช้โค้ดจาวาสคริปต์ คุณสามารถใช้วิธีแก้ปัญหาแบบดั้งเดิม (โหลด) ได้ โดยเพิ่มส่วนเนื้อหา HTML ก่อนและเพิ่ม "<body load="load()">," จากนั้นเรียกใช้โค้ดจาวาสคริปต์ด้านบนในฟังก์ชัน load() สิ่งที่ฉันต้องการเน้นที่นี่คือการใช้ jQuery เพื่อให้บรรลุ:
คัดลอกรหัสรหัสดังต่อไปนี้:
<สคริปต์>
$(เอกสาร).ready(function(){
document.getElementById('ele').innerHTML= 'ยินดีต้อนรับสู่บล็อกของฉัน';
-
</สคริปต์>
//แน่นอน เนื่องจากมีการใช้ jQuery วิธีเขียนที่ง่ายกว่าคือ:
<สคริปต์>
$(เอกสาร).ready(function(){
$('#ele').html('welcome to my blog'); //The .text() method มีอยู่ที่นี่เช่นกัน
-
</สคริปต์>
คุณสามารถวางโค้ด jQuery ข้างต้นไว้ที่ใดก็ได้บนเพจ และโค้ดจะรอจนกว่าเพจจะโหลดก่อนจึงจะดำเนินการ