Skip to content

Commit 101118a

Browse files
matowdevmatowdev
committed
[EX-17.7/st-compl] getting-dom-elements
Getting "DOM" el's, outputting their "text" content. Worth noting: - "getElementById()" method and the difference in behavior.. "innerText" and "textContent" prop's. FS-dev: B-3 / JS basic
1 parent 73c15a4 commit 101118a

File tree

4 files changed

+146
-0
lines changed

4 files changed

+146
-0
lines changed

‎full-stack-dev/3-js-basic/17-dom/17-7-ex-getting-dom-elements/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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</title>
9+
<link rel="stylesheet" href="./styles.css">
10+
<script src="./index.js" defer></script>
11+
</head>
12+
13+
<body style="background-color: #1c1b21; text-align: center">
14+
<img src="./logo.svg" alt>
15+
<div class="panel">I love this!</div>
16+
<input class="input" id="input">
17+
<button class="button">Change</button>
18+
<div class="notification notification_hide">Changed!</div>
19+
20+
<div class="element-wrap">
21+
<div class="one">
22+
<span>Element 1</span>
23+
</div>
24+
<div class="one">
25+
<span>Element 2</span>
26+
</div>
27+
<div id="two">Element 3</div>
28+
<div>
29+
<span user-id="4">Element 4</span>
30+
</div>
31+
</div>
32+
</body>
33+
34+
</html>

‎full-stack-dev/3-js-basic/17-dom/17-7-ex-getting-dom-elements/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use strict';
2+
3+
// Представлено 4-ре DOM-элемента, нужно получить их.. вывести в console их контентное содержимое разными способами, согласно их атрибутов.
4+
5+
const someEl = document.querySelectorAll('.one');
6+
console.log(someEl[0].innerText); // Элемент 1
7+
console.log(someEl[1].innerText); // Элемент 2
8+
9+
// ?? альтернативное решение
10+
const oneTwoEl = document.querySelectorAll('.one span'); // через div's с классом .one выборка внутренних span элементов
11+
oneTwoEl.forEach((el) => console.log(el.textContent));
12+
/*
13+
Элемент 1
14+
Элемент 2
15+
*/
16+
17+
// const threeEl = document.querySelector('#two');
18+
const threeEl = document.getElementById('two'); // ИМЕННО для ID.. getElementById() метод (поиск сразу по ID)
19+
console.log(threeEl.textContent); // Элемент 3
20+
21+
const fourEl = document.querySelector('[user-id="4"]');
22+
console.log(fourEl.textContent); // Элемент 4

‎full-stack-dev/3-js-basic/17-dom/17-7-ex-getting-dom-elements/logo.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎full-stack-dev/3-js-basic/17-dom/17-7-ex-getting-dom-elements/styles.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.panel {
2+
margin-bottom: 20px;
3+
border-radius: 10px;
4+
padding: 40px;
5+
font-size: 18px;
6+
color: white;
7+
background: rgba(255, 255, 255, .05);
8+
}
9+
10+
.input {
11+
border: 1px solid rgba(212, 212, 212, .05);
12+
border-radius: 10px;
13+
padding: 15px 16px;
14+
height: 56px;
15+
box-sizing: border-box;
16+
font-size: 18px;
17+
line-height: 21px;
18+
color: white;
19+
box-shadow: none;
20+
outline: none;
21+
background: rgba(255, 255, 255, .05);
22+
}
23+
24+
.button {
25+
display: inline-flex;
26+
justify-content: center;
27+
align-items: center;
28+
border: none;
29+
border-radius: 10px;
30+
padding: 20px 40px;
31+
box-sizing: border-box;
32+
text-align: center;
33+
color: white;
34+
background: #6c38cc;
35+
cursor: pointer;
36+
transition: all .2s;
37+
}
38+
39+
.button:hover {
40+
background-color: #844fe6;
41+
}
42+
43+
.notification {
44+
margin-bottom: 20px;
45+
padding-top: 20px;
46+
font-size: 16px;
47+
color: white;
48+
}
49+
50+
.notification_hide {
51+
display: none;
52+
}
53+
54+
.element-wrap {
55+
display: flex;
56+
justify-content: center;
57+
gap: 10px 20px;
58+
padding-top: 20px;
59+
}
60+
61+
.element-wrap div {
62+
font-size: 18px;
63+
color: white;
64+
cursor: pointer;
65+
}

0 commit comments

Comments
 (0)