Jak znaleźć elementy HTML przez selektory CSS
W tym spisie omówi procedury znalezienia elementów HTML przez selektorów CSS. Ponadto wyjaśnimy również zastosowanie metod QuerySelelection () i QuerySelectorAll () do znalezienia elementów przez selektory CSS, za pomocą przykładów. A więc zacznijmy!
Metoda QuerySelelect () do znalezienia elementów przez selektory CSS
Interfejs elementu ma „QuerySelelect ()„Metoda, którą można wykorzystać do znajdowania elementów przez selektory CSS. Metoda QuerySelector () zwróci „zero„Wartość Jeśli nie znaleziono dopasowania elementu. Ta metoda używa „Pierwsze zamówienie w przedsprzedaży głębokości„Metoda przemieszczania się w celu przemierzania węzłów dokumentu.
Składnia
element = dokument.querySelelect (selektory);Metoda QuerySelection () bierze „Selektory”Jako argument, który jest ciągiem DOM zawierającym jeden lub więcej prawidłowych selektorów CSS.
Jak użyć metody QuerySelelect () do znalezienia elementów przez selektory CSS
Teraz pokażemy procedurę znalezienia naszych elementów przez selektorów CSS za pomocą metody QuerySelelect ().
Przykład 1: Za pomocą metody QuerySelector () w celu znalezienia elementów przez selektory CSS
W pierwszym przykładzie metoda QuerySelector () znajdzie pierwszą
Element z klasą = „instruktaż”I ustawia kolor tła na„żółty”:
!Doctype html>Znalezienie elementów HTML według selektora CSS
Metoda QuerySelector ()
To jest Linuxhint.com = "samouczek"
Główny nagłówek
Pierwszy paragraf.
Wykonaj powyższy program w dowolnym edytorze kodu lub piaskownicy kodowania online, jednak w tym celu wykorzystamy JSBin:
Jak widać tło pierwszego „„Element jest zmieniany na„żółty”:
Przykład 2: Korzystanie z metody QuerySelector () w celu znalezienia elementów przez selektory CSS
Poniższy program zmienił element tekstowy za pomocą id = „próbka”:
Znalezienie elementów przez selektory CSS
Metoda QuerySelector ()
Zmienimy element tekstowy z:
To jest element P mający.
Wykonanie powyższego kodu wyświetli następujące dane wyjściowe:
Przykład 3: Korzystanie z metody QuerySelector () w celu znalezienia elementów przez selektory CSS
W trzecim przykładzie użyjemy „QuerySelelect ()„Metoda znalezienia pierwszego
element z rodzicem, a następnie zmień kolor tła na „żółty”:
Pierwszy element
Jestem pierwszym elementem P, a elementem div jest moim rodzicem
Drugi element
Jestem drugim elementem P, a div jest elementem jest mój rodzic.
Kliknij poniższy przycisk, aby zmienić kolor tła pierwszego elementu P
Kliknij na "Zmień kolor”Przycisk, aby zmienić kolor tła pierwszego
element:
querySelelectionAll () Aby znaleźć elementy przez selektory CSS
W HTML metoda QuerySelectorall () zwraca statyczny obiekt Nodelist, który zawiera zbiór elementów dziecięcych elementu dopasowanego do określonych selektorów CSS. Liczby indeksu służą do znalezienia węzłów, zaczynając od 0.
Składnia
element.querySelelectionAll (selektory)Metoda QuerySelectorAll () przyjmuje „Selektory”Jako argument, który jest ciągiem DOM, który zawiera jeden lub więcej prawidłowych selektorów CSS.
Przykład 1: Korzystanie z metody QuerySelectorAll () w celu znalezienia elementów przez selektory CSS
W pierwszym przykładzie użyjemy metody QuerySelectorAll (), aby znaleźć wszystko
elementy w dokumencie. Po zrobieniu tego ustawi „kolor tła”Pierwszego
Element do „różowy”:
Główny nagłówek z
Pierwszy akapit z.
Drugi akapit z.
Zmień kolor tła pierwszego elementu P za pomocą
Uwaga: Uczymy się, jak znaleźć elementy selektorów CSS
Jak widać, tło pierwszego
element jest zmieniany na „różowy”:
Przykład 2: Korzystanie z metody QuerySelectorAll () w celu znalezienia elementów przez selektory CSS
Teraz napiszemy program JavaScript, aby znaleźć całkowitą liczbę elementów za pomocą „instruktaż„Klasa za pomocą„długość„Własność obiektu Nodelist:
Pierwszy element DIV z
Drugi element div z
Element P z
Kliknij następujący przycisk, aby dowiedzieć się, w jaki sposób liczba elementów z klasą „samouczek”
Teraz wyjście pokaże „Kliknij" przycisk; Kliknij na niego, aby sprawdzić liczbę elementów za pomocą klasy = „instruktaż”:
Przykład 3: Korzystanie z metody QuerySelectorAll () w celu znalezienia elementów przez selektory CSS
W poniższym przykładzie użyjemy metody QuerySelelectall (), aby znaleźć „H2”,„div", I "Zakres" elementy. Po znalezieniu określonych elementów zmienimy ich kolor tła na „czerwony”:
Główny element
Drugi element H2
Element div
Element P.
Element P o = "Color: Blue;"> Span element
Kliknij następujący przycisk, aby ustawić kolor tła wszystkich elementów H2, Div i.