모던 웹을 위한 JavaScript + jQuery 입문 3판 50강 - 문서 객체 모델 만들기 > javascript

무료강좌-디비라

javascript

자바스크립트 강의 리스트

※ 가장 하단이 첫강좌입니다

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 50강 - 문서 객체 모델 만들기

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
1544412053311.jpg

 안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임원 3판 50 관객의

있구용
이번 강의 부터는 10장에 문서 객체 모델을 살펴보도록 하겠습니다
일단 문서 객체 모델 이란 말이 약간 어려운데요 문석 이쯤 모델은
웹브라우저가 html 페이지를 인식하는 방법이라고 생각해 주시면 되겠고
지난번에 살펴보았던 웹브라우저 객체 모델의 봄에 도큐먼트 객체와 관련된
그러한 집합 뜰을 문서 객체 모델 이라고 한다고 생각을 해 주시면
되겠습니다 그럼 일단 용어를 정리를 하고 넘어가도록 하겠는데요
우리가 html 페이지를 요러한 형태로 작성을 하게 되면 요 html 을
테크 라고 부르게 되고 요 html 전체를 요소 엘리멘트 라고 부릅니다
그리고 이 녀석을 자바스크립트에서 사용할 수 있는 형태로 변환 을 하게
되면
자바 스크립트 내부에서 그 객체를 문서 개체 라고 부르게 됩니다
한마디로 태그와 요소와 문서 객체 는 거의 같은 것이라고 생각을 해
주시면 되겠습니다
사실 테크 와 요소는 사실 엄밀하게 말하면 다르지만 거의 대부분의 사람이
같은 용어로 쓰기 때문에 갖게 봐주시면 되겠구요
추가적으로 우리가 코드 싶다 실과 같은 html 페이지가 있다고 할 때
요 html 페이지를 제 친구 조에 따라 트리로 표현을 하게 되면 그림
싶다 실처럼 나오게 됩니다
이때 각각의 트리의 걸려 있는 녀석들을 노드 라고 부르게 되구요
이 노드 들 중에는 인덱스 라는 문자열 그러니까
내부의 입력하는 글자 도 하나의 노드로 포함이 됩니다
이때 html 노드 라던지 헤드 노드 라든지 다 디노 드 라던지 타이틀
롯데 스크립트 노드 h1 노드는 우리가 요소 노드 라고 부르게 되구요
문자 1 입력되어 있는 녀석들은 우리가 텍스트 노드 라고 부르게 됩니다
한마디로 이렇게 html 페이지가 있을 때 각각의 태그가 하나의 요소
노드 라고 보시면 되겠구요
이 안에 있는 글자가 텍스트 노드 라고 할 수 있습니다
어쨌거나 텍스트 노드는 텍스트 노드를 갖는 요소도 노드와 텍스트도 들을
갖지 않는 요소 노드 가 있습니다
예를 들어서 위에 있는 타이틀 태그나 우리 감
h1 태그를 만들게 되면 이 녀석들은 내부의 텍스트를 갖게 되죠 그래서
텍스트 노드를 갖는 요소 노드가 되겠는데요 반대로 이미지 태그 같은
녀석들은 내부의 쏘 속성이나
대체 글자 속성을 사용하지 ef 에다가 글자를 입력하는 텍스트 노드는
사용하지 않습니다 그래서
요소 노드 는 이렇게 두가지로 9분할 수 있다고 생각해 주시면 되겠습니다
어쨌거나 그러면 가장 전형적인 형식으로 가장 기본적인 방법으로 요소
노드와 텍스트 노드를 만들어서 이러한 노드 들에 붙여서 화면에 출력하는
방법에 대해서 알아보도록 하겠습니다
지금부터는 실제 html 페이지 위에 뭔가 글자가 찍히기 때문에 이전보다
약간 n
재미있을 거라고 생각을 합니다 어쨌거나 도큐먼트 점
크리에이트 를 만드 시계 되면 크레이트 엘리멘트 않은 것들이 있는데요
크리에이터 엘리멘트 를 사용하시면 매개변수의 뭐 지금 자동완성 기능이
너무 길어서 다 나오지도 않는데 h1 일하던 제 2 g2 라던지 h3
라든지 뭐 헤드 라던지 a 차례 html 등등이 문자를 넣어서 태그를
만드실 수 있습니다
예를 들어서 h1 태그를 만들고
녀석을 헤더 라는 이름으로 저장 해 보도록 하겠습니다
뭐 마찬가지로 이미지 태그 도 한번 만들어 보도록 할게요
top 먼트 점
크리에이트 엘레멘트 롱 매개변수의 이미지 라는 문자를 넣게 되면 이미지
태그 가 만들어지게 됩니다
어쨌거나 이런 태그 들은 내부에 붙어있는 어펜드 차일드 라는 메소드를
사용해서 아래쪽에 다른 녀석들을 붙일 수 있습니다
그래서 예를 들어서 도큐먼트 점 바디 라는 녀석은 기본적으로 제공이
되거든요
요 바지는 요 바디 라는 요소 노드를 의미를 하게 됩니다
여기에다가 어펜드 차일드 를 해서
헤더와
방금 만들었던 이미지를 붙이게 되면 은 u 내부의 h1 태그와 이미지
태그가 요러한 형태로 생성되는 것 처럼 나오게 됩니다
자만 이전에 설명했던 것처럼 문제가 있는데요 html 페이지는 위쪽에서
아래쪽으로 순차적으로 그 코드를 실행하게 됩니다
따라서 1 스크립트 태그 가 실행이 될 때는 아직 바디 태그의 어떠한
것도 없는 상태이기 때문에 두 가지 방법으로 해결할 수 있다고 했는데요
하나는 바디 태그 내부에 다가 붙여 넣는 거고 하나는
위쪽에 다 붙이 된 윈도우 점 온로드 라는 이벤트를 사용하는 것이었습니다
두 가지 방법 모두 활용할 수 있는데 일단 코드를 간단하게 볼 수 있게
헤드 태그의 윈도우 점 온로드 를 사용해서 넣는 방법을 사용해 보도록
하겠습니다
어쨌거나 코드를 저장하고 실행하면 일단 화면에는 아무것도 안 나오게
되는데요
개발자 도구 를 열어서 f12 키를 놓으면 뭐 대부분의 웹브라우저에서
열리자 여기에서 바디 태그 안쪽을 여러 보시게 되면 h1 태그와 이미지
태그 가 추가되어 있는 모습을 확인할 수 있습니다 거 나 아까 언급했던
것처럼 h1 태그는 내부의 텍스트 노드를 사용하는 돋우고 이미지 태그는
내부의 속성을 사용하는 녀석입니다 간단하게 텍스트 노드를 만들어 보도록
할게요
마찬가지로 도큐먼트 점 크리에이트 를 입력을 해 보시다보면 크리에이트
텍스트 노드 라고 되어 있는 녀석이 있습니다
녀석은 능력을 하게 되면 매개변수의 텍스트를 넣게 되는데요
간단하게 헬로 월드 라는 글자를 넣어 보도록 하겠습니다
요렇게 만들고 헤더 태그 에다가 어펜드 차일드 를 사용해 텍스트 노드를
붙여 주시게 되면 텍스트 노드가 헤더 아래의 붙어서 글자를 형성하게
됩니다
한번 저장을 하고 실행해 보도록 할게요
실행을 해 보게 되면 헬로 월드 라는 글자가 출력되는 모습을 확인할 수
있습니다
뭐 그리고 개발자 도구 로 돔 탐색기 등을 보시게 되면 h1 태그 안에
당연히 글자가 들어간 모습도 확인할 수 있습니다
이번엔 텍스트 노드를 가지지 않는 노드의 대해서 살펴보도록 할텐데요 뭐
사실 속성을 입력하는 것은 어느 녀석이 는 마찬가지 이긴 하겠죠
어쨌거나 가장 기본적인 그 정석적인 방법은
도큐먼트 점 크리에이트 oo 트리뷰 c 라는 메소드가 있습니다
요녀석을 화수 입력을 하게 되면 매개변수 에다가 4인 스트링을 입력을
하게 되는데요 네임을 예를 들어서 소스 라고 입력을 하게 되면 hr 점을
입력했을 때 밸류를 입력할 수 있게 됩니다
이 밸류 에다가 원하는 녀석을 넣으면 되는데요
간단하게 플레이스 홀드 점
2 3 4
음 300 x 300 정도의 크기를 이미지로 넣어 보도록 하겠습니다
참고적으로 요거를 주소창에 적어 보게 되면 어떤 이미지가 출력될 수도
나오게 되는데요
간단하게 그냥 이런 예비로 넣을 수 있는 텍스트를 이미지를 제공을 해주는
사이트 이기 때문에 기억을 조금 해두시면 이후에 이미지가 없는 상황에서도
뭔가를 해서 확인을 해보실 수 있을 거라고 생각을 합니다
어쨌거나 요러한 방법으로 사용한다 라고 되어있는 사이트 라고 할 수
있겠는데요
어쨌거나 요렇게 입력을 하면 이제 어딜 비터 노트가 또 만들어지게 된
겁니다
만들어진 어트리뷰트 노드 htr 도 드라고 조금 이름을 넣을 게 0
그래서 요 녀석을 이미지 점 3 거트리 b2 노드 라는 메서드의 매개
변수에 넣게 되면 내부적으로 개 층을 구성을 하게 되면서 소스 라는
속성을 넣어 주게 됩니다
한번 코드를 저장을 하고 실행해 보도록 하겠습니다
실행을 하게 되면 헬로 월드 라는 글자도 출력이 되고 아래쪽에 이미지도
출력되는 모습을 확인할 수 있습니다
계층구조를 확인을 해 보시게 되면 당연히 h1 태그에는 텍스트 노드 가
들어가 있고 이미지 태그 내부에는 소스 라는 속성 노드 가 들어가 있는
것을 확인할 수 있습니다
어쨌거나 지금 보시는 사용이 약간 복잡하게 되어 있어요 그래서 이걸 조금
더 쉽게 사용할 수 있게 몇가지 기능을 제공해 주게 되는데요
첫 번째는 텍스트를 그냥 집어 넘는 방법입니다
헤더를 입력을 하고 점 인어 html 입력을 하시게 되면 사실 인어
텍스트도 있고
텍스 콘텐츠 라는 녀석도 있는데 사실 텍스 콘텐트 라는 녀석이 텍스트
노드는 더 적합하게 찜한 구버전 인터넷 익스플로러에서 제대로 동작하지
않기 때문에 인어 html 을 내부의 글자를 넣는 녀석으로 설명하도록
할게요
요녀석을 사용해서 내부의 다가 헬로 월드 를 넣어 주시게 되면 아래쪽에
있는 것과 거의 유사한 처리를 하게 됩니다
마찬가지로 이미지 같은 녀석도 이미지 점 3 어트리뷰트 를 바로 넣어
주시게 되면 매개변수로 첫번째 내 임을 넣게 되고 두 번째 밸류를 넣게
되거든요 그래서 첫번째 매개변수에 소스를 넣고 두 번째 매개 변수에 값을
넣어 주시게 되면 이 아래쪽에 있는 것과 같은 처리를 하게 됩니다
추가적으로 html 에서 표준적으로 제공하는 녀석들은 그냥 점을 찍었을
때 소스 라는 속성이 바로 나오게 됩니다
그래서 이 녀석 예외가 바로 값을 넣어 주셔도 같은 처리를 한다 라고
생각해주시면 되겠습니다
그래서 요 코드가 요 코드로 쉽게 사용할 수 있고
요 코드가 요 코드로 쉽게 사용할 수 있다라고 기억해 주시면 좋겠습니다
어쨌거나 이렇게 구성할 수 있게 되면 다양한 처리를 하실 수 있을 거에요
예를 들어서 반복문을 사용해서
내부 에다가 글자를 넣어서
음 예를 들어서
요렇게 i 번째 라고 출력을 하게 되면
숫자를 가진 요소를 10개를 한꺼번에 생성할 수 있겠죠
마찬가지로 이미지를 만들 때도 반복문 같은 거를 적용을 해 주시게 되면
요러한 매개변수의 우리가 코드를 적용할 수 있겠죠
예를 들어서
아이플러스 1
요런식으로 넣게 되면 자동으로 크기가 다른 그러한 것들을 10개 입력할
수 있게 될 겁니다
그런 각각을 어펜드 차이 돼주는 처리도 이렇게 만들어 주셔야 됐구요
아래쪽에 있는 녀석도 잠식 주석 처리해 주도록 할게요
어쨌거나 이런 식으로 코드를 작성할 하시게 되면 사실 코드가 이제부터
길어지기 때문에 한번에 보시기 힘드실 수 있었는데요 그 유튜브 아래쪽에
그 코드를 링크로 걸어 두도록 하겠습니다
어쨌거나 이렇게 저장을 해 주시고
실행을 하게 되면 0번째 부터 9번째 까지 쭉 출력이 되고 이미지도
크기별로 쪽쪽쪽 출력되는 모습을 확인할 수 있습니다
어쨌거나 자바스크립트 코드로 요소들을 들고와서 문서 객체 로 만들게 되면
프로그래밍 적으로 다양하게 활용할 수 있게 되기 때문에 조금더 뭔가
다양하고 그런 것들을 만들 수 있습니다
어쨌건 오늘 요게 가장 기본이 되는 내용이기 때문에 꼭 기억을 해 주시면
좋겠고요
오늘 강의는 여기까지 되겠고 다음 강의에서 뵙도록 하겠습니다 감사합니다.

댓글 0개

등록된 댓글이 없습니다.

 
Total 83건 1 페이지
썸네일
제목

Menu