DOUG 로이드 :이 비디오에서는, 우리는 원 별도의 관심을 불러 아주 특별한에 자바 스크립트의 요소 당신이 편리하다는 사실을 발견 때구나 웹 페이지를 조작하는 작업을하고 웹 페이지의 내용을 변경 즉석에서. 그리고 그의 개념이다 문서 객체 모델. 같은 그래서 우리는에 우리의 비디오에서 본 자바 스크립트 객체는 매우 유연합니다. 그리고 그들은 다양한 분야를 포함 할 수 있습니다. 그리고 우리는 많이 다루지 않았지만 세부 사항, 해당 필드 또는 속성, 즉, 우리는 아마 더 많은 것 적절하게 전화 심지어 개체의 컨텍스트에서 이러한 속성은 다른 객체가 될 수 있습니다. 그리고 그 객체의 내부 다른 객체가 될 수 있습니다. 

이 매우 큰 개체가 다른 개체의 많은 의 그것의 내부, 어떤 종류의 큰 나무의이 아이디어를 생성합니다. 이제, 문서 객체 인 자바 스크립트에서 아주 특별한 객체 즉, 전체 웹을 구성합니다 우산의 종류에 따라 페이지 개체. 그리고 문서의 내부 목적은 제시 객체 웹 페이지의 머리와 몸. 

그 안에는 다른입니다 개체 등등 등등, 전체 웹 페이지가 될 때까지 이 큰 객체로 구성되었다. 거꾸로, 바로 여기에 무엇입니까? 글쎄, 우리가 작동하는 방법을 알고 자바 스크립트 객체와. 

우리가 객체가 있다면 그 것을, 우리의 전체 웹 페이지를 말한다 올바른를 호출하여 의미 방법은 그 객체를 조작하는 또는 특정 수정 속성, 우리 의 요소를 변경할 수 우리의 페이지 프로그래밍 자바 스크립트를 사용하는 대신 필요 HTML, 말과 일을 코드. 그래서 여기의 예 웹 페이지 매우 간단, 맞죠? 그것은 HTML 태그, 머리를 가지고있다. 

의 내부 제목, 안녕하세요 세계가있다. 그 때 나는 몸을 가지고있다. 그 안에서, 내가 가진 세 가지 다른 것들. 나는, H2 헤더 태그가 단락 및 링크. 이것은 매우 단순한 웹 페이지이다. 

그럼, 수있는 문서 등이 Look 객체? 음, 약간의 아마 처음에는 무서운. 그러나 그것은 정말 큰 나무입니다. 그것의 매우 루트 문서이다. 

문서가 다른입니다 내부 내 페이지의 HTML 참조 객체입니다. 그리고 내 페이지의 HTML이 모두입니다. 그리고 HTML의 내부 개체, 나는 머리 개체가, 이는이 모든 것을 의미한다. 

그리고 거기의 내부, 나는 제목 개체가 있습니다. 그리고 거기의 내부에, 나는 또 다른이 그건 그냥 인사 세계의 객체. 나는 내 몸을 가질 수 이 같은 표현. 

내 몸의 내부, 나는 H2가 개체 및 단락에 대한 P 객체 및 링크에 대한 객체입니다. 그리고이 전체 계층 구조 큰 나무로 표현 될 수있다 작은 작은 많은 물건은 나오는. 지금, 물론, 경우 우리는, 프로그래밍있어 큰 나무 같은 것을 생각하지 않습니다. 우리는 실제보고 싶어 코드와 관련된 것들. 

그리고 다행히도, 우리는 할 수 우리의 개발자 도구를 사용하여 실제로 살펴보고 이 웹 사이트의 문서 객체. 그리고 이제 그렇게 할 수 있습니다. 그래서 브라우저 탭을 열었습니다. 

그리고 개발자 도구를 열었다. 그리고 자바 스크립트가 내 비디오에, 나는 콘솔이 아니라고 언급 유일한 곳 어디 우리는 정보를 인쇄, 또한 장소 어디 우리는 입력 정보를 수 있습니다. 이런 맥락에서 어떤 나는 말할거야 내가 다시 좀하고 싶습니다 문서 객체, 그래서 그것을 한 번 봐 가지고 시작할 수 있습니다. 그래서 나는 이것을 어떻게 할 수 있는가? 글쎄, 내가 원하는 경우 정말 멋지게 정리, 나는 console.dir, D-I-R을 말하는거야. 지금, 난 그냥 인쇄에 CONSOLE.LOG를 사용 무언가 아주 간단합니다. 그러나 나는이를 구성하려면 계층 적 객체처럼, 나는 그것이 일종의 구조화 할 디렉토리 구조 등을 포함한다. 

그래서 문서를 console.dir 싶다. 나는 Enter 키를 누르거야. 그리고 바로 아래에 지금, 나는 여기에서 확대합니다 나는이 응답 문서를 가지고 그 옆에 작은 화살표가. 지금, 나는이 화살표를 열 때, 물건을 많이있을 것입니다. 

그러나 우리는 많이 무시하는거야 그것과 초점의 단지 종류의 가장 중요한 부분에, 우리 때문에 이 문서를 탐색 할 수 시작할 수 있습니다. DOM보다 훨씬 더있다 노드와 자식 노드 바로 부모입니다. 보조 물건을 많이가있다. 

그래서 나는이를 열거야. 그리고 전체 많아요 물건의이 나타납니다. 하지만 걱정 모두이다 바로 여기, 자식 노드. 의 그을 열어 보자. 

거기의 내부 봐요 익숙한 일, HTML. 우리의 문서의 내부 그래서 한 단계 아래로, HTML. 나는를 엽니 다. 우리는 무엇을 기대? 

당신이 우리의 다이어그램에서 기억 경우, 우리는 HTML 내부에 무엇을 찾을 것인가? 트리 아래에 어떤 두 개의 노드인가? 의 알아 보자. 우리는 HTML을 엽니 다. 우리는 자식 노드 아래로 이동합니다. 

개폐 팝. 머리와 몸이있다. 그리고 우리는 머리를 열 수 있습니다. 자식 노드로 이동합니다. 음, 제목이있다. 

그리고 우리가 갈 수 있고, 이 같은에 영원히. 우리는뿐만 아니라 몸이 작업을 수행 할 수 있습니다. 그러나 우리가 볼 수있는 방법이있다 큰 개체로 구성 문서. 우리가 보면 그리고 큰 많이 보이는 개체 코드처럼, 그것은 우리가 시작할 수 있다는 것을 의미한다 사용이 큰 객체를 조작하는 코드는 무엇을 변경하는 우리의 웹 사이트는 보이는 것 같은 느낌이 든다. 

그래서 매우 강력한 도구입니다 우리는 지금 우리의 처분에 있습니다. 우리가 방금 본 그래서, 문서 객체 자체 그것의 내부의 모든 개체 다만, 속성과 메소드를 우리가 한 모든 다른 개체와 같은 자바 스크립트에서 함께 일하고. 그러나 우리는 이러한 속성을 사용할 수 있으며 종류의 드릴 다운 그 방법을 사용 그리고 큰 문서에서하면 얻을 하부 및 더 낮은, 미세하고 미세한 입자 세부 사항, 우리까지 매우 특정 부분에 도착 우리의 우리가 변경하고자하는 웹 페이지를 참조하십시오. 

그리고 우리는의 속성을 업데이트 할 때 개체를 문서 또는 그 메소드를 호출, 일이 우리의 웹 페이지에서 일어날 수 있습니다. 그리고 우리는 어떤 상쾌 할 필요가 없습니다 이러한 변경 사항을 적용합니다. 

그리고 그에게 정말 멋진 기능입니다 우리가 코드로 작업 할 때이있다. 그래서 이러한 속성 중 일부 무엇인가 문서 객체의 부분이 있습니까? 글쎄, 당신은 아마 보았다 그들 중 몇 정말 빨리 우리가 압축하는 한 같은 거대한 문서를 통해 객체 우리는 단지 웹 브라우저에서 보았다. 

그러나 이들 중 몇 내부 HTML 같은 것들이있을 수 있습니다. 그리고 당신도 나를 기억 수도 있습니다 자바 스크립트 비디오에서 이것을 사용하여 맨 마지막에 때 이벤트에 대해 얘기했다. 이 내부 HTML은 무엇입니까? 음, 그냥 무슨 태그 사이에. 

그리고 내부 HTML, 예를 들면, 타이틀의 우리가 보관 한 경우 태그에가는 잠시 전에 예를 들어 그 안녕하세요 세계했을 것이다. 즉 우리의 페이지의 제목이었다. 다른 속성 노드 이름을 포함하는 HTML의 이름이고 제목과 같은 요소입니다. ID입니다 ID, HTML 요소의 속성. 

우리가 특별히 표시 할 수 있음을 기억하자 우리의 HTML의 특정 요소 일반적으로 ID 속성과 CSS의 맥락에서 유용, 특히. 에 대한 참조 부모 노드, 그냥 저 위의 DOM의 내용. 그리고 자식 노드, 인 아래로 나를 아래 무엇을 참조. 그리고 우리는 많이 보았다 다만 통해 찾고. 우리가 가진 방법 자식 노드, 즉이다 트리에 더 낮은. 

속성 그건 그냥 배열이다 HTML의 요소의 속성. 따라서 특성의 예는 수도 당신은 이미지 태그가있는 경우 수, 보통 소스 속성을 가지고 어쩌면 높이 및 폭 특성. 그리고 그것은 단지 배열 될 것이다 관련된 모든 속성의 그 HTML 요소. 

스타일이 다른 하나입니다 CSS를 상징 하는가 특정 요소의 스타일. 그리고 나중에이에 비디오, 우리는 특별히거야 레버리지 스타일은 몇 가지로 만들려면 우리의 웹 사이트에 대한 변경. 그래서 사람들은 몇 가지 특성이 있습니다. 

또한 몇 가지가 있습니다 우리가 할 수있는 방법 또한 더 빨리 어쩌면 분리하는 데 사용 문서 객체의 요소. 아마도, 가장 다양한 이러한 것을 getElementById의. 그래서, 때문에 같은 것을 말할 수있다 이 문서에있어서의 기억 , document.getElementById를 객체. 

그리고 그 괄호 안에 지정 특정 ID를 가진 HTML 요소 내가 이전했다고 속성 설정하고, 나는 즉시거야 해당 요소에서 오른쪽으로 이동 전체 웹 사이트의. 그래서 어쩌면 드릴 필요가 없습니다 모든 단일 계층을 통해 아래로. 난 그냥 그것을 찾기 위해이 방법을 사용할 수 있습니다, 종류의 열 추구 미사일처럼, 권리? 그냥 가서 발견 정확히이 찾고있는 사람이 있는지. 

GetElementsByTagName입니다 정신에 매우 유사합니다. 어쩌면이 모두를 찾아 낼 것입니다 굵은 태그 또는 P 태그의 모든 나에게 모든 것을 배열을 제공 나는 그와 함께 일할 수있다. 에 ap​​pendChild 뭔가를 추가 아래 트리에서 한 수준. 

그래서 나는 완전히 새로운를 추가 할 수 있습니다 요소 한 수준 낮은. 아니면 내가의 요소를 제거 할 수 있습니다 뿐만 아니라 내가 원하는 경우 한 단계 낮은 내 웹 페이지에서 무언가를 삭제합니다. 이제, 빠른 코딩 노트와 빠른 두통은 희망, 메모를 저장. 

getElementById-- D는 소문자입니다. 나는 얼마나 많은 시간을 말할 수 없다 사용 getElementById와 대문자 이 D. 정말 흔한 일 때문에. 우리가 단어 ID를 작성하는 경우, 그것은있어 일반적으로 자본 나는 자본 D. 그리고 내 코드는 작동하지 않습니다. 그리고 그 이유를 알아낼 수 없습니다. 이건 정말, 정말, 정말입니다 모두가 만드는 일반적인 버그, 에도 전문가 영원히 이렇게되었다. 그러니, getElementById 인식, 그 D는 소문자입니다. 희망, 그 여러 저장 상심의 적어도 분. 

그래서이 모든 것이 우리에게 무엇을 말해 주는가? 우리는 이러한 방법이있다. 우리는 이러한 속성을 가지고있다. 이제, 우리는에서 시작하는 경우 문서, 문서. 무엇이든, 우리는 지금 어떤 얻을 수 있습니다 우리의 웹 페이지의 한 조각 우리는 JavaScript를 사용하도록 다만이 메서드를 호출하여 과 특성을 활용 우리는 다양한 위치에서 찾을 수있다. 

이것은,이 말의 얻을 수 있습니다 document.getElementById를, 어쩌면 긴 태그 이름을 가지고, 어쩌면 당신은 나중에 더 많은 통화를 할. 상황이 조금 장황 얻을 수 있습니다. 그리고 프로그래머, 당신은했듯이 아마이 영상의 많은 볼, 우리는 말의 일을 좋아하지 않는다. 

우리는 빨리 일을 할 수 있도록하고자. 그래서 우리는 더 싶습니다 간결한 방법은 무엇인가 대답. 그래서에 리드 이런 종류의 뭔가의 개념은 jQuery를했다. 이제 jQuery를 자바 스크립트 없습니다. 그것은 자바 스크립트의 일부가 아니다. 

그것은 기록 된 라이브러리입니다 일부 자바 스크립트 프로그래머 약 10 년 전. 그리고 그 목표는이 무엇을 단순화하는 것입니다 라는 클라이언트 측 스크립트, 어떤 우리가 무엇인지 기본적으로 DOM 조작에 대한 이야기​​. 그래서 만약 내가 수정 싶어 내 웹 페이지의 배경색, 어쩌면 특정 사업부. 

자, 내가 분명히 받고 있어요 ElementById colorDiv. 그리고 나는 그것의 배경 색상을 설정합니다. 난 그냥 순수 자바 스크립트를 사용하고있는 경우 문서 객체 모델을 사용하여, 맞아, 물건을 많이입니까? 중요 document.getElementById colorDiv.style.backgroundColor 녹색 =. 

아휴. 즉, 말을 많이했다. 너무 입력 할 수있는 많은입니다. 그리고 jQuery를, 우리는 아마 말할 수있다 이 조금 더 간결하게. 그것을있는 떨어져 무역은 어쩌면 조금의 비트 갑자기 더 애매한, 권리? 

적어도 긴 조금 더 우리가 무슨 일을하는지에 대한 설명 적. 이 달러 기호, 괄호, 작은 따옴표, 해시, colorDiv, 오른쪽? 그게 무슨 뜻 이죠? 글쎄, 그건 그냥 기본적이다 document.getElementById를 colorDiv. 

그러나 속기 이런 종류의 jQuery를 사용하여 그것을하는 방법. 그냥 지금 살펴 보자 다른 몇 가지 방법에 내가 실제로 수 있음 이 문서 개체를 사용하여 모델 내 사이트의 조각을 조작 할 수 있습니다. 특히, 우리는거야 조작 작업을 할 특정의 색 웹 페이지에 사업부, colorDiv. 그럼 그 살펴 보자. 괜찮아. 그래서 페이지입니다. 당신이 다운로드 할 때 그것은 test.html를 불렀다 이것은 당신이 어설프게하려는 경우. 그리고 나는 잔뜩있어 이 페이지의 버튼. 그리고 각각의 기능을 말하는거야 배경 색, 녹색, 보라색 들면 오렌지, 레드, 블루, 하나의 기능 배경 색상, 이벤트 핸들러 배경색 및 jQuery를 사용 대. 나는 무엇을 이야기하고 때 나는이 일을 해요? 그래서 우리는 버튼을 봤어요. 자, 살펴 보자 여기에 소스 코드의 일부. 우리는 test.html를 시작합니다. 배경 그래서 각각의 기능 색상은 내가 여기에 입력 한 것입니다. 나를 조금 스크롤 보자. 

그리고 당신은 내가를 알 수 있습니다 이 버튼을 정의한 이 버튼을 클릭하면 대답, 보라색려면 함수를 호출합니다. 이 버튼을 클릭하면, 오히려, 함수가 녹색으로 전화, 빨간색으로, 오렌지를 설정, 파란색 전원을 켭니다. 당신은 아마이 있음을 추측 할 수 최고의 디자인은 아마 아니다 감각, 오른쪽? 

내가 할 수 있다면 좋을 것입니다 보다 일반적인 접근 방식을 가지고있다. 음, 우리는 먼저 살펴 보겠습니다 그 5 가지 기능이 무엇인지에 중요 document.getElementById 보라색 ​​colorDiv.style.background = 빨강, 녹색, 오렌지 각각 파란색. 그래서,하지 특히​​ 최고의 디자인. 

버튼의 다음 세트 나는 내가 작성한되고있다 라는 하나의 함수 그 분명히 색상을 변경 인수로 문자열을 받아들입니다. 그래서이 조금 더 낫다. 빨간색, 보라색, 녹색, 오렌지,, 푸른 이제 인수입니다. 그래서 더 일반적인를 작성했습니다 경우 자바 스크립트 기능, 이는 다음과 같을 수 있습니다. 내가 전달하고있다. 이 기능은 색상을 변경입니다 컬러라는 인수를 기대. 그리고 설정 말하는거야 색상 배경​​ 색상. 그래서 여기에 내가 여기있어 무엇을 나타냅니다. 그래서 조금 더 낫다. 

그러나 나는 할 수 있습니다 보다 더 잘 할. 우리가 살펴 봐야 아래로 이동하는 경우 이벤트 핸들러 상황에서, 이제 모든 호출은 같은 모양. 당신에 대한 기억이 있다면 우리의 이벤트 핸들러에 대한 논의, 나는의에 대한 정보를 얻을 수 있습니다 이 버튼을 클릭하고를 사용했다. 

그래서 event.JavaScript에, 나는했습니다 작성된 색상 변경 이벤트, 어떤 클릭 된 버튼을 파악한다. 즉, 트리거 선의 오브젝트. 그리고 여기, 정말 말의 가져옵니다. 하지만 내가 뭘하는 난입니다 배경 설정 triggerObject inner.HTML에 색상. 즉, 텍스트의 버튼 태그 사이. 

그리고 나는 분명히해야 소문자를 설정합니다. 그리고 그것이 내가 전체를 변환 할 수있는 방법 문자열을 사용하여 자바 스크립트에서 소문자로 그 방법은 소문자로. 나는 색상을 설정할 때 때문에, 내가 여기서 할 노력하고있어로, 색상은 모두 소문자이어야한다. 

하지만 내가 가진 버튼, 우리는 또 다른 모습을 가지고가는 경우에, 텍스트가 있다는 것을 알 보라색에 대한 자본 P로 작성. 그 다음에 아주 여기에 바닥 나는 분명히 시도뿐만 아니라이 사용 jQuery를 수행. 이 경우, 사실이 아니에요 모든 함수를 호출. 난 그냥 클래스를 해요, 상기 한 이 버튼에 사용하는 것은 JQ 버튼입니다. 이게 다예요. 

어떻게 jQuery를 내가 뭘하는지 알고 있나요? 그런데, 이것은 장점 중 하나이다 jQuery를의 단점을 슬래시. 그것은 나를 일을하도록 허용 할 수 있습니다 매우 간결하지만, 아마 같은 직관적으로. 아마도 그 다른 세 만들 조금 더 내가 뭘하는지 감지. 여기에,하지만, 무슨 일이야? 

분명히, 작성 익명 함수 그로드 할 때마다 내 문서 그래서 document.ready, 준비 일부 기능이 일어날 것입니다. 기본적으로 때 문서가 준비? 내 페이지가로드 할 때이다. 

그래서 빨리 내 페이지가로드로, 기능에 따라 항상 준비가되어 있습니다. 그것은 말한다 경우 유형 jQButton의 대상, 또는 클래스 jQButton이 클릭되었을 경우, 이 기능을 실행합니다. 그래서 여기에 익명의 기능이다, 다른 하나의 내부에 정의. 

내 전체 문맥 그래서 여기에 지금까지 내 페이지입니다 이로드 할 때이 함수를 호출합니다. 그리고이 기능을 기다리고 있습니다 단추를 클릭합니다. 그리고 버튼을 클릭, JQ 구체적 버튼 클릭, 그것은이 다른 호출 기능을 것입니다 배경을 설정합니다 colorDiv의 색이 될 어떤 텍스트는 태그 사이에 있습니다. 

이것은의 개념이다 어떤 버튼은 클릭했다. 그러나 그렇지 않으면,이 일종의입니다 이벤트와 유사한 행동. 그냥 같은 방식의 I jQuery를이를 표현하는 것입니다. 다시 말하지만, 그것은 아마 더 많은 협박. 그것은만큼 분명하지 않다 event.js 같은, 이는 어쩌면 조금 더 자세한하지만 조금 덜 협박. 

그러나 우리는 브라우저를 통해 다시 팝업 경우 창, 내가 잘 clicking-- 시작하면, 그 보라색으로 변경되었습니다. 이것은 스트링 방법을 사용하여 녹색이다. 이는 이벤트 핸들러를 이용하여 오렌지색이다. 

이것은 바로, jQuery를 사용하여 빨간색? 그들은 모두 정확히 같은 동작합니다. 그들은 단지 그것을 다른 사용 할 문제를 해결하기 위해 접근한다. 에 더 많은있다 jQuery를 다음 우리는 확실히있어 이 비디오에 대해 이야기 할 것입니다. 당신이 더 많은 것을 배우고 싶은 경우에, 당신은 할 수 문서의 jQuery를 정렬로 이동 약 꽤 자세한 내용을 보려면 이 매우 유연 라이브러리, 어떤 클라이언트 쪽 일을 위해 중대하다 이러한 우리가 무엇을하고 있는지와 같은 스크립팅 모양을 조작하는 우리의 웹 페이지의 느낌 문서 객체 모델. 나는 더그 로이드입니다. 이 CS50입니다.