Course โมดูล 3 - Lecture: การทำงานกับ Document Object Model (DOM)

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;