5.1 दस्तावेज़.getElementById ()
जैसा कि आप जानते हैं, HTML पेजों में कुछ एनिमेशन जोड़ने के लिए JavaScript का निर्माण किया गया था। अब तक, हमने इसके बारे में ज्यादा कुछ नहीं कहा है। इसी एनिमेशन को कैसे जोड़ा जाए? कैसे, उदाहरण के लिए, एक तत्व का रंग बदलने के लिए?
किसी तत्व का रंग बदलने के लिए, आपको सबसे पहले इस तत्व को खोजना होगा। ऐसा करने के लिए, एक फ़ंक्शन है document.getElementById();जिसे आप अपने एचटीएमएल में 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 दस्तावेज़। 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()। इसके साथ, आप ब्राउज़र को मौजूदा पृष्ठ के बजाय एक नया पृष्ठ लोड करने के लिए बाध्य कर सकते हैं। बस इसे URLइस विधि से पास करें और इसे कॉल करें। उदाहरण:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
उपरोक्त उदाहरण में, उपयोगकर्ता द्वारा छवि पर क्लिक करने के बाद, google.com पृष्ठ वर्तमान टैब में लोड हो जाएगा।
5.4 वर्तमान यूआरएल
और एक और उपयोगी बात। कभी-कभी किसी स्क्रिप्ट को वर्तमान पृष्ठ URL जानने की आवश्यकता होती है। उदाहरण के लिए, एक ही स्क्रिप्ट को अलग-अलग पेजों में जोड़ा जा सकता है। इसे कैसे करना है?
इसके लिए एक विशेष संपत्ति है।document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION