[javascript]Document

오늘은 도큐먼트 객체에 대해 알아보도록 하겠습니다

 

Document객체는 아마 다들 익숙 하시리라 생각이 됩니다 워낙에 자주 쓰이니까요

근데 이 document객체는 window 의 속성중에 하나입니다 알고 계셨나요 ?ㅎㅎ

 

그런데 대부분 window.document.  으로 사용 하진 않죠 ?

그 이유는 window는 전역 객체라서 어디서든 사용이 가능하잖아요 ㅎㅎ 그래서 생략이 가능한겁니다 

 

자 그럼 document 객체를 어떻게 사용하는지 알아 보도록 합시다 

 

가장 기본적인 선택자 부터 살펴봅시다 

id를 갖고 html 태그를 선택 하는 방법을 볼텐대 

 

<div id="btn_wrap"></div>
<div class="btn_c_wrap"></div>
<div name="btn_n_wrap"></div>
<div></div>

만약 이러한 태그가 있는데 여기에 style 속성을 추가하고 싶다 라고 한다면 

일단 태그를 선택 해야겠죠? 어떤 태그인지 식별을 해야하니까요

 

var btnWrap = document.getElementById("btn_wrap");
var btnCwrap = document.getElementClassName("btn_c_wrap");
var btnNwrap = document.getElementByName("btn_n_wrap");
var btnTwrap = document.getElementByTagName("div");

이렇게 여러가지의 방법이 있습니다 ㅎㅎ 

 

아이디, 클래스, 네임, 태그네임

 

특성부터 말하자만

아이디는 중복이 안됩니다

클래스는 중복이 가능하고 대부분 css요소를 담습니다

네임은 대부분 데이터를 넘기는 용도로 사용합니다 

태그 네임은 태그 전체를 한번에 가져올 때 사용합니다 

 

이부분을 생각해주시면 됩니다 

 

그리구 움 제가 고민 해봤는데 

jQuery 를 넣을까 말까 했는데 요즘 추세는 순수 자바스크립트만 쓰는 추세이고 

대기업들은 대부분 TypeScript로 넘어가는 추세라고 하더라구요 그래서 

jQuery는 넣지 않겠습니다 사실 다들 잘 알고있는 라이브러리 이기도 하고 

여기는 javascript 카테고리 니까요 ㅎㅎ 

 

다음으로 태그를 생성 해보도록 하겠습니다

주의 점은 태그를 생성한다고 바로 화면에 표출 되는게 아니라 변수에 저장하고 표출 해야합니다

 

var tag = document.createElement("div");

이 태그를 html에 표출 시키는 방법은

innerHtml 입니다 

 

body에 추가 시키고자 한다면 

var body = document.getElementsByTagName('body')[0];

body.appendChild = tag;

로  body에 추가 할 수 있습니다