Javaउदाहरण के साथ स्क्रिप्ट DOM ट्यूटोरियल

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

DOM क्या है? Javaलिखी हुई कहानी?

Javaस्क्रिप्ट डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) का उपयोग करके वेबपेज के सभी तत्वों तक पहुँच सकती है। वास्तव में, वेब ब्राउज़र पेज लोड होने पर वेबपेज का DOM बनाता है। DOM मॉडल इस तरह से ऑब्जेक्ट के एक पेड़ के रूप में बनाया जाता है:

डोम में Javaलिपि

DOM और इवेंट का उपयोग कैसे करें

DOM का उपयोग करके, Javaस्क्रिप्ट कई कार्य कर सकती है। यह नए तत्व और विशेषताएँ बना सकती है, मौजूदा तत्व और विशेषताओं को बदल सकती है और यहाँ तक कि मौजूदा तत्व और विशेषताओं को हटा भी सकती है। Javaलिपि मौजूदा घटनाओं पर प्रतिक्रिया भी कर सकते हैं और पेज में नई घटनाएं भी बना सकते हैं।

getElementById, आंतरिक HTML उदाहरण

  1. getElementById: उन तत्वों और विशेषताओं तक पहुँचने के लिए जिनकी आईडी सेट है।
  2. innerHTML: किसी तत्व की सामग्री तक पहुँचने के लिए.

इस उदाहरण को स्वयं आज़माएँ:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

getElementsByTagName उदाहरण

getElementsByTagName: टैग नाम का उपयोग करके तत्वों और विशेषताओं तक पहुँचने के लिए। यह विधि एक रिटर्न करेगी सरणी एक ही टैग नाम वाले सभी आइटमों का.

इस उदाहरण को स्वयं आज़माएँ:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

इवेंट हैंडलर उदाहरण

  1. createElement: नया तत्व बनाने के लिए
  2. removeChild: एक तत्व हटाएँ
  3. आप एक जोड़ सकते हैं इवेंट हैंडलर किसी विशेष तत्व के लिए इस प्रकार:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

इस उदाहरण को स्वयं आज़माएँ:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>