CodeGym /ஜாவா பாடநெறி /All lectures for TA purposes /ஆவணப் பொருள் மாதிரியுடன் (DOM) பணிபுரிதல்

ஆவணப் பொருள் மாதிரியுடன் (DOM) பணிபுரிதல்

All lectures for TA purposes
நிலை 1 , பாடம் 963
கிடைக்கப்பெறுகிறது

5.1 document.getElementById()

உங்களுக்கு தெரியும், HTML பக்கங்களில் சில அனிமேஷனை சேர்க்க ஜாவாஸ்கிரிப்ட் உருவாக்கப்பட்டது. இதுவரை, நாங்கள் அதைப் பற்றி அதிகம் சொல்லவில்லை. இதே அனிமேஷனை எப்படி சேர்ப்பது? உதாரணமாக, ஒரு தனிமத்தின் நிறத்தை மாற்றுவது எப்படி?

ஒரு உறுப்பின் நிறத்தை மாற்ற, முதலில் இந்த உறுப்பைக் கண்டுபிடிக்க வேண்டும். இதைச் செய்ய, நீங்கள் விரும்பிய உறுப்பில் document.getElementById();உங்கள் HTML இல் எழுதும் செயல்பாடு உள்ளது , பின்னர் அதை ஜாவாஸ்கிரிப்டில் இருந்து அணுகவும். idஉதாரணமாக:


<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அதன் உள்ளே, உறுப்பை அதன் மூலம் பெறுகிறோம் ID, அதன் பிறகு அதன் src பண்புக்கூறின் மதிப்பை புதியதாக மாற்றுவோம். imgஇது உறுப்பு ஒரு புதிய படத்தை ஏற்றுவதற்கு காரணமாகும் .

5.2 document.createElement()

ஒரு உறுப்பைப் பெறுவதுடன், புதிய உறுப்புகளை உருவாக்கலாம் மற்றும் ஏற்கனவே உள்ளவற்றை நீக்கலாம்.

கூறுகளை உருவாக்குவது மிகவும் எளிதானது. இதைச் செய்ய, நீங்கள் இரண்டு விஷயங்களைச் செய்ய வேண்டும்: a) ஒரு உறுப்பை உருவாக்கவும் , b) ஆவணத்தில் சரியான இடத்தில் அதைச் சேர்க்கவும் . பொதுவாக இது போல் தெரிகிறது:


<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;
கருத்துக்கள்
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION