DOM...
자바스크립트 하다보면 알게 모르게 하게 되는 돔...
막상 뭐냐고 물어보면 꿀먹은 벙어리가 된다.
참돔 이런건 알겠는데...
DOM(Document Object Model) 정의
돔은 한마디로
Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한것이다.
엥? 그래도 무슨말인지 모르겠는데...
당연하다. 나도 잘몰랐다. 일단 저 말을 이해하기 위해서
먼저 웹 페이지가 로딩되는 과정을 이해해야한다.
웹 페이지 로딩 과정
웹 사이트를 들어가면
1. 클라이언트가 서버에 요청을한다.
2. 서버가 클라이언트에게 html문서를 준다.
3. 웹 브라우저가 html 파일을 parsing한다.
(파싱의 뜻은 컴퓨터에서 컴파일러 또는 번역기가 원시 부호를 기계어로 번역하는 과정의 한 단계, 문법적으로 구성하는 과정. 즉 원시 프로그램에서 나타난 토큰(token)의 열을 받아들여 이를 그 언어의 문법에 맞게 구문 분석 트리(parse tree)로 구성해 내는 일이다. 파싱은 크게 하향식 파싱과 상향식 파싱으로 나눌 수 있다.-네이버 사전 참고)
4. 파싱트리 구성하는것처럼 돔 트리를 구성한다.
5. 나머지 과정은 여기 참고하자.
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
이런식으로 로딩이된다. 우리가 알아야될 과정은 돔트리 구성한다는것 까지 알면된다.
한마디로
돔은 웹페이지 로딩 3번과정인 웹 브라우저(크롬 등)가 수신한 html문서를 파싱한 결과물이라고 보면된다.
DOM에 대한 특징
-
DOM은 브라우저에 내장되어 있어서 html의 내용을
javascript로 접근, 제어 할수있다. -
DOM에는 node들이 있다. 이러한 모든 node에는 메서드(method)와 속성을 가지고있다.
(node는 나무줄기의 마디라고 생각하면된다. 위에 돔트리로 예시를 들자면
줄기가 뻗어나가는 교점이라고 생각! 저 파란박스들...)
메서드와 속성 구별하기.
document.getElementById("demo").innerHTML = "Hello World!";
//getElementById("demo") - 메서드 ()괄호 중요함.
//innerHTML - 속성메서드 vs 함수
// 메서드
person.getName();
// 함수
let testlog = function () {
console.log('test.);
}
testLog();
메서드는 호출의 주체가 있다. 위에 예시로는 [perso.] 이 부분을 말하는 것이다.
함수는 호출의 주체가 없음. 그래서 앞에 [~.] 부분이 없다.
DOM... 접근해볼게...
1.돔트리의 최상단 노드는 doccument
자바스크립트하다 보면 가장 많이 보는 단어가 아닐까 싶다...
document.getRootNode();2. childNodes, parentNode 명령어로 위 아래 왔다갔다하기
childNodes, parentNode
명령어 이용해서 나뭇가지 위 아래로 왔다갔다 할수있다.
참고로 차일드노드'스'에 s가 붙고 페어런츠노드에 s가 없는 이유는 가지는 여러가지인데
부모는 하나여서 그렇다...
돔트리 구조 생각하면 쉽게 이해된다.
3. 돔 관련 api
위 코드를 주목하자.// 해당 id명을 가진 요소 하나를 반환합니다. document.getElementById("id명")
// 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다. (참고로 인덱스는 배열에 숫자를말한다.) document.getElementsByTagName("태그명")[인덱스]
잠깐! 왜 getElementById에는 인덱스가 없어요?- id의 고유특성인 하나만 설정이 가능해서 인덱스가 없다.
// 해당 선택자를 만족하는 요소 하나를 반환합니다. document.querySelector("선택자") // 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다. document.querySelectorAll("선택자명")[인덱스]
- querySelector 선택할때 id이면 #, class이면 . 붙여줘야된다.
- querySelector 여러개 요소있는것을 선택하면 그 중 첫번째 요소만 선택됨. 그럴땐 querySelectorAll("선택자명")[인덱스] 코드를 쓴다.
// 새로운 노드를 생성합니다. const div = document.createElement('div'); document.body.append(div); document.body.append(div);
- 맨 밑에 div가 생성된게 보임.
차이를 알아보자 element.innerHTML = new html content element.innerText = new text
- 하위 속성으로 적용해서 innerHTML은 태그 적용이 돤다.
- innerText는 태그 적용이 안돼서 태그 그대로 출력됨.
자세한건 밑에 블로그 참고
https://velog.io/@kim_unknown_/JavaScript-Difftext
dom의 기초부터해서 적용하는법 까지 알아보았다.
돔의 세계...
정복한 기념으로 참돔에 소주한잔 먹으러 가야겠다.
