2.1 Metody dostępu do elementów
Nawigacja po DOM (Document Object Model) jest ważnym zadaniem przy pracy z dokumentami webowymi. JavaScript oferuje wiele metod do wyszukiwania i dostępu do elementów dokumentu. Te metody pozwalają programistom łatwo znajdować potrzebne elementy i manipulować nimi.
1. Metoda getElementById()
Metoda getElementById() zwraca element, który ma atrybut id o wskazanej wartości.
To jedna z najprostszych i najczęściej używanych metod.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Wyświetli: This is the content
</script>
</body>
</html>
2. Metoda getElementsByClassName()
Metoda getElementsByClassName() zwraca kolekcję wszystkich elementów, które mają podaną klasę.
Kolekcja jest "żywa", co oznacza, że automatycznie aktualizuje się przy zmianach w DOM.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Wyświetli: 3
</script>
</body>
</html>
3. Metoda getElementsByTagName()
Metoda getElementsByTagName() zwraca kolekcję wszystkich elementów z podanym tagiem.
Ta kolekcja także jest "żywa".
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Wyświetli: 3
</script>
</body>
</html>
4. Metoda querySelector()
Metoda querySelector() zwraca pierwszy element, który pasuje do podanego selektora CSS.
To bardzo potężna i elastyczna metoda do wyszukiwania elementów.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Wyświetli: Paragraph 2
</script>
</body>
</html>
5. Metoda querySelectorAll()
Metoda querySelectorAll() zwraca statyczną (niezmienną) kolekcję wszystkich elementów,
które pasują do podanego selektora CSS.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Wyświetli: 3
</script>
</body>
</html>
2.2 Nawigacja po węzłach
DOM również dostarcza metody do nawigacji po węzłach względem obecnego elementu.
1. Właściwość parentNode
Właściwość parentNode zwraca węzeł rodzica obecnego węzła.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Wyświetli: container
</script>
</body>
</html>
2. Właściwość childNodes
Właściwość childNodes zwraca kolekcję wszystkich węzłów potomnych obecnego węzła, w tym tekstowych.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Wyświetli liczbę wszystkich węzłów potomnych, w tym tekstowych
</script>
</body>
</html>
Może wciąż się zastanawiasz, dlaczego wynik to 7?
Jak już wcześniej wspomniano, właściwość childNodes zwraca kolekcję wszystkich węzłów potomnych obecnego węzła, w tym
tekstowych (spacje, znaki, nowe linie itp.). HTML zawiera spacje i nowe linie pomiędzy
elementami <li>, które również są uważane za oddzielne węzły.
W powyższym przykładzie pomiędzy tagiem <ul> a pierwszym <li> jest nowa linia (oraz, być może, spacje)
— to jest uznawane za węzeł tekstowy. Ta sama sytuacja występuje między wszystkimi <li> i po ostatnim <li>.
Zatem, zamiast trzech elementów listy, childNodes obejmuje te węzły tekstowe, co prowadzi do całkowitej liczby — 7.
Aby uzyskać jedynie elementy (ignorując węzły tekstowe), można użyć właściwości children, która zwraca tylko węzły potomne jako elementy:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Właściwości firstChild i lastChild
Właściwości firstChild i lastChild zwracają odpowiednio pierwszy i ostatni węzeł potomny.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Może cię zdziwić, że konsola nic nie wyświetliła. Ale tak nie jest. Wyświetliły się ostatni węzeł potomny Item 1 i Item 3 (nowa linia). Jeśli na tym się potknąłeś, jeszcze raz przeczytaj p.2 Właściwość childNodes
4. Właściwości nextSibling i previousSibling
Właściwości nextSibling i previousSibling zwracają odpowiednio kolejny i poprzedni węzeł na tym samym poziomie hierarchii.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Wyświetli: Item 3
console.log(prev.textContent); // Wyświetli: Item 1 (jeśli pominiemy węzły tekstowe)
</script>
</body>
</html>
2.3 Nawigacja po węzłach elementów
5. Właściwości nextElementSibling i previousElementSibling
Te właściwości zwracają kolejny i poprzedni węzeł elementu (pomijając tekstowe i komentarze).
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Wyświetli: Item 3
console.log(prev.textContent); // Wyświetli: Item 1
</script>
</body>
</html>
6. Właściwości firstElementChild i lastElementChild
Te właściwości zwracają pierwszy i ostatni węzeł elementu (pomijając tekstowe i komentarze).
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Wyświetli: Item 1
console.log(last.textContent); // Wyświetli: Item 3
</script>
</body>
</html>
GO TO FULL VERSION