piątek, 2024-01-05

JS: Metody pobierania elementów DOM

W JavaScript istnieje kilka metod umożliwiających pobieranie i manipulowanie elementami Document Object Model (DOM). DOM to programowy interfejs do dokumentów HTML i XML, który pozwala skryptom zmieniać strukturę, styl i zawartość dokumentu.

Metody pobierania elementów DOM

getElementById()

• Pobiera element według jego atrybutu id.
• Jest to jedna z najczęściej używanych metod ze względu na jej prostotę i szybkość działania.
• Przykład: document.getElementById("elementId")

getElementsByClassName()

• Pobiera listę wszystkich elementów, które mają określoną nazwę klasy.
• Zwraca obiekt HTMLCollection zawierający wszystkie pasujące elementy.
• Przykład: document.getElementsByClassName("klasa")

getElementsByTagName()

• Pobiera elementy według nazwy tagu.
• Zwraca obiekt HTMLCollection zawierający elementy o określonym tagu.
• Przykład: document.getElementsByTagName("div")

querySelector()

• Pobiera pierwszy element, który pasuje do określonego selektora CSS.
• Jest to bardziej wszechstronna metoda, pozwalająca używać selektorów CSS do znajdowania elementów.
• Przykład: document.querySelector(".klasa") lub document.querySelector("#elementId")

querySelectorAll()

• Pobiera wszystkie elementy, które pasują do określonego selektora CSS.
• Zwraca obiekt NodeList zawierający wszystkie pasujące elementy.
• Przykład: document.querySelectorAll("p.klasa")

getElementsByName()

• Pobiera elementy według atrybutu name.
• Jest często używany w formularzach HTML.
• Przykład: document.getElementsByName("nazwa")

Przykłady

// Pobieranie elementu po ID
var element = document.getElementById("mojId");

// Pobieranie elementów po klasie
var elementy = document.getElementsByClassName("mojaKlasa");

// Pobieranie elementów po tagu
var paragrafy = document.getElementsByTagName("p");

// Pobieranie pierwszego elementu pasującego do selektora CSS
var pierwszyElement = document.querySelector(".mojaKlasa");

// Pobieranie wszystkich elementów pasujących do selektora CSS
var wszystkieElementy = document.querySelectorAll("div.mojaKlasa");