[CodeIt] JavaScript 중급 토픽1(브라우저와 자바스크립트)

- JS의 최상단 객체인 window객체는 브라우저의 창을 대변합니다. window에는 document와 console 프로퍼티 객체가 존재합니다.

 

- window는 어디서나 접근가능한 전역객체(Global Object)이고, document와 console앞에 window.은 생략가능합니다.

 

- DOM(Document Object Model, 문서 객체 모델)은 HTML을 객체로 표현한 것입니다.

 

- console.log가 아니라 console.dir을 쓰면, 객체의 다양한 프로퍼티를 출력합니다. 따라서 값 자체를 확인할 때는 log를, 객체의 속성들을 살펴볼 때는 dir을 사용하면 됩니다.

 

- DOM 트리에서 각 객체를 노드(Node)라 합니다. 노드 간의 관계로 부모, 자식, 형제가 있습니다.

 

- 노드에는 태그를 표현하는 요소 노드(Element Node)와 문자열을 표현하는 텍스트 노드(Text Node)가 있습니다. 일반적으로 텍스트 노드는 요소 노드의 자식 노드가 돼고, 따로 자식 노드를 가지지 않기 때문에, 잎 노드(leaf node)라 부릅니다. 다른 여러 종류의 노드 타입이 있지만, 이 2가지가 주로 사용됩니다.

 

- DOM에서 자식, 부모, 형제 노드 관계를 통해 노드에 접근하는 법이 있습니다. 이들을 연결해서 사용할 수도 있습니다.

ex) myTag.children[1], myTag.firstElementChild, myTag.lastElementChild, myTag.parentElement, myTag.previousElementsibling, myTag.nextElementSibling, myTag.parentElement.nextElementSibling

 

 

- JS에서는 예상치 못한 텍스트 노드를 선택할 수 있기 때문에 텍스트 노드보다는 요소 노드를 다룰 경우가 더 많습니다. 

 

- 요소 노드에는 다양한 프로퍼티가 있고, 그 중 innerHTML은 자기를 제외한 요소안의 HTML코드자체(내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)를 문자열로 return해줍니다. 이는 새로운 HTML코드를 할당해 요소안의 HTML을 수정할 때 주로 사용됩니다(내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용!). +=을 이용해서 마지막 부분에 HTML을 추가할 수도 있습니다. 

 

- outerHTML은 해당 요소를 포함한 전체 HTML코드를 문자열로 return해줍니다. 이떄, 새로운 HTML을 할당하면, ★요소자체가 새로운 요소로 교체됩니다. 따라서 처음 선택한 요소는 삭제됩니다.

 

- textContent는 innerHTML과 비슷한데, HTML코드에서 HTML태그는 제거하고 텍스트 부분만 문자열로 return해줍니다. 새로운 text를 할당해서 요소안의 내용을 바꿔줄 수 있고, 이때, text는 html태그도 특수문자인 텍스트로 인지합니다.

 

 

- 기존의 문서 구조를 덮어쓰는 방식이 아니라 요소들을 직접 생성해서 필요한 곳에 추가하는 방법이 있습니다.

ex) const first = documnet.createElement('li');  first.textContent='처음';  tomorrow.prepend(first); 를 통해 tomorrow의제일 앞부분 자식에 <li>처음</li>를 추가해줍니다. prepend(앞 자식)말고 append(뒤 자식), after(뒤 형제), before(앞 형제)도 있습니다.

 

- 노드를 삭제하는 법은 원하는 노드를 선택한 뒤, remove 메소드를 활용하는 겁니다. 

ex) tomorrow.children[2].remove();

 

- 노드를 이용하는 가장 간단한 법은 prepend, append, after, before를 이용하는 겁니다.

 

- 노드는 HTML 속성을 프로퍼티로 가지고 .을 통해 접근할 수 있습니다. id는 .id로 class는 .className으로 접근합니다. 이때, HTML 표준이 아닌 속성은 프로퍼티로 가지지 않습니다. 하지만 getAttribute 메소드를 활용하면, 표준 비표준 관계없이 HTML 태그의 모든 속성에 접근할 수 있습니다. 형식은 elem.getAttribute('속성')입니다.

ex) item.getAttribute('class'), tomorrow.getAttribute('href')

 

- setAttribute를 통해 속성을 추가(수정)할 수 있습니다. 형식은 elem.getAttribute('속성', 값')입니다. 없는 속성은 추가하고, 존재하고 있던 속성은 값을 수정해줍니다.

 

- removeAttribute를 통해 속성을 제거할 수 있습니다. 형식은 tomorrow.removeAttribute('속성')입니다.

 

- ★이때 속성은 대소문자를 구분하지 않습니다. HTML 표준 속성이 모두 소문자이기 때문에, 대문자로 속성을 적으면 모두 소문자로 수정돼서 인식됩니다.

 

 

- JS로 스타일을 다루는 간단한 방법은 style 프로퍼티를 이용하는 겁니다.(-로 연결된 CSS속성은 카멜표기법을 이용)

ex) today.children[0].style.textDecoration = 'line-throungh';

 

- style프로퍼티를 이용하면 인라인 레벨로 들어가고, 모든 요소에 일일이 적용하기 힘들기 때문에, class를 변경하는 방식이 권장됩니다. 이때, class는 className 프로퍼티를 이용(class를 하나만 저장)하거나, classList 프로퍼티를 활용하는 두 가지 방법이 있습니다. classList는 add, remove, toggle 메소드를 이용할 수 있어 매우 편리합니다.

ex) item.classList.add('done', 'other'); <- 띄어쓰기가 아니라 쉼표로 여러 클래스 추가

 

 

- 비표준 속성으로 등록한게 나중에 표준으로 등록되면 문제가 발생할 수 있기 때문에 data-* 속성이 있습니다. data- 로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장됩니다. 예를 들어, data-status라는 속성이 있다면, element.dataset.status라는 프로퍼티에 접근해서 그 값을 가져올 수 있습니다. 이를 통해 비표준 속성을 보다 안전하게 사용할 수 있습니다.