다시 오신 것을 환영합니다.
이 비디오에서는 자바 스크립트와 인형을 사용하여 요소를 선택하는 다양한 방법에 대해 이야기 할 시간을가집니다.
실제 셀렉터에 대해 이야기하기 전에 우리는 문서를 한 번 더 검토해야합니다.
모든 우리 기숙사의 모든 객체, 모든 요소의 표현은 모두이 문서 객체 안에 있습니다.
최상위 오브젝트 또는 루트 노드입니다.
이렇게 빨리 모든 브라우저 창을 열자.
나는 Google을 사용하고이 네 줄을 입력 해 보겠습니다.
그래서 콘솔을 열고 당신이 입력하는 문서 점을 입력하면 우리가있는 페이지의 URL을 보여줍니다.
문서 도트 링크를 할 수 있으며 페이지의 모든 단일 링크의 전체 목록입니다.
우리가 할 수있는 모든 앵커 태그는 Vadi와이 몸 안의 다른 모든 요소가 몸 전체에 있다는 것을 문서화 할 수 있으며 우리는 문서 점 머리를 할 수 있습니다.
그래서 우리는 이미 지난 몇 비디오에서 이것을 보았습니다.
제가 여러분에게 다시 보여주고있는 이유는 우리가 배우려는 모든 선택자가 문서 안에 살고 있기 때문입니다.
그래서 우리가이 비디오에서 배우는 모든 것이 문서 점으로 시작될 것입니다.
그래서 나는 그 사람들의 모습을 보여줄 것입니다.
이 비디오에서 우리가 이야기 할 5 가지 주요 방법이 있습니다.
그것들은 모두 문서에 내장되어 있습니다.
그들은 모두 문서 점으로 시작합니다.
당신은 여기에서 그들을 볼 수 있습니다. id에 의해 요소를 얻습니다. 클래스 이름에 의해 요소를 가져옵니다. 태그 이름으로 큐리 선택기와 큐리 선택기로 요소를 가져옵니다.
여러분이 비디오로 돌아가서 생각해 볼 수 있다면, 우리는 객체 대신에 값으로 함수를 저장할 수있는 객체에 메소드를 추가하는 것에 대해 생각했습니다.
우리는 개 공간에서 고양이 공간과 같았고 개 공간 객체에 추가 한 방법을 말해야했습니다.
그게 바로 여기서 일어나는 일입니다.
이 5 가지 메소드는 모두 문서 객체에 추가되었습니다.
따라서 실제로 시작하기 전에 데모 목적으로 사용할 H-G 메일을 보여 드리고자합니다.
매우 간단한 페이지로, 몇 가지 요소 만 있습니다.
그래서 우리의 정상적인 머리는 제목이나 몸을 제외하고는 거의 비어 있습니다.
그리고 H-1에 몸 안에는 인사하는 사람이 있습니다.
작별 인사하는 또 다른.
그리고 UL과 3 명의 동맹국 대신에 3 명의 동맹국이 항목 1과 2를 약간 씩 나열합니다.
처음에는 ID 강조 표시가 있고 마지막에는 bolded라는 클래스가 있습니다.
그래서 우리는 그것을 사용할 것입니다.
사실 그 중 일부는 H-1 요소 중 일부는 동맹입니다.
일부에는 수업이 있습니다.
하나는 ID가 있습니다.
우리는 다양한 속성을 사용하여 다양한 방식과 다양한 조합으로 선택하려고합니다.
그래서 저는 예제에서이 동일한 코드를 사용하고 있으며 다음 몇 슬라이드에서 볼 수 있도록 녹색 상자를 그립니다.
선택한 항목 주위의 녹색 상자.
이제 첫 번째 방법부터 시작해 보겠습니다.
ID로 요소 가져 오기.
그래서 그 이름은 조금만 자명하다.
ID 이름을 가져오고 그 ID와 일치하는 요소 하나를 반환합니다.
ID는 페이지에서 한 번만 발생할 수 있습니다.
다음은 ID별로 요소를 가져 오는 예제 문서입니다.
하이라이트가 ID 강조 표시가있는이 동맹을 선택하여 개체를 선택한 다음 다시 표시합니다.
나는 그것을 평의회에서 신속하게 보여줄 것입니다.
ID 이름 인 id 하이라이트로 문서 유형 get 요소에 콘솔을 열어 보겠습니다.
tag라는 변수에 저장해 봅시다.
들어가십시오.
TAG를 살펴 보겠습니다.
그리고 ID가 하이라이트 인 첫 번째 줄을 제공한다는 것을 알 수 있습니다.
그래서 우리는 ID로 무언가를 선택했습니다.
실제로 실제로 노화 된 것처럼 보이지만 사실이 결과는 실제로 자바 스크립트 객체입니다.
우리가 할 수있는 일은 Diyar를 다시 태그로 취소 한 것입니다.
그리고 이것은 실제로 어떻게 생겼는지입니다.
이러한 모든 속성.
그래서 이것은 우리가 선택한 것을 시각적으로 볼 수있는 바로 가기입니다. 그러나 사실 그것은 객체 표현입니다.
좋아, ID로 요소를 얻는 것이 전부다.
우리는 하나의 문자열 인수에 원하는 ID의 이름을 전달하는 메소드를 호출 한 다음 동일한 ID를 가진 일치하는 요소를 찾아서 객체 표현을 반환합니다.
다음은 클래스 이름으로 요소를 가져 와서 이름이 정확히 무엇을하는지 알려줍니다.
ID로 요소를 가져 오는 것과 같습니다.
이것은 약간 다르긴하지만 클래스 이름으로 S와 함께 요소 복수를 가져옵니다.
수업은 우리가 원하는만큼 여러 번 발생할 수 있다는 것을 기억하십시오.
따라서 굵게 표시된 문자열을 전달하면 일치하는 클래스 이름이 굵게 표시된 페이지의 모든 요소 목록이 반환됩니다.
이 경우에는 두 가지가 있지만 페이지에 해당 클래스가있는 요소가 10000 개있는 경우 목록에 모두 10000 개를 가져옵니다.
그럼 여기에 문서를 클래스 이름으로 요소를 가져오고 우리가이 작은 자동 완성을 얻었는지 확인할 수 있도록 클래스 이름으로 요소를 가져 와서 원하는 클래스 이름을 굵게 표시 할 수 있는지 확인할 수 있습니다.
변수에 저장해 봅시다.
태그는 태그가 아니라 태그입니다. 태그가 무엇인지 알면 여러 개의 태그를 다시 가져올 것이기 때문입니다.
둘 다 굵은 체와 동등한 두 가지 거짓 목록입니다.
기술적으로 배열이 아닙니다.
그것은 배열과 같은 노드 목록이라고하는 것입니다.
나는 그것을 가벼운 배열로 생각하고 싶다.
그래서 배열에서 기대할 수있는 것들이 있습니다.
그러나 일부 고급 기능은 실제로 빠져 있습니다.
예를 들어 인덱스 태그 0을 사용하여 이와 같은 요소에 액세스 할 수 있습니다.
우리는 outflank 태그를 할 수 있지만 각각에 대해 각 루프 태그 도트를 수행 할 수는 없습니다.
그리고이 작업을 수행하면 각 태그가 태그임을 나타냅니다.
그것은 기능이 아닙니다.
배열에 정의 된 이러한 노드 목록에 대해 정의 된 foreach가 없기 때문에 이것들은 배열이 아닙니다.
그리고 이드의 요소를 얻는 것만으로도이 멋진 문자열 표현을 보여 주지만 장면 뒤에는 실제로 객체입니다.
그래서 다시 당신이 콘솔 DIR을 증명하기 위해 우리는 태그의 제로를 수행합니다.
그리고 실제로는 수많은 속성을 가진이 커다란 복잡한 미친 개체입니다.
클래스 이름으로 요소를 가져옵니다.
목록을 반환합니다.
배열이 아닙니다.
그리고 여기에는 우리가 제공 한 클래스 이름과 일치하는 페이지의 모든 요소가 포함되어 있습니다.
다음으로 태그가 붙은 이름으로 요소를 얻습니다.
그래서 이것은 ID로 요소를 얻거나 클래스 이름으로 요소를 얻는 것과 같습니다.
그것은 Ally 또는 H-1과 같은 주어진 태그 이름과 일치하는 요소의 목록을 반환합니다.
그래서이 경우 저는 document dight를 실행하고 있습니다 태그 이름 Alhaj가이 페이지에 존재하는 세 명의 동맹 자 목록을 나에게 돌려 줄 것입니다.
다시 한번 var 태그가 태그 이름으로 요소를 가져온 문서와 같고 Alhaj를 먼저 살펴보고 태그를 살펴 보겠습니다. 또한이 목록을 알기 쉽게 배열 한 것은 3 개의 동맹을 가진 노드 목록이며이를 증명하지는 못할 것입니다. 이번에는 너에게.
나는 영사에게 DJR에 갔다.
그러나 이것들은 단지 문자열이 아니라 객체가 아닙니다.
H 조 timl 그들은 실제로 그 모든 속성을 가진 자바 스크립트 개체입니다.
그래서 저는 H-1에 대해서도 똑같이 할 수 있습니다.
그래서 우리는 모든 h 개의 것들을 선택하고 우리는 태그들을 보았고 우리는 h와 그것들을 얻었습니다.
우리가 몸 안에있는 태그에만 국한되지 않습니다.
나는 또한 이와 같은 것을 할 수있다.
태그 이름 본문으로 요소를 가져 오면 하나의 요소가 포함 된 목록이 나에게 반환됩니다.
또는 머리 또는 시간 요소 또는 제목이나 내가 원하는대로 할 수도 있지만 중요한 부분은 하나의 요소 만 있어도 여전히 목록을 반환하는 경우에도 목록을 반환한다는 것입니다.
그래서 시체를 선택하기 위해 우리는 var body ECO 문서를 태그 이름 본문으로 요소를 얻은 다음 그 목록에 단 하나의 항목 만 있기 때문에 첫 번째 항목을 가져 오는 것과 같은 것을 할 수 있습니다.
그리고 우리가 어떤 시체를 보았다면 우리는이 거대한 오브제를 몸 전체로 가져옵니다.
승인.
태그 이름으로 요소를 가져옵니다.
그냥 앨리처럼 태그 이름을 다시 붙이세요.
그것은 그것과 일치하는 모든 요소를 ​​찾아내어 목록에 모두 반환합니다.
단 하나만 있어도.
그래서 여기에 H-1을 사용하는 또 다른 예가 있습니다.
당신은 그것이 두 개의 H를 한 번 선택한다는 것을 볼 수 있습니다.
좋아, 이제 우리는 기어를 조금 바꾼다.
우리는 더 이상 get 요소를 갖지 않거나 무언가 구문으로 요소를 얻지 않습니다.
이것은 큐리 선택기라고하며 쿼리 선택기는 오래 동안 존재하지 않은 새로운 방법입니다.
그것은 정말로 우리 삶을 훨씬 쉽게 만듭니다.
그래서 우리는 실제로 우리가 본 모든 것을하기 위해 그것을 사용할 수 있습니다. id에 의해 요소를 얻습니다. 클래스 이름으로 요소를 얻습니다. 태그 이름을 가진 요소를 얻습니다. 우리는 모든 것을 쿼리 선택자로 복제 할 수 있습니다.
CSSA 스타일 선택기가 필요합니다.
따라서 CSSA 스타일 선택기는 CSSA 문서 대신 사용할 선택기를 의미합니다.
그래서이 예제에서는 ID 강조 표시를 기반으로 무언가를 선택합니다. 따라서 ID로 요소를 가져온 것처럼 하이라이트라는 단어를 쓸 수는 없지만 해시 기호 또는 Octa와 함께 CSSA 구문을 사용해야합니다 Thorpe를 선택하고 강조 표시합니다.
따라서 쿼리 선택기로 무언가를 선택하는 방법입니다.
C S와 똑같은 ID를 원하면 ID와 하이라이트가 같은 첫 번째 동맹을 얻습니다.
내가 콘솔에 가서 타이핑하기 전에 클래스 이름으로 같은 것을 할 수 있다는 것을 보여줄 것입니다. var 태그는 C S를 사용하여 굵게 표시된 클래스를 선택하는 방법 인 queery selector가 접혀있는 문서와 같습니다.
중요한 점은 실제로 첫 번째 경기 만 제공한다는 것입니다.
따라서 클래스로 굵게 표시된 두 개의 요소가 있지만 첫 번째 요소 만 제공하므로 선택자가됩니다.
그것은 항상 하나의 요소를 반환합니다. 우리가 곧 볼 수있는 또 다른 메서드가 있습니다.이 메서드는 일치하는 모든 요소를 ​​반환합니다.
따라서 쿼리 선택기는 여기에있는 것처럼 태그 이름을 사용할 수 있습니다.
H-1이고 맨 처음 H-1을 반환합니다.
따라서 우리는 항상 CSSA 선택기를 사용하여 SS를 볼 수 있으며이 구문을 사용하여 쿼리 선택기로 요소를 선택할 수 있습니다.
그래서 여기에서 그것을 설명 할 것입니다.
이 문제를 해결하고 먼저 이것을 선택하겠습니다.
H-1.
그래서 내가해야 할 모든 것.
Var H-1은 문서 쿼리 선택기 H-1과 동일합니다.
그리고 우리가 H1이 무엇인지 다시 보면 좋은 문자열 표현이지만 사실이 전체 요소를 나타내는 객체입니다.
다음은 ID를 기반으로 선택해 봅시다.
그래서 저는 H-1보다는이 라인을 복사 할 것입니다.
이것은 동맹국이 될 것이며 첫 번째 H-1을 선택하는 대신 ID 강조 표시가있는 첫 번째 항목을 선택합니다.
물론 물론 ID가 하나뿐이기 때문에 페이지에는이 아이디어가있는 항목이 하나뿐이므로 필요합니다.
Octa Thorgeir.
그렇지 않으면 존재하지 않는 하이라이트라는 태그 이름을 찾아 헤이저 밖으로 내보낼 것입니다.
그리고 내가 입력을 치고 Alhaj를 보았을 때 나는 목록 항목 1 ID가 하이라이트와 같은 첫 번째 동맹국을 얻습니다.
마지막으로 수업을 통해 똑같은 일을 해봅시다.
그래서 저는 CSSA Leichter를 사용하여 클래스를 선택하는 방법을 접었습니다. 그리고 우리가 Ally를 보았을 때 클래스 동등한 글 머리 기호 목록 항목 2를 가진 두 번째 동맹자가됩니다.
그래서 우리가 선택할 수있는 다른 것들이 있습니다.
태그 이름이나 ID 또는 클래스를 기반으로하는 것이 아닙니다.
그것들은 가장 일반적이지만 내 페이지에서는 작동하지 않는 다른 일을 할 수는 있지만, 특수 클래스로 동맹군 안의 모든 앵커 태그를 선택할 수 있습니다.
그리고 이것은 더 긴 C Ss 선택 자이지만 그것은 미국에서 유효합니다.
따라서 모든 앵커 태그는 동맹국 내부에 중첩되어 있으며 완전히 유효합니다.
다시는 내 페이지에이 설정이 없습니다.
그래서 내가 Enter를 누르면 그냥 줘.
일치하는 항목을 찾지 못해서
그래서 Querrey selector가 첫 번째 일치를 반환한다고 말했지만 그게 전부입니다.
때로는 시체를 선택하고 싶을 때 유용합니다.
내가해야 할 일은 질의 선택기 몸체를 말하면, 문서를 찍었을 때와 달리 몸체가 태그 이름 몸체로 요소를 얻는다는 것입니다.
그들은 나에게 목록을 준 다음 첫 번째 요소를 물어야했습니다.
쿼리 선택기를 사용하면 즉시 시체를 가져옵니다.
그러나 대안은 모두 큐리 선택기입니다.
그래서 정확히 같은 방식으로 작동합니다.
C 선택기가 필요하지만 모든 일치하는 요소를 반환합니다.
이 경우 쿼리 선택기의 모든 H-1이 한 번만 반환하거나이 경우 굵게 표시된 클래스를 사용한다는 문서를 사용하고 있습니다.
그래서 CSS 스타일.
굵게 표시된 점이 필요합니다. 그러면 두 가지 요소가 굵게 표시됩니다.
그럼 그걸 증명해 봅시다 ..
지금까지 모든 동맹국을 선택합시다.
Allies는 쿼리 선택기와 같은 문서입니다.
모든 동맹 자.
그리고 그것은 저에게 모두 줄 것입니다.
나는 동맹국을 바라본다.
3 개의 맹방이 있음을 알 수 있습니다.
마지막으로 내가 깨진 기록이라는 것을 알았습니다.
이들은 객체입니다.
그들은 HMO가 아닙니다.
그것들은 HMO로 구성된 javascript 객체입니다.
그리고 같은 일을한다면 쿼리 선택기로 대신 입력하고 Enter 키를 누릅니다.
내가 동맹국을 본다면 그것은 목록이 아니며 오직 하나뿐입니다.
내가 수업을 위해 한 것처럼 똑같은 일.
그럼 굵게 표시된 클래스에 대해 살펴 보겠습니다.
굵게 표시하고 쿼리 선택기가 굵은 체로 표시되도록 문서화 해 두었습니다.
그리고 그것도 첫 번째 항목 목록 항목 일뿐입니다.
그리고 쿼리 선택기를 모두 사용하면 그 다음에는 그 둘 모두와 함께 목록을 얻습니다.
학생들에게 종종 혼란스러운 점 중 하나는 찾고자하는 요소가 하나라도 쿼리 선택기를 사용할 수 있다는 것입니다.
그래서 당신은 var ally가 document dot query selector와 같은 것을 할 수 있습니다.
하이라이트와 같은 ID와 앨리 (Ally)를 보는 것은 모두 하나의 항목을 가진 목록입니다.
그것은 당신이 그렇게하는 것이 매우 드뭅니다 만, 오직 하나의 매칭 만 있다면 여전히 작동 할 것입니다.
좋습니다. 그래서이 비디오에서 많은 부분을 다루었습니다.
그러니 처음으로 돌아가서 정말 빨리 마무리하겠습니다.
우리는이 모든 메소드가 문서 객체의 내부에있는 방법에 대해 이야기했습니다. ID로 요소를 가져올 수있는 ID로 선택할 수 있습니다. 클래스 이름으로 클래스 이름별로 요소를 선택하고 클래스 이름별로 요소를 가져올 수 있으며 실제로는 그렇지 않은 목록을 반환합니다. 정렬.
이를 노드 목록이라고합니다.
우리는 같은 일을 할 수 있지만, 태그 이름을 사용하여 GET 요소를 사용하면 우리가 선택한 요소 유형을 기반으로 노드 목록을 반환합니다. 모든 거래의 잭인 쿼리 선택기가 있습니다.
지정된 CSSA 선택기와 일치하는 첫 번째 요소를 반환합니다.
그래서 id 클래스 이름과 태그 이름으로 요소를 얻는 모든 것을하기 위해 사용할 수 있습니다. 우리가 여기에서하는 것처럼 여기에서하는 것처럼 ID 나 요소 이름을 부여 할 수 있습니다.
그런 다음 배열이 아닌 목록을 반환한다는 점을 제외하면 동일한 방식으로 작동하는 쿼리 선택기가 있습니다.
또한 주어진 선택기와 일치하는 모든 요소가있는 노드 버스트입니다.
괜찮아.