Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content

DOM-Elements #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 26, 2023
Merged

DOM-Elements #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added JavaScript/Advance/DOM/3. DOM Elements/images/js-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions JavaScript/Advance/DOM/3. DOM Elements/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
58 changes: 58 additions & 0 deletions JavaScript/Advance/DOM/3. DOM Elements/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}