5.1 document.getElementById()

Tulad ng alam mo, nilikha ang JavaScript upang magdagdag ng ilang animation sa mga pahina ng HTML. Sa ngayon, wala pa kaming gaanong nasasabi tungkol dito. Paano magdagdag ng parehong animation? Paano, halimbawa, baguhin ang kulay ng isang elemento?

Upang baguhin ang kulay ng isang elemento, kailangan mo munang hanapin ang elementong ito. Upang gawin ito, mayroong isang function document.getElementById();na Isusulat mo sa iyong HTML idsa nais na elemento, at pagkatapos ay i-access ito mula sa JavaScript. Halimbawa:


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

Pagkatapos mag-click ng user sa imahe, ang function ay tinatawag na changeImge(). Sa loob nito, nakukuha namin ang elemento imagesa pamamagitan ng its ID, at pagkatapos ay baguhin ang halaga ng src attribute nito sa isang bago. Na magiging sanhi ng elemento imgna mag-load ng bagong imahe.

5.2 document.createElement()

Bilang karagdagan sa pagkuha ng isang elemento, maaari din tayong lumikha ng mga bagong elemento at magtanggal ng mga umiiral na.

Ang paglikha ng mga elemento ay napakadali. Upang gawin ito, kailangan mong gawin ang dalawang bagay: a) lumikha ng isang elemento , b) idagdag ito sa tamang lugar sa dokumento. Karaniwang ganito ang hitsura:


<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 na paraan ng window.navigate().

Ang isa pang napaka-kapaki-pakinabang na paraan ay ang window.navigate(). Gamit ito, maaari mong pilitin ang browser na mag-load ng bagong page sa halip na ang kasalukuyang page. Ipasa lamang ito URLsa paraang ito at tawagan ito. Halimbawa:


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

Sa halimbawa sa itaas, pagkatapos mag-click ng user sa larawan, ang page na google.com ay ilo-load sa kasalukuyang tab.

5.4 Kasalukuyang URL

At isa pang kapaki-pakinabang na bagay. Minsan kailangang malaman ng script ang kasalukuyang URL ng page. Halimbawa, ang parehong script ay maaaring idagdag sa iba't ibang mga pahina. Paano ito gagawin?

Mayroong isang espesyal na ari-arian para dito.document.location.href

var currentURL = document.location.href;