Merge pull request #46 from AzharAli-github/main

AzharAli-github · web-flow · commit 59eb0a36600b · 2023-01-26T14:41:38.000+05:00
DOM-Elements
diff --git a/JavaScript/Advance/DOM/3. DOM Elements/images/js-logo.png b/JavaScript/Advance/DOM/3. DOM Elements/images/js-logo.png
diff --git a/JavaScript/Advance/DOM/3. DOM Elements/index.html b/JavaScript/Advance/DOM/3. DOM Elements/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOM Elements</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <h1>DOM Elements</h1>
+    <button onclick="DisplayOne()">View Doc</button>
+    <div id="textOne"></div>
+    <!-- Example One by id -->
+    <h2>Example One by id</h2>
+    <button onclick="DisplayTwo()">id</button>
+    <div id="textTwo"></div>
+    <!-- Example Two by className -->
+    <h2>Example One by className</h2>
+    <button onclick="DisplayThree()">className</button>
+    <p class="textThree"></p>
+    <!-- Example Three by tagName -->
+    <h2>Example One by tagName</h2>
+    <button onclick="DisplayFour()">tagName</button>
+    <h3></h3>
+    <!-- Example Four by CSS Selector -->
+    <h2>Example One by CSS Selector</h2>
+    <button onclick="DisplayFive()">CSS Selector</button>
+    <p class="one"></p>
+    <!-- Example Five by HTML Object Collection -->
+    <h2>Example One by HTML Obeject Selector</h2>
+    <form action="https://www/w3schools.com/action_page.php" id="frm1">
+        First Name: <input type="text" name="fname" value="Donald"> Last Name: <input type="text" name="lname" value="Duck"><br>
+        <input type="submit" value="Submit">
+    </form><br>
+    <button onclick="DisplaySix()">HTML Object Selector</button>
+    <p class="one"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/3. DOM Elements/script.js b/JavaScript/Advance/DOM/3. DOM Elements/script.js
@@ -0,0 +1,58 @@
+//        Elements in DOM
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    textOne.innerHTML = `
+    <h1>Finding HTML ELements</h1>
+    <li>Finding HTML Elements by id</li>
+    <li>Finding HTML Elements by className</li>
+    <li>Finding HTML Elements by tagName</li>
+    <li>Finding HTML Elements by CSS Selector</li>
+    <li>Finding HTML Elements by HTML Object Collection</li>
+    <h3>Below Example Getting Elements by id and CSS Selectors can be changed and displayed but getting element from className and tagName does not work properly</h3>
+    `
+}
+
+//   Getting Element By Id
+
+let textTwo = document.getElementById('textTwo'); // --> Mostly Used
+
+function DisplayTwo() {
+    textTwo.innerHTML = "WE HAVE GOT THIS VALUE FROM id"
+}
+
+//   Getting Elements by className
+
+let textThree = document.getElementsByClassName("textThree"); // --> Not Used Mostly
+
+function DisplayThree() {
+    textThree.innerHTML = "WE HAVE GOT THIS VALUE FROM className";
+}
+
+//   Getting Elements by tagName
+
+let textFour = document.getElementsByTagName('h3'); // Use Fewly
+
+function DisplayFour() {
+    textFour.innerHTML = "WE HAVE GOT THIS VALUE FROM tagName";
+}
+
+//   Getting Elements by  CSS Selector
+
+let textFive = document.querySelector('p.one');
+
+function DisplayFive() {
+    textFive.innerHTML = "WE HAVE GOT THIS VALUE FROM CSS Selector";
+}
+
+// Getting Elements by Object Collections
+
+let form = document.forms["frm1"];
+
+function DisplaySix() {
+    let text = "";
+    for (let i = 0; i < form.length; i++) {
+        text += elements[i].value + "<br>";
+    }
+    form.innerHTML = text;
+}
