Jak znaleźć i zdobyć elementy HTML w JavaScript
W tym spisie omówi procedury znajdowania i otrzymywania elementów HTML w JavaScript. Ponadto przykłady związane z GetElementById (), getElementsBaTagname (), getElementsBlassName () i QuerySelectorAll () zostaną wykazane w tym artykule w tym artykule. A więc zacznijmy!
Jak znaleźć i zdobyć elementy HTML według ID w JavaScript
Większość programistów JavaScript wykorzystywała getElementById () metoda znalezienia i uzyskiwania elementów HTML o unikalnych identyfikatorach. Jeśli zdałeś identyfikator, który nie należy do żadnego elementu HTML, metoda getElementById () wyświetli wartość zerową.
Składnia metody getElementById ()
dokument.getElementById (elementId)Tutaj "ElementId”Reprezentuje unikalny identyfikator elementu HTML, który chcesz znaleźć i uzyskać w kodzie JavaScript.
Przykład: Znajdź i zdobądź elementy HTML według ID w JavaScript
Dodamy elementy HTML, takie jak nagłówek z
tag i trzy elementy akapitu z
tag w poniższym przykładzie. Zauważ, że dodaliśmy również „IDS„Z elementami akapitu:
To jest Linuxhint.com
Znajdź i zdobądź elementy HTML według ID w JavaScript
To jest program JavaScript, który wykorzystuje metodę „getElementSById”
W następnym kroku znajdziemy i otrzymamy element o identyfikatorze „P1”Za pomocą„dokument.getElementById ()" metoda. Po ding zmieniemy zawartość odzyskanego elementu HTML:
Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:
Wykonanie powyższego programu JavaScript wyświetli następujące dane wyjściowe:
Jak znaleźć i zdobyć elementy HTML według TagName w JavaScript
Możesz użyć „getElementsBaTagname ()”Metoda JavaScript do znajdowania i otrzymywania określonego elementu HTML według nazwy znacznika.
Składnia metody getelementsBaTagname ()
dokument.getElementsByTagname (tagname)Tutaj nazwa tagnów reprezentuje nazwę znacznika elementu HTML, który chcesz odzyskać.
Przykład: Znajdź i zdobądź elementy HTML według nazwy TagName w JavaScript
Poniższy przykład znajduje się i otrzyma wszystkie elementy HTML o nazwie tagu „P„Za pomocą metody getElementByTagname (). Następnie wyświetli zawartość HTML obecnej przy pierwszym indeksie kolekcji obiektów:
To jest Linuxhint.com
Znajdź i zdobądź elementy HTML według nazwy znacznika w JavaScript
To jest program JavaScript, który wykorzystuje metodę „getElementsBaTagname”
Jak widać, tekst pierwszego akapitu naszego programu JavaScript jest wyświetlany pomyślnie:
Jak znaleźć i zdobyć elementy HTML według nazwy klasy w JavaScript
„„getElementsByClassName ()”Metoda jest stosowana do znajdowania i uzyskiwania elementów HTML o tej samej klasie. Korzystając z nazwy klasy, kiedy próbujesz uzyskać element HTML, interpreter JavaScript zwróci wszystkie obiekty należące do tej samej klasy. Następnie możesz wykonywać określone operacje na tych elementach HTML.
Składnia metody getelementsBassName ()
dokument.getElementsByClassName (klasę)Tutaj "Nazwa klasy”Reprezentuje nazwę klasy elementów HTML, które musisz znaleźć i zdobyć w swoim programie.
Przykład: Znajdź i zdobądź elementy HTML według nazwy klasowej w JavaScript
W poniższym przykładzie dodaliśmy nagłówek i niektóre elementy akapitu do nazwy klasowej „C1”:
To jest Linuxhint.com
Znajdź i zdobądź elementy HTML według nazwy klasy w JavaScript
tekst w pierwszym Paragrpah
tekst w drugim akapicie
Następnie szukamy elementów HTML, które mają „C1„Jako ich klasa za pomocą metody getEntsBassName () i będzie przechowywać kolekcje obiektów w„A”:
Oto dane wyjściowe, które otrzymaliśmy od wykonywania powyższego programu JavaScript:
Jak znaleźć i zdobyć elementy HTML według selektora CSS w JavaScript
W html, QuerySelelection () Metoda zwraca statyczny obiekt nodelisty, który zawiera zbiór elementów dziecięcych elementu dopasowanego do określonych selektorów CSS. Liczby indeksu służą do znalezienia i uzyskania węzłów, zaczynając od 0.
Składnia metody QuerySelelectorAll ()
element.querySelelectionAll (selektory)Metoda QuerySelectorAll () przyjmuje „Selektory”Jako argument ciąg DOM zawiera jeden lub więcej prawidłowych selektorów CSS.
Przykład: Znajdź i zdobądź elementy HTML według selektora CSS w JavaScript
W podgryzanym programie JavaScript zastosowaliśmy metodę QuerySeLelectall () do znalezienia i uzyskania akapitu elementów HTML o „mających” „C1„Jak nazwa ich klasy:
To jest Linuxhint.com
Znajdź i zdobądź elementy HTML według nazwy klasy w JavaScript
tekst w pierwszym Paragrpah
tekst w drugim akapicie
Sprawdź wyjście metody JavaScript QuerySelectorall ():
Wniosek
getElementById (), getElementsBaTagname (), getElementsByClassName () i querySelelectionAll () to najczęstsze metody JavaScript, które są używane do znajdowania i uzyskiwania elementów w programie JavaScript programu JavaScript. Możesz użyć dowolnej z wymienionych metod do wyszukiwania określonego elementu HTML w kodzie. W tym spisie omówiono procedury znajdowania i uzyskiwania elementów HTML w JavaScript. Ponadto przykłady związane z GetElementById (), getElementsBaTagname (), getElementsBlassName () i QuerySelelectall () również są pokazane w tym artykule.