Witamy spowrotem.
W tym filmie mamy zamiar spędzić czas rozmowy na temat różnych sposobów wyboru elementów za pomocą JavaScript i lalkę.
Przed mówimy o rzeczywistych selektorów musimy po prostu przejrzeć dokument jeszcze raz.
Należy pamiętać, że cała nasza dorm wszystkie obiekty wszystkie reprezentacje wszystkich elementów naszych żyć wewnątrz tego obiektu dokumentu.
Jest to górna przedmiotem poziom lub węzeł główny.
Więc niech szybko otworzyć żadnego okna przeglądarki.
Mam zamiar korzystać z Google i spróbujmy wpisując te cztery linie.
Więc otwórz konsolę i rodzaj dokumentu dot jesteś l i pokazuje nam adres URL strony, że jesteśmy na.
Można zrobić dokument łączy kropki i to jest cała lista każdego linku na stronie.
Każdy tag kotwicy możemy zrobić dokument Vadi i to jest całe ciało z każdym innym elementem wewnątrz niej, że mieszka w organizmie i możemy zrobić głowę dokument dot.
Więc już widzieliśmy to w ciągu ostatnich kilku filmów.
Powodem, dla którego jestem przedstawiający go do ciebie znowu jest to, że wszystkie selektorów wszystkich metod mamy zamiar nauczyć się też żyć wewnątrz dokumentu.
Więc wszystko uczymy się w tym filmie ma zamiar zacząć dokument dot coś.
Więc pokażę ci, co są te latków.
Istnieje pięć głównych metod mamy zamiar mówić o tym filmie.
Oni wszyscy wbudowane w dokumencie.
Wszyscy zaczynają się dokument kropką.
Można je zobaczyć tutaj uzyskać elementu przez ID uzyskać elementy o nazwie klasy uzyskać elementy wg nazwy tag selektora queery i selektora queery.
Wszystko, jeśli można myśleć z powrotem do filmu zrobiłem na dodanie metod do obiektu, w którym możemy przechowywać w zasadzie funkcję jako wartość zamiast obiektu.
Mieliśmy jak przestrzeń kotów w przestrzeni psa i mieliśmy mówić metodę, dodaliśmy do naszej przestrzeni psa obiektu.
To jest dokładnie to, co się tutaj dzieje.
Te pięć metod wszystkie zostały dodane do obiektu dokumentu.
Więc zanim faktycznie zacząć tutaj chcę pokazać Ci pocztę H-G, które mam zamiar wykorzystać w celach demonstracyjnych.
Jest to bardzo prosta strona ma tylko kilka elementów.
Więc nasza normalna głowa jest prawie pusta oprócz tytułu lub ciała.
A potem wewnątrz ciała do H-1 jest taki, który mówi cześć.
Innym, że żegna.
A potem trzy sojusznikami zamiast UL i te trzy sojusznicy element listy jeden dwa i trzy są nieco inne.
Pierwszy z nich posiada podświetlenie identyfikatora i ostatni posiadają klasę o nazwie pogrubione.
Więc mamy zamiar użyć.
Fakt, że niektóre z nich są H-1 niektóre elementy są sojusznikami.
Niektóre zajęcia.
Jeden ma identyfikator.
Mamy zamiar wykorzystać te różne właściwości, aby je zaznaczyć na różne sposoby iw różnych kombinacjach.
Więc używam tego samego kodu tu w przykładach i Rysuję zielone pola, dzięki czemu można zobaczyć w kilku następnych slajdach.
zaznaczona jest na zielono skrzynki wokół cokolwiek.
OK, tak więc zaczynajmy z pierwszej metody.
Uzyskaj elementu przez ID.
Dlatego jego nazwa jest trochę oczywiste.
To trwa w nazwie ID i to się dzieje, aby przywrócić jeden element, który pasuje do tego ID.
Pamiętaj, że ID może wystąpić tylko jeden raz na stronie.
Tak oto przykład dokument diked get elementu przez ID.
Punktem kulminacyjnym będzie wybrać tę, która ma sojusznika Id podświetlenie więc wybiera obiekt, a następnie wraca do nas.
Ja szybko pokazać, że w radzie.
Więc będziemy otwierać konsolę do typu dokumentu get elementu przez ID podświetlenia, która jest nasza nazwa ID.
Ratujmy go do zmiennej o nazwie znacznika.
Hit enter.
I spójrzmy na TAG.
I widać, że daje nam pierwszy wiersz, który ma identyfikator równy podświetlić.
Więc wybraliśmy coś przez ID.
Znowu to pokazuje nam to, jakby to faktycznie wieku go dobrze, ale efektem jest to faktycznie javascript obiektu.
Tak więc możemy zrobić anulowana, że ​​Diyar ponownie znacznika.
I to jest w rzeczywistości, jak to wygląda.
Wszystkie te właściwości.
Więc to jest po prostu ładny skrót dla nas wizualnie zobaczyć, co wybraliśmy, ale w rzeczywistości jest to reprezentacja obiektu.
Dobrze więc, że wszystko tam jest uzyskanie elementu przez ID.
Nazywamy metodę mijamy w jednym argumencie String Nazwa identyfikatora, który chcemy, a potem idzie i znajdzie pasujący element, który ma ten sam identyfikator i zwraca reprezentację obiektu do nas.
Kolejnym z nich jest uzyskać elementy o nazwie klasy, więc sama nazwa mówi dokładnie to, co robi.
Podobnie jak uzyskać elementu przez ID.
Choć jest to nieco inna Get elementy mnogiej z S od nazwy klasy.
Pamiętaj klasy może nastąpić tyle razy ile chcemy na stronie.
Więc przekazać w ciągu jak pogrubione i że zamierza powrócić do listy wszystkich elementów na stronie, które mają nazwę dopasowanie klasy pogrubione.
W tym przypadku nie ma dwóch z nich, ale gdyby nie było dziesięć tysięcy elementów na stronie, która miała tę klasę chcemy uzyskać wszystkie 10000 na liście.
Więc chodźmy wykazać to więc ocenić dokument get elementu poprzez nazwę klasy i można zobaczyć, jeśli mamy ten mały autouzupełniania tu, więc możemy wybrać ten, który chcemy uzyskać elementy o nazwie klasy, a następnie nazwę klasy chcemy jest pogrubiony.
Ratujmy go do zmiennej.
Tagi nie oznacz, ale tagi, ponieważ mamy zamiar uzyskać wiele tagów powrotem, jeśli spojrzymy na to, co jest znaczniki.
Jest to lista dwoma leży zarówno z klasą równej pogrubione.
Technicznie nie jest tablicą.
To coś, co nazywa się lista węzeł, który jest tablicą podobne.
Lubię myśleć o nim jako o lekkiej tablicy.
Więc chodzi o niektóre z rzeczy, jakich można oczekiwać od tablicy.
Ale niektóre z bardziej zaawansowanych funkcji są rzeczywiście brakuje.
Tak na przykład możemy uzyskać dostęp do elementów, takich jak ta z użyciem znaczników indeksu 0.
Możemy to zrobić tagów outflank ale nie możemy zrobić dla każdej pętli tagi Dot dla każdego.
A jeśli po prostu zrobić to będzie mi powiedzieć, znaczniki są dla każdego.
To nie działa.
Więc to dlatego, że nie ma zdefiniowane dla tych list węzła, który jest zdefiniowane dla tablic, a te nie są macierze foreach.
I podobnie jak w przypadku uzyskać elementu przez ID pokazuje nam ten piękny ciąg znaków, ale za kulisami, to faktycznie obiektem.
Więc jeszcze raz, żeby udowodnić, że do was pocieszać dot DIR i robimy znacznika zerowego.
I faktycznie jest to duży kompleks szalony obiektu z tonami właściwości.
OK, więc przejdźmy elementy według nazwy klasy.
Zwraca listę.
Nie dość tablicą.
I zawiera wszystkie elementy na stronie, która odpowiada danej nazwie klasy, że do tego celu.
Następna w kolejce mamy się elementy, których autorem jest znakowanym nazwy.
Więc ta działa podobnie jak dostać elementu przez ID lub uzyskać elementy o nazwie klasy.
Oprócz tego, że zwraca listę elementów, które pasują do podanej nazwie jak Ally lub H-1.
Więc w tym przypadku Biegnę dight dokument uzyskać elementy wg nazwy tag Alhaj, że zamierza powrócić do mnie listę trzech sojuszników, które istnieją na tej stronie.
Więc znowu niech wykazać, że znaczniki var równa dokument uzyskać elementy o nazwie znacznika i zróbmy Alhaj pierwszy i przyjrzyjmy tagów, a my się do tej listy również nie do końca tablicy jest to lista węzeł, który ma trzy sojuszników i nie będę tego udowodnić do was tym razem.
Poszedłem do konsula, że ​​DJR.
Ale są to obiekty nie są one tylko struny, czy nie.
H tim l są właściwie obiekty JavaScript z tymi wszystkimi właściwościami.
Więc mogę zrobić to samo dla H-1.
Będziemy więc zaznaczyć wszystkie te H i patrzymy na znaczniki i dojeżdżamy do H zer i listy.
To nie tylko ograniczony znacznikami, które widzimy wewnątrz ciała.
Mogę też zrobić coś takiego.
Uzyskaj elementy wg nazwy tag ciała i ma zamiar powrócić do mnie listy z jednym elementem ciało w jej wnętrzu.
Albo mogę też zrobić to za głowę lub elementu czasowego lub tytułu lub, co chcę, ale ważne jest to, że zwraca listę, nawet jeśli jest tylko jeden element, to nadal zwraca listę.
Tak więc, aby wybrać ciało mogliśmy zrobić coś takiego ciała var dokumentu eCos że dostać elementy wg nazwy tag ciała, a potem po prostu wziąć pierwszy element, ponieważ jest tylko jedna pozycja na tej liście.
A jeśli spojrzymy na to, co organizm jest dostać ten gigantyczny obiekt, który w całym organizmie.
OK.
Więc to Get elementy według nazwy znacznika.
Wystarczy przypomnieć, nadać mu nazwę znacznika takiego sojusznika.
To idzie i znajdzie wszystkie elementy, które pasują i zwraca je wszystkie do ciebie w postaci listy.
Nawet jeśli jest tylko jeden.
Więc mam inny przykład robi to z H-1.
Widać, że wybiera dwa H raz.
Ok, więc teraz musimy zmieniać biegi trochę.
Nie mamy już element GET lub dostać coś elementy składni.
Nazywa się to selektor queery i selektor zapytania to nowsze metody, która nie istnieje już tak dawno.
To naprawdę sprawia, że ​​nasze życie o wiele łatwiejsze.
Więc właściwie można go użyć do zrobienia wszystkiego, co widzieliśmy z elementem Otrzymuj id uzyskać elementy według nazwy klasy uzyskać elementy o nazwie znacznika możemy replikować wszystko to z selektorem zapytaniami.
Więc co robi to trwa selektor stylu CSSA.
Więc selektor stylu CSSA oznacza, byle z selektorów użylibyśmy zamiast dokumentu CSSA.
Tak więc w tym przykładzie mam wybierając coś oparciu off z podświetleniem ID więc nie można po prostu napisać podświetlenie słowo tak jak ja, z elementem Otrzymuj ID ale muszę zrobić, to użyć składni CSSA symbolem krzyżyka lub Octa Thorpe, a następnie zaznaczyć.
Tak to jest, jak wybrać coś z selektorem zapytania.
Jeśli chcesz identyfikator podobnie jak przy połączeniach z Css i mamy ten pierwszy sojusznikiem o ID równym podświetlić.
Przed I przejść do konsoli i wpisz to uwagę Pokażę ci, co możemy zrobić to samo z tagiem nazwa klasy var równa dokument queery selektor dot złożoną, która jest jak będziemy wybierać pogrubiony klasy przy użyciu C SS.
I co ważne jest to, że właściwie tylko daje nam bardzo pierwszy mecz.
Dlatego, mimo że istnieją dwa elementy, które są pogrubione w klasie tylko daje nam pierwszy z nich i to jest punkt selektora.
Zawsze po prostu zwraca jeden element nie ma innej metody zobaczymy wkrótce, że zwróci wszystkie elementy, które pasują.
Więc selektor zapytanie może również podjąć w nazwie znacznika jak my tu mamy.
H-1 i zwraca pierwszego H-1.
Więc możemy CSSA selektorów, że piszemy cały czas i zobaczyć SS i możemy używać tej składni, aby wybrać elementy z selektorem zapytaniami.
Więc będę wykazać, że tutaj.
Pozwól mi się to oczywiste i niech wybrać to pierwsze.
H-1.
Więc wszystko, co trzeba zrobić.
Var H-1 jest równa wyboru zapytań Dokument H-1.
A jeśli spojrzymy na to, co H1 jest znowu to miły reprezentacji ciąg ale w rzeczywistości obiekt, który reprezentuje cały ten element.
Więc następnym aż spróbujmy wybierając oparte wyłączać z identyfikatorem.
Więc jestem po prostu skopiować tę linię zamiast H-1.
To będzie sojusznikiem i zamiast wybierania pierwszego H-1 będzie wybrać pierwszy element, który ma podświetlenie ID.
I oczywiście, że jest tylko jeden element, ponieważ jest to ID oczywiście to tylko jeden element, który ma tę ideę na stronie, a my potrzebujemy tego.
Octa Thorgeir.
W przeciwnym razie to będzie szukać nazwy tag nazwie podświetleniem, który nie istnieje i H. J. go.
A jeśli uderzę wejść i spojrzeć na Alhaj mam tego pierwszego elementu listy sojusznikiem z jednej ID równe podświetlenie.
Wreszcie zróbmy to samo z klasą.
Więc używam CSSA Leichter dot składany, który jest, jak wybrać klasę i jeśli spojrzymy na Ally uzyskać drugą pozycję sojusznika z klasy równa listy punktowanej 2.
Tak więc istnieją inne rzeczy, które możemy wybrać.
To nie tylko opiera się o nazwie znacznika lub identyfikatora lub klasy.
Są to najczęściej, ale możemy robić inne rzeczy, jak ta, która nie będzie działać na mojej stronie, ale mogłem wybrać wszystkie znaczniki zakotwiczenia wewnątrz sojusznika z klasy specjalnej.
A to już selektor C Ss ale jest to ważne w USA.
Tak więc wszystkie znaczniki kotwiące posiadają klasę specjalnych, które są zagnieżdżone wewnątrz sojusznika i to jest zupełnie poprawne.
Znowu nie mam to ustawić na mojej stronie.
Więc jeśli uderzę Wprowadź po prostu będzie mi dać.
Nie dlatego, że nie znaleźliśmy żadnych wyników.
Tak jak już wspomniałem selektor Querrey zwraca pierwszy mecz i to wszystko.
Czasami jest to przydatne na przykład jeśli chcesz wybrać się do organizmu.
Wszystko, co musisz zrobić, to znaczy ciało wyboru zapytań i który daje ciała w odróżnieniu od kiedy zrobiłem dokument diked uzyskać elementy wg nazwy tag ciała.
Dali mi listę, a potem trzeba było prosić o pierwszym elemencie.
Jeśli użyć selektora zapytań Ja po prostu ciało od razu.
Ale alternatywą jest queery selektor wszystkich.
Tak to działa dokładnie w ten sam sposób.
Zajmuje C selektora zestaw ale zwraca wszystkie elementy ogłoszeń.
Więc w tym przypadku używam udokumentować, że selektor kwerendy wszystkich H-1 powraca zarówno h jednorazowo lub w tym przypadku używam klasy pogrubiony.
Więc styl CSSA.
Potrzebuję dot pogrubione i że daje mi oba elementy z klasą równego pogrubione.
Warto więc wykazać, że w kon ..
Załóżmy, wybrać wszystkie sojuszników do tej pory.
Sojusznicy równa udokumentować, że selektor zapytania.
Wszystko sprzymierzeńcem.
I że będzie mi dać wszystkie z nich.
Patrzę na sojuszników.
Widać, że ma trzy sojuszników.
Ostatni raz wiem, że jestem zdarta płyta.
Są to obiekty.
Nie są one HMO.
Są to obiekty JavaScript, które są zbudowane z HMO.
A jeśli robię to samo, ale zamiast to zrobić z selektora zapytań i nacisnąć enter.
Jeśli patrzę na sojuszników nie jest to lista to tylko jeden.
Tak samo, jeśli zrobiłem to dla klasy.
Więc zróbmy to dla pogrubionej klasie.
Będziemy po prostu nazwać to pogrubione i czy dokument, który kropkę wyboru zapytania pogrubiony.
I patrzę na to, że to dopiero pierwszy element listy element zbyt.
A jeśli mam selektor zapytania wszystko, co następnie uzyskać listę z obu z nich tam.
Jeden punkt w błąd często dla moich uczniów jest to, że można nadal korzystać z selektora zapytań wszystko, nawet jeśli jest tylko jeden element szukasz.
Więc można zrobić coś jak var sojusznikiem równa dokumentu selektor zapytań dot.
Każdy z identyfikatorem podobnego podświetleniem i patrzę na Ally i to lista z jednej pozycji.
To jest po prostu dość rzadkie, że można to zrobić, ale będzie nadal działać, jeśli istnieje tylko jeden mecz.
Dobrze więc pokryte wiele ziemi w tym filmie.
Więc wróćmy do początku i zrobić naprawdę szybko zakończyć.
Zaczęliśmy rozmawiać o tym, jak wszystkie te metody są wewnątrz obiektu dokumentu możemy wybrać przez ID z elementem Otrzymuj ID możemy wybrać nazwy z klasy się elementy według nazwy klasy i zwraca listę, która nie jest w rzeczywistości szyk.
To się nazywa listę węzłów.
Możemy zrobić to samo, ale z wykorzystaniem elementów Otrzymuj nazwie znacznika, który będzie również zwraca listę węzłów w oparciu off typu elementu, który wybieramy wtedy mamy selektor zapytania, który jest gniazdem wszystkich branż.
Zwraca pierwszy element, który pasuje do danego selektora CSSA.
Więc możemy użyć go do zrobienia wszystkiego, by uzyskać elementu id nazwa klasy i nazwy znacznika nie możemy dać mu identyfikator jak my tutaj, w klasie, jak my tutaj, albo nazwa elementu.
A jeszcze selektor zapytania wszystko, co działa w ten sam sposób, oprócz tego, że zwraca listę, która nie jest tablicą.
Jest to także węzeł pękła z wszystkich elementów pasujących do danego wyboru.
W porządku.