Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 59eb0a3

Browse files
Merge pull request #46 from AzharAli-github/main
DOM-Elements
2 parents eed09dd + a5c4413 commit 59eb0a3

File tree

3 files changed

+101
-0
lines changed

3 files changed

+101
-0
lines changed
4.15 KB
Loading[フレーム]
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>DOM Elements</title>
9+
<link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
10+
</head>
11+
12+
<body>
13+
<h1>DOM Elements</h1>
14+
<button onclick="DisplayOne()">View Doc</button>
15+
<div id="textOne"></div>
16+
<!-- Example One by id -->
17+
<h2>Example One by id</h2>
18+
<button onclick="DisplayTwo()">id</button>
19+
<div id="textTwo"></div>
20+
<!-- Example Two by className -->
21+
<h2>Example One by className</h2>
22+
<button onclick="DisplayThree()">className</button>
23+
<p class="textThree"></p>
24+
<!-- Example Three by tagName -->
25+
<h2>Example One by tagName</h2>
26+
<button onclick="DisplayFour()">tagName</button>
27+
<h3></h3>
28+
<!-- Example Four by CSS Selector -->
29+
<h2>Example One by CSS Selector</h2>
30+
<button onclick="DisplayFive()">CSS Selector</button>
31+
<p class="one"></p>
32+
<!-- Example Five by HTML Object Collection -->
33+
<h2>Example One by HTML Obeject Selector</h2>
34+
<form action="https://www/w3schools.com/action_page.php" id="frm1">
35+
First Name: <input type="text" name="fname" value="Donald"> Last Name: <input type="text" name="lname" value="Duck"><br>
36+
<input type="submit" value="Submit">
37+
</form><br>
38+
<button onclick="DisplaySix()">HTML Object Selector</button>
39+
<p class="one"></p>
40+
<script src="script.js"></script>
41+
</body>
42+
43+
</html>
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Elements in DOM
2+
let textOne = document.getElementById('textOne');
3+
4+
function DisplayOne() {
5+
textOne.innerHTML = `
6+
<h1>Finding HTML ELements</h1>
7+
<li>Finding HTML Elements by id</li>
8+
<li>Finding HTML Elements by className</li>
9+
<li>Finding HTML Elements by tagName</li>
10+
<li>Finding HTML Elements by CSS Selector</li>
11+
<li>Finding HTML Elements by HTML Object Collection</li>
12+
<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>
13+
`
14+
}
15+
16+
// Getting Element By Id
17+
18+
let textTwo = document.getElementById('textTwo'); // --> Mostly Used
19+
20+
function DisplayTwo() {
21+
textTwo.innerHTML = "WE HAVE GOT THIS VALUE FROM id"
22+
}
23+
24+
// Getting Elements by className
25+
26+
let textThree = document.getElementsByClassName("textThree"); // --> Not Used Mostly
27+
28+
function DisplayThree() {
29+
textThree.innerHTML = "WE HAVE GOT THIS VALUE FROM className";
30+
}
31+
32+
// Getting Elements by tagName
33+
34+
let textFour = document.getElementsByTagName('h3'); // Use Fewly
35+
36+
function DisplayFour() {
37+
textFour.innerHTML = "WE HAVE GOT THIS VALUE FROM tagName";
38+
}
39+
40+
// Getting Elements by CSS Selector
41+
42+
let textFive = document.querySelector('p.one');
43+
44+
function DisplayFive() {
45+
textFive.innerHTML = "WE HAVE GOT THIS VALUE FROM CSS Selector";
46+
}
47+
48+
// Getting Elements by Object Collections
49+
50+
let form = document.forms["frm1"];
51+
52+
function DisplaySix() {
53+
let text = "";
54+
for (let i = 0; i < form.length; i++) {
55+
text += elements[i].value + "<br>";
56+
}
57+
form.innerHTML = text;
58+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /