browser 환경에서의 자바스크립트! Let's go ~ 😚
이 포스팅은 ko.javascript.info를 보고 정리한 내용입니다. 참고되는 모든 이미지들 또한 ko.javascript.info의 출처를 가지고 있습니다!
브라우저 환경
자바스크립트는 현재 다양한 플렛폼(이를 호스트 환경이라 칭함)에서 사용되어 지고 있지만, 본래 브라우저에서 DOM의 동적인 움직임을 위해 태어난 언어입니다.
🎨브라우저에서 사용할 수 있는 객체
루트 객체인 window는 브라우저 창을 대변하고 이를 제어할 수 있는 메서드를 제공합니다. (ex : window.innerHeight 창 내부 높이)
문서 객체 모델(DOM)
웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. document 객체가 모든 DOM 객체의 진입점 역할을 합니다(ex : document.body.style.background = "red" -> body 태그의 백그라운드를 빨간색으로 변경)
브라우저 객체 모델(BOM)
브라우저 객체 모델은 문서 이외의 모든 것을 제어합니다.
- navigator : 브라우저와 운영체제에 대한 정보를 제공.
- location : 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경할 수 있게 해줌.
DOM 트리
HTML을 지탱하는 건 tag 입니다. 모든 HTML은 트리 형태로 관계를 맺습니다.
🍕 tag 이외에 주석이나 공백 또한 모두 DOM 입니다. 하지만, DOM을 조작할 땐 주로 tag(element)만 다룹니다.
- 실무에서 다루는 네 가지 노드(DOM)
1 . 'DOM의 진입점' document
2 . HTML 태그 요소 노드(element node)
3 . 텍스트 노드(text node)
4 . 잘 사용되어지진 않지만 주석 노드(comment)
DOM 탐색하기
DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있는데, 일단 그 DOM 객체에 접근하는 것이 선행되어져야 합니다.
모든 연산은 document 객체에서 시작합니다.
🎨 DOM의 트리 구조 모양
트리 상단의 documentElement는 html 태그입니다.
DOM에서 null은 '존재하지 않음'이나 '해당하는 노드가 없음'을 의미합니다.
childNodes, firstChild, lastChild로 자식 노드 탐색
두 가지 용어를 먼저 정리합니다.
- 자식 노드(child node, children) 바로 아래 자식 요소.
- 후손 노드(descendants) 중첩 관계에 있는 모든 요소
해당 요소의 자식 노드는 childNodes 프로퍼티로 접근할 수 있는데, 유사 배열 객체인 컬렉션임으로 for..of는 사용할 수 있지만, 배열의 메서드는 사용할 수 없습니다.
만약 배열 메서드를 사용하고 싶다면 Array.from(유사 배열) 메서드를 사용하면 됩니다.
✨ DOM 컬렉션은 읽는 것만 가능합니다. DOM 컬렉션은 (현재 상태를 반영하는) 살아있습니다.
형제와 부모 노드
같은 부모를 가진 노드는 형제 노드라고 부르는데, 대표적으로 <head>와 <body>가 있습니다. head는 body의 previous, left 형제노드이고 body는 head의 next, right 형제 노드입니다.
다음 형제 노드에 대한 정보는 nextSibling에 이전 형제 노드는 previousSibling 부모 노드는 parentNode 프로퍼티를 이용해 참조 할 수 있습니다.
요소 간 이동
위에서 언급한 탐색 관련 프로퍼티는 모든 종류의 노드를 참조합니다. 하지만 실무에선 태그에 해당 하는 요소 노드를 조작하는 작업이 대다수 입니다. 요소 태그의 탐색을 알아봅니다
🎨 요소 트리
- children 프로퍼티는 해당 요소의 자식 노드 중 요소 노드만을 가리킵니다.
- firstElementChild와 lastElementChild 프로퍼티는 각각 첫 번째 자식 요소 노드와 마지막 자식 요소 노드를 가리킵니다.
- previousElementSibling과 nextElementSibling은 형제 요소 노드를 가리킵니다.
- parentElement 는 부모 요소 노드를 가리킵니다.
마치며
브라우저에서 자바스크립트의 사용은 돔의 동적인 움직임과 브라우저 자체의 정보를 다루기 위해 사용되고 있습니다. 그러므로 자바스크립트를 잘 다루는 것이 프론트엔드의 좋은 토양이 된다는 건 당연한 이야기 인지 모르겠습니다. 앞으로도 열심히 자바스크립트를 공부해야겠슴니다😙
