5.1 document.getElementById()
మీకు తెలిసినట్లుగా, HTML పేజీలకు కొంత యానిమేషన్ను జోడించడానికి JavaScript సృష్టించబడింది. ఇప్పటివరకు, మేము దాని గురించి పెద్దగా చెప్పలేదు. ఇదే యానిమేషన్ను ఎలా జోడించాలి? ఉదాహరణకు, ఒక మూలకం యొక్క రంగును ఎలా మార్చాలి?
మూలకం యొక్క రంగును మార్చడానికి, మీరు ముందుగా ఈ మూలకాన్ని కనుగొనాలి. దీన్ని చేయడానికి, 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()
మూలకాన్ని పొందడంతోపాటు, మేము కొత్త మూలకాలను సృష్టించవచ్చు మరియు ఇప్పటికే ఉన్న వాటిని తొలగించవచ్చు.
మూలకాలను సృష్టించడం చాలా సులభం. దీన్ని చేయడానికి, మీరు రెండు పనులు చేయాలి: ఎ) ఒక మూలకాన్ని సృష్టించండి , బి) దానిని పత్రంలో సరైన స్థానానికి జోడించండి . ఇది సాధారణంగా ఇలా కనిపిస్తుంది:
<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;