Document Object Model (DOM) bilan ishlash

5.1 document.getElementById()

Siz bilasizki, JavaScript HTML sahifalarga animatsiya qo'shish uchun yaratilgan. Hozircha bu haqda ko'p gaplashmadik. Qanday qilib animatsiyani qo'shish mumkin? Misol uchun, qanday qilib biror elementning rangini o'zgartirish mumkin?

Elementning rangini o'zgartirish uchun, avval uni topish kerak. Buning uchun document.getElementById(); funksiyasi mavjud. Sen HTML ichida kerakli elementga id yozib, keyin JavaScriptdan unga murojaat qilasan. Misol:

<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>

Foydalanuvchi rasmga sichqoncha bilan kliklashidan so'ng changeImage() funksiyasi chaqiriladi. U ichida biz ID orqali image elementini olamiz, va keyin unga src atributining qiymatini yangisiga o'zgartiramiz. Bu esa img elementining yangi rasm yuklashiga olib keladi.

5.2 document.createElement()

Elementni olishdan tashqari, biz yangi elementlar yaratish va mavjudlarini o'chirishimiz ham mumkin.

Elementlarni yaratish juda oson. Buning uchun ikki qadamni bajaramiz: a) element yarating, b) uni hujjatning kerakli joyiga qo'shing. Bu odatda shunday ko'rinadi:

<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 Metod window.navigate()

Boshqa juda foydali metodlardan biri – bu window.navigate() metodi. Uning yordamida sen brauzerni hozirgi sahifa o'rniga yangi sahifa yuklashga majbur qilishing mumkin. Shunchaki bu metodga URL ni uzatib uni chaqir. Misol:

  <body> 
    <img scr="big-image.png" onclick="window.navigate('https://google.com');"> 
  </body> 

Yuqoridagi misolda, foydalanuvchi rasmga kliklashidan so'ng, joriy oyna ichida google.com sahifasi yuklanadi.

5.4 Hozirgi URL

Va yana bir foydali narsa. Ba'zan skriptga hozirgi sahifaning URL manzilini bilish zarur bo'lishi mumkin. Masalan, bir xil skript turli sahifalarga qo'shilgan bo'lishi mumkin. Buni qanday qilish mumkin?

Buning uchun maxsus document.location.href xususiyati mavjud

var currentURL = document.location.href;