DOM-Documents

AzharAli-github · AzharAli-github · commit de35f01eff9e · 2023-01-25T13:42:28.000+05:00
diff --git a/JavaScript/Advance/DOM/2.DOM Documents/images/js-logo.png b/JavaScript/Advance/DOM/2.DOM Documents/images/js-logo.png
diff --git a/JavaScript/Advance/DOM/2.DOM Documents/index.html b/JavaScript/Advance/DOM/2.DOM Documents/index.html
@@ -0,0 +1,18 @@
+<!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 Documents</title>
+</head>
+
+<body>
+    <h1>DOM Documents</h1>
+    <button onclick="DisplayOne()">View Doc</button>
+    <p id="textOne"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/2.DOM Documents/script.js b/JavaScript/Advance/DOM/2.DOM Documents/script.js
@@ -0,0 +1,24 @@
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    textOne.innerHTML = `
+    <h2>Finding HTML Elements</h2>
+    <li>1. document.getElementById('id')</li>
+    <li>2. document.getElementByTagName(name)</li>
+    <li>3. document.getElementByClassName('name')</li>
+    <h2>Changing HTML Elements</h2>
+    <li>1. element.innerHTML =  new html content</li>
+    <li>2. element.attribute = new value</li>
+    <li>3. element.style.property = new style</li>
+    <h3>Method</h3>
+    <li>4. element.setAttribute(attribute, value)</li>
+    <h2>Adding and Deleting HTML Elements</h2>
+    <li>1. document.createElement(element)</li>
+    <li>2. document.removeChild(element)</li>
+    <li>3. document.appendChild(element)</li>
+    <li>4. document.replaceChild(new, old)</li>
+    <li>5. document.write(text)</li>
+    <h1>Adding Events Handlers</h1>
+    <li>document.getElementById(id).onclick = function(){code}</li>
+    `
+}
