5.1 document.getElementById()
ดังที่คุณทราบ JavaScript ถูกสร้างขึ้นเพื่อเพิ่มแอนิเมชั่นให้กับหน้า HTML จนถึงตอนนี้เรายังไม่ได้พูดอะไรมากเกี่ยวกับเรื่องนี้ จะเพิ่มแอนิเมชั่นเดียวกันนี้ได้อย่างไร? ตัวอย่างเช่น จะเปลี่ยนสีขององค์ประกอบได้อย่างไร?
หากต้องการเปลี่ยนสีขององค์ประกอบ คุณต้องค้นหาองค์ประกอบนี้ก่อน ในการทำเช่นนี้ มีฟังก์ชันdocument.getElementById();
ที่คุณเขียนใน HTML ของคุณid
ที่องค์ประกอบที่ต้องการ แล้วเข้าถึงจาก JavaScript ตัวอย่าง:
<head>
<script>
function changeImage()
{
var image = document.getElementById("image123");
image.src = "new-image.png";
}
</script>
</head>
<body>
<img id="image123" scr="big-image.png" onclick="changeImage()">
</body>
หลังจากที่ผู้ใช้คลิกที่รูปภาพแล้ว ฟังก์ชันจะถูกเรียกchangeImge()
ใช้ ภายในนั้น เราได้รับองค์ประกอบimage
ตาม it ID
แล้วเปลี่ยนค่าของแอตทริบิวต์ src เป็นค่าใหม่ ซึ่งจะทำให้องค์ประกอบimg
โหลดภาพใหม่
5.2 document.createElement()
นอกจากจะได้องค์ประกอบแล้ว เรายังสามารถสร้างองค์ประกอบใหม่และลบองค์ประกอบที่มีอยู่ได้อีกด้วย
การสร้างองค์ประกอบทำได้ง่ายมาก ในการทำเช่นนี้ คุณต้องทำสองสิ่ง: ก) สร้างองค์ประกอบข) เพิ่มลงในตำแหน่งที่ถูกต้องในเอกสาร โดยปกติจะมีลักษณะดังนี้:
<head>
<script>
window.onload = function () {
var image = document.createElement("IMG");
var image.src = "big-image.png";
document.body.addAfter(image);
}
</script>
</head>
<body>
</body>
5.3 window.navigate() เมธอด
window.navigate()
อีก วิธีที่มีประโยชน์มากคือ คุณสามารถบังคับให้เบราว์เซอร์โหลดหน้าใหม่แทนหน้าปัจจุบันได้ เพียงแค่ส่งURL
ไปยังวิธีการนี้และเรียกใช้ ตัวอย่าง:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
ในตัวอย่างด้านบน หลังจากที่ผู้ใช้คลิกรูปภาพ หน้า google.com จะโหลดลงในแท็บปัจจุบัน
5.4 URL ปัจจุบัน
และอีกหนึ่งสิ่งที่มีประโยชน์ บางครั้งสคริปต์จำเป็นต้องทราบ URL ของหน้าปัจจุบัน ตัวอย่างเช่น สคริปต์เดียวกันสามารถเพิ่มไปยังหน้าต่างๆ ทำอย่างไร?
มีคุณสมบัติพิเศษสำหรับสิ่งนี้document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION