자바스크립트는 원래 브라우저 스크립트 언어로 시작해, 이제는 그 역할을 거의 독점하고 있다. 브라우저에서 자바스크립트를 사용할 때 알아야 하는 API가 있드며 브라우저 개발에 중요한 핵심 개념을 알아보자.
문서 객체 모델
DOM, 즉 문서 객체 모델은 HTML 문서의 구조를 나타내는 표기법인 동시에 브라우저가 HTML 문서를 조작하는 핵심 요소이기도 하다.
DOM은 트리 구조로 표현하고 DOM 트리는 노드로 구성된다. 루트 노드를 제외한 모든 노드에 부모가 있으며, 자식 노드는 있어도 되고 없어도 된다.
DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리 구조를 나타내는 parentNode 와 childNodes 프로퍼티, 자신에 대한 프로퍼티인 nodeName과 nodeType 프로퍼티가 있다.
용어 사용
트리는 단순하고 직관적인 개념이며, 용어 역시 직관적이다. 부모 노드는 직접적인 윗 단계를 말하며, 자식 노드 역시 직접적인 자식이다.
자손은 자식, 자식의 자식 등을 말하고 조상은 부모, 부모의 부모 등을 말한다.
get 메서드
DOM에서 원하는 HTML 요소를 빨리 찾을 수 있는 메서드가 있다.
getElementById - 모든 HTML 요소는 고유한 ID를 할당받을 수 있고, document.getElementById는 ID를 이용해 요소를 찾는다.
document.getElementById("content"); // <div id="content">..getElementByClassName - 주어진 클래스 이름에 해당하는 요소 반환.
getElementByTagName - 주어진 태그 이름에 해당하는 요소들을 반환.
DOM 요소 쿼리
ID, 클래스, 태그 이름 같은 한 가지 조건이 아니라 다른 요소와의 관계를 사용해 원하는 요소를 찾는 훨씬 더 범용적인 메서드가 있다.
querySelector / querySelectorAll 은 css 선택자를 사용해 요소를 찾는 메서드이다.
DOM 요소 조작
찾아낸 요소를 수정할 수 있다.
textConten - HTML 태그를 제거한 순수 텍스트 데이터만 제공
innerHTML - HTML 태그를 그대로 제공
const para1 = document.getElementByTagName('p')[0];
para1.textContent = "HTML file";
para1.innerHTML = "HTML file";새 DOM 요소 만들기
document.createElement 메서드를 사용해 새 노드를 만들 수 있다.
이 함수는 새 요소를 만들지만 DOM에 추가하지는 않기 때문에 추가하는 일은 따로 해야한다.
P.379
