[Powered by Google Translate] [DOM]
[토미 MacWilliams] [하버드 대학]
[이 CS50입니다.] [CS50.TV]
이 비디오에서 우리는 DOM을 살펴거야.
브라우저가 웹 페이지를 다운로드 할 때, 어떻게 든 메모리에 표현해야합니다.
문서 개체 모델 또는 DOM,
브라우저가 메모리에 웹 페이지를 나타내는 방법에 대해 설명합니다.
이 비디오에서는, 우리는 자바 스크립트의 컨텍스트에서 DOM에서 살펴 보겠습니다
하지만 DOM은 언어에 독립적 인 개념이다.
예를 들어, PHP뿐만 아니라 자신의 DOM 구현을 가지고 있습니다.
그러나 DOM 자주 자바 스크립트가 사용됩니다
자바 스크립트는 우리가 즉석에서 웹 페이지의 내용을 변경할 수 있기 때문에하는 것은,
와 DOM은 우리가 웹 페이지의 일부를 액세스 할 수 있습니다.
의는 예를 들어 웹 페이지를 살펴 보자.
자, 이제이 페이지는 DOM으로 표현하는 방법을 살펴 보자.
그리고 모든 나무의 상단에 루트 노드가 있어야합니다.
이 문서는 HTML 요소는 루트 노드
때문에 나타나는 첫 번째 요소이다.
의 우리의 트리의 루트 노드를 추가 할 수 있습니다.
의 다시 HTML 문서를 살펴 보자.
body 태그는 HTML 태그 안에 중첩 된 것을 알 수 있습니다.
이 본문 요소는 HTML 요소의 자식임을 의미합니다.
우리 몸 잎함으로써 우리의 DOM 트리에이 나타낼 수
HTML에서 하강.
의가 있다고 해 보자.
우리는 HTML 아래에 몸을있다.
이제 우리는 그 몸이 자신의 두 아이가 볼 수 있습니다
H1 요소와 UL 요소입니다.
이것은 우리가 이러한 요소를 모두 연결할 수 있다는 것을 의미합니다
본문 요소에, 그럼 그렇게하자.
우리는 H1 및 UL이 있습니다.
마지막으로, UL 요소는 더 많은 아이들이
그리고 이것은 우리의 DOM 트리를 완료되므로, 리튬, 리튬, 리튬 추가하자.
이것은 우리의 DOM 트리를 완료하고,이 브라우저가 웹 페이지를 저장하는 방법이다.
이제 우리가 자바 스크립트를 사용하여이 트리를 탐색하는 방법을 살펴 보자.
우리는 문서라는 특별한 자바 스크립트 변수를 사용하여이 트리에 액세스 할 수 있습니다.
본 문서 객체의 하나의 속성
Body 속성이며,이 개체를 나타냅니다
우리의 예제 웹 페이지의 body 요소.
우리는 본문 요소의 모든 자식을 취득하려는 경우
어떤 당신이 기억하는 경우는, 그 H1 태그와 UL 태그입니다
우리는 document.body.childNodes를 말할 수 있습니다.
그리고 이것은 우리에게 H1 요소를 모두 포함하는 배열을 돌려 줄 것이다
그들은 신체의 양쪽 직계 자식에 있기 때문에 UL 요소입니다.
우리는 UL 요소를 나타내는 변수를 생성하려는 경우
우리는 여기까지 VRR UL은 = 다음이 코드를 말할 수있다
지금 childNodes에 단순히 배열이기 때문에
우리는 [1]와 그것으로 인덱스가 배열의 두 번째 요소를 얻으려면 할 수 있습니다.
이 새로운 UL 개체에 우리는 ID와 같은 요소의 다양한 속성을 액세스 할 수 있습니다.
우리는 문자열 목록 같아야 것 그 ul.id 말한다면
그것은 우리가 우리의 HTML 페이지가 무엇 때문입니다.
우리는 또한이 사건에있을 것입니다, 이는 그 태그 이름을 얻을 수 있습니다
요소의 유형 그것은이 경우, UL에 있습니다.
우리는 또한 부모 나 그 위의 노드를 얻을 수있는이 경우
본문 요소가 될 것입니다.
우리는 document.body 같은거야. ParentNode 부모를 말한다면.
물론,이 UL은 자신의 아이가
그래서 우리는 아직 말할 수 있습니다. childNodes에이 요소에,
우리의 목록에서 3 항목이 있기 때문에,이 배열은 지금 길이 3이 있어야합니다.
마지막으로, 아마도 가장 유용한 속성은 될 것입니다. innerHTML을가
이것은,리스트의 실제 내용 될 우리의 예제 페이지에서
그 3 리 태그이었다.
물론, 우리가 큰 문서가있는 경우, 요소에 액세스
이 방법으로 정말 성가신 될 것이기 때문에
결국 우리는 document.body.childNodes 같은 것들을 말을해야합니다
브래킷 뭔가., 다른 부류 뭔가를 childNodes에
그것은 정말 성가신 얻을거야.
대신 우리가 정말하고 싶은 것이있다, 문서를 조회 할 수 있습니다
그래서 우리가 키워드를 사용하여 인터넷에 정보가 검색 좋아
우리가 정말 간결이 문서를 검색하는 방법이 필요합니다
우리가 걱정하는 유일한 요소는 통과하지 않고 다시
아래로 전체 트리 톱.
다행히, 현대적인 브라우저는 우리가이 작업을 수행 할 수 있도록
querySelectorAll라는 특수 기능,
이 함수는 하나의 인수를
즉, CSS 셀렉터이며, 그것은 우리에게 돌아거야
그 선택 일치하는 모든 요소를​​ 삭제합니다.
그것은 당신이 DOM 질의를위한 새로운 문법을 배울 필요가 없습니다 의미합니다.
대신에 당신은 당신이 이미 알고있는 지식을 적용 할 수 있습니다
CSS 선택기에 대한.
의 문서를 쿼리의 몇 가지 예를 살펴 보자.
우리는 querySelectorAll 말을하고 그것을이 문자열 # foo는 전달하는 경우
그것은 우리에게 ID foo를 가진 요소를 돌려 줄거야.
당신은 또한하는 document.getElementById 말할 수
그리고 그것을 그 해시 태그없이 문자열 foo에 전달합니다.
당신은 똑같은 개체를 다시받을거야.
대신에 우리는 document.querySelectorAll에 문자열입니다. 줄을 통과하면
우리는 클래스 바의 모든 요소를​​ 다시받을거야.
우리는 또한 CSS 선택기를 결합 할 수 있습니다.
우리는 문자열 # foo는 IMG에 전달하는 경우
이미지의 모든 요소를​​ 우리에게 돌려 줄 것이
그 ID foo를 가진 요소의 자식입니다.
당신이 볼 수 있듯이, 결합 선택기를 통해 우리는 정말 강력한 검색 기능이 있습니다.
하지만 후드 아래, DOM은 정말 그냥 나무입니다
이러한 선택기는 어느 정도가 멀리 우리가하는 추상적 인 수
우리는 항상 DOM 트리의 전체 구조에 대해 걱정하지 않기 때문에.
즉, 빠른 DOM의 개요, 저희 결합을위한 감사했다.
[CS50.TV]