newdomFiles.txt

Ansari1120 · Ansari1120 · commit 6727cf7561d6 · 2022-09-28T20:58:05.000+05:00
diff --git a/dom 1 -  method.html b/dom 1 -  method.html
@@ -0,0 +1,15 @@
+//dom method
+
+<html>
+<body>
+
+<h2>My First Page</h2>
+
+<p id="demo"></p>
+
+<script>
+document.getElementById("demo").innerHTML = "same here!";
+</script>
+
+</body>
+</html>
diff --git a/dom 2 find elements by tagname.html b/dom 2 find elements by tagname.html
@@ -0,0 +1,23 @@
+// dom document  finding elements by tagname: 
+
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript HTML DOM</h2>
+
+<p>Finding HTML Elements by Tag Name.</p>
+<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
+
+<p id="demo"></p>
+
+<script>
+const element = document.getElementsByTagName("p");
+
+document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;
+
+</script>
+
+</body>
+</html>
+
diff --git a/dom 3 - find elements by class name.html b/dom 3 - find elements by class name.html
@@ -0,0 +1,22 @@
+
+//finding elements by class name
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript HTML DOM</h2>
+
+<p>Finding HTML Elements by Class Name.</p>
+<p class="intro">Hello World!</p>
+<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
+
+<p id="demo"></p>
+
+<script>
+const x = document.getElementsByClassName("intro");
+document.getElementById("demo").innerHTML = 
+'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
+</script>
+
+</body>
+</html>
diff --git a/dom 4 - find specific element from same tag.html b/dom 4 - find specific element from same tag.html
@@ -0,0 +1,22 @@
+
+//finding specific element
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript HTML DOM</h2>
+
+<p>Finding HTML Elements by Query Selector</p>
+<p class="intro">Who's there !.</p>
+<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>
+
+<p id="demo"></p>
+
+<script>
+const x = document.querySelectorAll("p.intro");
+document.getElementById("demo").innerHTML = 
+'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
+</script>
+
+</body>
+</html>
diff --git a/dom 5 - change html content.html b/dom 5 - change html content.html
@@ -0,0 +1,17 @@
+//to change paras value for instance or changing html content.
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript can Change HTML</h2>
+
+<p id="p1">Hello World!</p>
+
+<script>
+document.getElementById("p1").innerHTML = "New text!";
+</script>
+
+<p>The paragraph above was changed by a script.</p>
+
+</body>
+</html>
diff --git a/dom 6 - change html attribute.html b/dom 6 - change html attribute.html
@@ -0,0 +1,18 @@
+
+//changing html attribute
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript HTML DOM</h2>
+<img id="image" src="smiley.gif" width="160" height="120">
+
+
+<script>
+document.getElementById("image").src = "landscape.jpg";
+</script>
+
+<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>
+
+</body>
+</html>
diff --git a/dom 7 - dynamic html attribute.html b/dom 7 - dynamic html attribute.html
@@ -0,0 +1,18 @@
+
+//dynamic html attribute
+<!DOCTYPE html>
+<html>
+<body>
+
+<p >since in the past time the time were wed sep 26 2022 11:24:54 GMT+0500 (Pakistan Standard Time) </p>
+
+
+<p id="demo">since in the past time the time were wed sep 26 2022 11:24:54 GMT+0500 (Pakistan Standard Time) </p>
+
+<script>
+document.getElementById("demo").innerHTML = "Date : " + Date();
+</script>
+
+</body>
+</html> 
+
diff --git a/dom 8 - submit a form.html b/dom 8 - submit a form.html
@@ -0,0 +1,36 @@
+
+// js dom form 
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript Validation</h2>
+
+<p>Please input a number between 1 and 10:</p>
+
+<input id="numb">
+
+<button type="button" onclick="myFunction()">Submit</button>
+
+<p id="demo"></p>
+
+<script>
+function myFunction() {
+  // Get the value of the input field with id="numb"
+  let x = document.getElementById("numb").value;
+  // If x is Not a Number or less than one or greater than 10
+  let text;
+  if (isNaN(x) || x < 1 || x > 10) {
+    text = "Input not valid";
+  } else {
+    text = "Input OK";
+  }
+  document.getElementById("demo").innerHTML = text;
+}
+</script>
+
+</body>
+</html> 
+
+
+
