지금까지 우리는 별명이 왜 흥미로운 지에 대해 이야기했습니다.
왜 신경 써야 하죠.
끝없는 가능성을 사용하는 다른 사이트는 모든 흥미 진진한 게임을 게임으로 만듭니다.
그러나 우리는 여전히 DOM이 실제로 무엇인지에 대해 이야기하지 않았습니다.
그래서 우리는이 비디오에서 그것을 정의 해 보겠습니다.
디오.
Dom은 Document 개체 모델을 나타냅니다.
이 세 단어의 의미는 다가올 슬라이드에서 조금 더 의미가 있습니다.
그러나 더 높은 수준에서 정의하자.
Dom은 자바 스크립트와 나이 사이의 인터페이스입니다.
Tim Mounty SS 기본적으로 우리는 H.M.S.와 상호 작용하는 데 사용할 수있는 특수한 javascript 객체 인 javascript 메서드를 사용합니다. 우리는 우리가 요소를 추가 할 수있는 것들을 바꿀 수 있다고 평가한다. 요소를 제거한다. 색을 바꾼다. H.M.S.와 상호 작용할 수있는 흥미 진진한 방법들을 애니메이션화한다. 평가.
이 슬라이드에서는 DOM이 어떻게 구성되고 왜 문서 객체 모델이라고 불리는 지에 대해 조금 이야기합니다.
그래서 우리는 전자 메일 페이지를로드 할 때 브라우저에서 이와 같이 보입니다. 그러면 텍스트로 내 링크가있는 제목과 태그가 있고 텍스트로 내 머리글이있는 H-1이 있으므로 텍스트를 간단히 편집 할 수 있습니다. 그것.
그래서 이것을 브라우저에서 열면이 장면이 보입니다 만 장면 뒤에는 DOM이 만들어집니다.
바로 여기에서 건설되었습니다.
그래서 저는이 나이 Tim이 많은 자바 스크립트 객체로 바뀌 었음을 의미합니다.
각 객체는 이러한 요소 중 하나를 모델링합니다.
그것이 우리가 객체 모델을 문서 객체 모델의 일부로 가져 오는 곳입니다.
다시 한번 우리가 브라우저에 각 팀을로드하는 것을 되풀이하기 위해 브라우저는 우리에게 이와 같은 것을 표시합니다.
하지만 실제로 javascript 객체를 사용하여 내 개 Rusty를 모델링 한 것처럼 자바 스크립트 객체가있는 모든 단일 요소의 모델을 실제로 만듭니다.
그는 재산의 이름과 다른 품종과 나이를 가졌습니다.
이러한 객체는 내용이 다르다는 것을 제외하고는 근본적으로 같은 것입니다.
그들은 태그 텍스트 소스 속성의 종류와 같은 것을 가지게 될 것입니다. 배경색은 텍스트 크기입니다. 각각의 객체 안에 모두 들어있는 모든 속성이 있습니다.
우리는이 객체들로 작업하는 데 많은 시간을 할애해야하므로 세부 사항은 중요하지 않습니다.
여기에서 강조하고 싶은 것은 우리가 각 팀을로드하는 것입니다.
브라우저에 표시되고 브라우저는 Tim L을 사용하여 각 요소를 가져 와서 객체로 변환합니다.
그래서 그것은 객체 모델 부분을 포함합니다.
그 서류는 요?
여기서 볼 수있는 것은 이것이 우리가 DOM으로부터 얻는 구조 타입의 작은 다이어그램입니다. 모든 것이 H.T. 우리를 문서라고 부릅니다.
그래서 우리는 어떤 웹 페이지로도 갈 수 있습니다.
그래서 나는 Google을 열었고 나는 죄수를 입력 할 것입니다. 문서라는 단어.
그리고 내가 그렇게 할 때, 나는이 큰 물건을 되 찾는 큰 일을 얻는다.
그것을 제외하고는 자바 스크립트 객체처럼 보이지 않습니다.
실제로 우리가 기대하는 것이 아닙니다.
브라우저가 저를 숨기는 것이기 때문입니다.
실제로 그것이 나를 보여주고있는 것은 HQ 메일이 텍스트처럼 보이지만이 티모에서 모델링 된 실제 물건을 보여주지 않습니다.
그래서 우리는 콘솔 객체의 또 다른 메소드 인 cancel dot D I R을 사용할 필요가 있습니다. 그리고 우리는 그것을 취소 할 것입니다. 이것이 할 모든 문서는 우리가 잘 알고있는이 객체 구문으로 전체 문서 객체를 출력하는 것입니다.
그래서 우리는 여기에 훨씬 더 많은 정보가 있다는 것을 제외하고는 우리가 우리 자신의 것으로 쓰고있는 것과 같은 그냥 일반적인 객체 인 것을 볼 수 있습니다.
그래서 우리는 글꼴이나 이미지 링크와 같은 것을 가지고 있지만 우리는 또한 몸과 같은 것을 가지고 있으며이 몸은 몸 전체를 나타냅니다.
여기에서 볼 수있는 모든 요소는 몸 안에 있습니다.
그래서 시체를 열면 Child의 노드라고 불리는 것을 포함하여 여러 가지 속성이 있다는 것을 알 수 있습니다.
그래서 자식 노드는 div 태그가 있고 div 태그 안에는 div 태그가 있다는 것을 보여줍니다.
그리고 우리가 요소들에 가면 우리는 그것을 볼 것입니다.
여기 몸의 몸이 있습니다.
첫 번째 div에는 스크립트 태그가 있고 두 번째 div가 있습니다.
그러면 세 번째 div를 열면 두 번째 div가 있으면 두 개의 div가 더 많이 표시됩니다.
그리고 우리가 영사관으로 가서 두 번째 div를 본 다음 우리가 볼 수있는 자식 노드를 봅니다. 두 개의 div가 더 있습니다. 따라서 볼 수 있듯이 dom은 정말 빠르게 커집니다.
수백 가지의 서로 다른 속성과 메서드, 다양한 노드와 중첩 된 개체의 전체적인 구조가 있습니다.
그것은 너무 많은 것들입니다.
제가이 수업의 시작 부분에서 언급 한 그 시대 중 하나입니다. 여기서 모든 것을 알지 못하는 것이 편안해야합니다.
이제 대부분의 개발자는 여기에서 속성의 절반을 알지 못한다고 말할 수 있습니다.
나는 그들이 약 10 % 정도를 가지고 일한다고 말한다.
우리가 거의 사용할 필요가없는 것들이 많이 있습니다.
언젠가 언젠가 뭔가가 생겨 나서 우리는 전에 한 번도 해보지 않은 것을해야합니다.
우리는 그것을 google 해 놓았습니다. 그래서 우리는 알 수없는 변화 속성이 무엇인지 알았습니다.
나는 전혀 몰랐다.
그리고 그것은 개발자가되는 것이 정말입니다.
지금까지 자바 스크립트로 우리는 변수에 대해 배울 함수와 객체에 대해 배울 수있는 작은 통제 된 세상에서 조금만 노력해 왔습니다.
그리고 일을하는 방법에는 제한이 없으며 DOM에 대해 알아야 할 매우 구체적인 지식 집합이 있습니다.
이제 우리는이 거대한 생태계가 너무 많은 재산에서 일할 수있게되었습니다.
그래서 저는 여기에 너무 많은 것을 반복해서 말하고 싶습니다.
우리는 중요한 부분에 초점을 맞추 겠지만 목표는 암기하는 것이 아닙니다.
목표는 모든 단일 속성을 습득하지 않는 것입니다.
다시 한 번 유능한 웹 개발자가되기 위해 필요한 모든 것이 10 %입니다.
좋아, 돌아 가자. 나는이 한 번 더 나아가고 싶다.
우리가 이야기 한 것을 요약 해주십시오.
그래서 DOM은 문서 객체 모델을 의미합니다.
그것은 당신의 자바 스크립트와 당신의 H.M.S 사이의 인터페이스입니다.
우리가 자바 스크립트를 사용하여 상호 작용할 수있는 방법입니다.
우리가 페이지에 새 요소를 추가하거나 링크의 ref 속성을 변경하거나 우리 몸의 배경 이미지를 변경하거나 양식에서 값을 얻는 방법 또는 사용자 정의 유효성 검사와 애니메이션 및 대화 형 작업을 수행하는 방법입니다 어떤 코드를 클릭하는 요소는 문서 개체 모델이 자바 스크립트를 HMS와 연결한다는 사실에서 비롯된 모든 다른 가능성을 모두 실행합니다 접속하다 .
그래서 문서 객체 모델의 객체 모델 부분은 H.T.에서 모델링 요소 인 자바 스크립트 객체의 묶음임을 알려줍니다. 양.
여기에 ATAC가 있습니다. 여기에 atec을 나타내는 객체가 있습니다.
그리고 나서 우리는이 H1 태그를 나타내는 또 다른 객체로 끝납니다.
마지막으로 문서 객체 모델이라고 부르는 이유는 모든 것이 문서라는 하나의 객체 안에 있기 때문입니다.
그것은 그 밖의 모든 것이 사는 루트 노드입니다.
다음 비디오에서는 코드를 작성하기 시작합니다.