To find the h1 element,
I simply used the siblings method and
passed in the filter h1.
For the kids, I used find and
a passed in a *.
I'll come back to this in a second.
And then for the parents, I used the
.parents method and passed in the string
div, otherwise I would select all
the parents, including the body.
To test this, I press Test Run, saw the
page come up, and then open dev tools.
I see that I've gotten h1,
like I expected.
I see the children of article-list.
And I also see the two divs
that we were expecting.
Now why did I pass a * to find?
Looking at the documentation for it,
we see that the selector isn't optional.
We've got to included it.
But if we scroll down, we find this
message, which says that if we want to
select all of the descendant elements,
or all of the children, we can simply
pass in the universal selector, which
in this case is a string of a star.
See?
Reading documentation
is super important.
Okay, enough with these selections.
Now I want you to start manipulating the
،لكي أعثر على العنصر h1
لم أستخدم سوى أسلوب siblings ومررت
.عامل التصفية h1
أما بالنسبة لعنصر kids، فقد استخدمت find
.ومررت a *
.سأعود إلى هذه النقطة مرة أخرى خلال لحظات
ولعنصر parents، استخدمت
أسلوب parents ومررت السلسلة.
div، وإلا كنت سأحدد كل
.عناصر الأصول، بما في ذلك النص الأساسي
لاختبار ذلك، سأضغط على Test Run، فأرى الصفحة
.تظهر، ثم أفتح أدوات المطور
أرى بأني قد حصلت على h1
.كما توقعت
.أرى توابع article-list
وأرى أيضًا السلسلتين divs
.اللذين كنا نتوقعهما
والآن لماذا أمرر a * للبحث؟
،إذا نظرنا إلى الوثائق الخاصة بالمحدد
.فسنرى بأن المحدد ليس اختياريًا
.يمكننا تضمينه
لكن إذا مررنا لأسفل، سنجد بأن هذه
الرسالة التي تخبرنا بأنه إذا كنا نريد
،تحديد كل العناصر التابعة
أو كل التوابع، يمكننا ببساطة
تمرير المحدد العام الذي
.هو في هذه الحالة سلسلة مكونة من نجمة
أترون؟
قراءة الوثائق
.مهم للغاية
.حسنًا، يكفي هذا بالنسبة لهذه التحديدات
والآن أريد منكم أن تبدءوا في معالجة
h1 요소를 찾으려고 .siblings() 메소드를 쓰고
h1을 필터로 썼어요
자식 요소들을 찾을 땐 .find()에 *를 보냈죠
이건 잠시 후에 다시 살펴볼게요
부모 요소를 찾을 땐 .parents() 메소드를 쓰고
div를 문자열로 보냈어요
그렇지 않으면 모든 body를 포함한
모든 상위 요소들이 선택되니까요
테스트를 위해서 Test Run로 페이지를 띄우고
개발자 도구를 열겠습니다
예상대로 h1이 선택된 것을 볼 수 있네요
article-list의 자식 요소들과
두 div들도 확인할 수 있습니다
.find()에는 왜 *을 사용했을까요?
문서를 보면 선택자는 필수적인 것을 알 수 있습니다
반드시 포함을 해야 하는 거죠
아래로 내려가면 이런 메시지가 있네요
모든 하위 요소들을 선택하려면
즉 모든 자식 요소들을 선택하려면
전체 선택자를 보내면 된다고 합니다
여기서는 전체 선택자가 * 문자열인거죠
그렇죠?
문서를 읽어보는 건 아주 중요합니다
뭐 이 정도면 선택 방법은 충분히 봤네요
이제 DOM 조작을 시작하면 될 것 같습니다
Para encontrar o elemento h1,
simplesmente usei o método siblings e o passei
no filtro h1.
Para kids, usei find e
passei um *.
Voltarei a isso em alguns instantes.
E para parents, usei o método
.parents e passei a string
div, caso contrário, selecionaria
os pais, inclusive o corpo.
Para testar isso, pressionei Test Run, vi a
página carregar e abri as ferramentas do desenvolvedor.
Vejo que tenho h1,
como esperava.
Vejo os filhos de article-list.
E também vejo os dois divs
esperados.
Mas por que passei um * a find?
Analisando a documentação dele,
observamos que o seletor não é opcional.
Temos que incluí-lo.
Mas se rolarmos a tela para baixo, encontramos esta
mensagem, que diz que se quisermos
selecionar todos os elementos descendentes,
ou todos os filhos, podemos
passar o seletor universal,
que aqui é uma string de *.
Está vendo?
Ler a documentação
é superimportante.
OK, chega dessas seleções.
Agora quero começar a manipular o
Щоб знайти елемент h1, я використав метод siblings
і ввів його в фільтр h1.
Для дітей я використав find і ввів сюди a *.
Повернуся до цього за мить.
І потім для батьків я використав .parents метод і ввів в рядок
div, інакше треба було б обрати всіх батьків, включаючи основну частину.
Щоб перевірити це, я тисну Test Run, бачу як з'являються сторінки і потім відкриваю dev tools.
Бачу, що отримав h1 як і очікував.
Бачу дочірні елементи article-list.
І також бачу два divs, як і треба було.
Тепер навіщо я ввів a * у find?
Проглядаючи його опис, ми бачимо, що цей селектор не факультативний.
Треба було його включити.
Але якщо ми перейдемо вниз сторінки, то бачимо повідомлення, яке інформує, що якщо
ми хочемо вибрати всі нижні елементи або всіх дітей, то можемо просто
перейти в універсальний селектор, який в цьому випадку є знак зірки.
Бачите?
Читати документацію дуже важливо
Окей, досить з цими селекціями.
Зараз я хочу почати керувати