DOM (Document Object Model)
텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다.
즉,자바스크립라는 프로그래밍 언어를 통해 HTML,XML 문서에 접근할 수 있게 해주고 내용을 변경할 수 있게 해주는 것이 DOM입니다.
DOM을 알아야하는 이유
- 자바스크립트를 이용해 HTML요소에 접근하고 싶을 때
- 웹페이지에 보여지는 데이터를 변경하고 싶을 때
- 인터렉티브한 동적인 웹을 만들고 싶을 때
01. DOM사용하기 = HTML 객체로 생성하기
단건 조회 : getElement, querySelector
복수 조회 : getElements, querySelectorAll
1-1.tag 이름으로 가져오기
const 객체 = document.getElementsByTagName("tag이름")
- 특정 태그 모두를 가져오기 때문에 반한되는 객체는 항상 배열 형식이다.
- 반환되는 객체의 수가 너무 많기 때문에 잘 사용하지 않는다.
1-2.id 값으로 가져오기
const 객체 = document.getElementById("ID이름")
- ID이름에 "#"을 붙이지 않는다.
- ID값은 HTML 문서 안에서 고유한 요소이므로 항상 단일 객체로 반환된다.
1-3. class 이름으로 가져오기
const 객체 = document.getElementsByClassName("CLASS이름");
- 클래스이름에 "."을 붙이지 않는다.
- 특정 클래스가 적용된 모두를 가져오기 때문에 반환되는 객체는 배열 형식이다.
1-4. cssSelector
- 단일 객체 가져오기 : 일치하는 첫 번째 엘리먼트
const 객체 = document.querySelector("CSS선택자");
- "#","."을 붙여서 가져온다.
- css 선택자의 형태에 상관없이 단일 객체로 반환된다.
- 만약 동일한 셀렉터를 적용받는 요소가 두개 이상인 경우 가장 첫번째 요소만 반환된다.
- 복수 객체 가져오기 : 일치하는 모든 엘리먼트
const 객체 = document.querySelectorAll("CSS선택자");
- "#","."을 붙여서 가져온다.
- css 선택자의 형태에 상관없이 복수 객체를 배열로 반환한다.
02.획득한 객체의 내부에 대한 내용 접근 = HTML 내부에 내용 넣기
- Javascript 코드는 <스크립트></스크립트> 태그 안에서 작성되며 HTML 문서의 어느곳에서나 존재할 수 있다.
- HTML안에서 실행되는 JS는 document라는 내장객체를 갖게되는데, documnet객체가 갖는 메서드 중에서 getElementById(id값)는 HTML태그의 id값에 의해서 (ById) HTML요소(Element)를 가져온다(get)
Javascript로 가져온 HTML 객체는 innerHTML 이라는 속성값을 갖는다.
const 객체 = document.querySelector("#hello"); // 적용된 내용 조회하기 ** 객체.innerHTML = "Hello World";**이 값에 할당한 내용은 실제 HTML의 시작태그와 끝 태그 사이에 적용된다.
<div id="hello"> Hello World </div> ----------- ** innerHTML **
2-1. 헤드태그안에 스크립트 작성 시
- 한줄씩 차례대로 해석하는 웹브라우저의 특성상 해당 요소를 발견하지 못하고 null리턴
<head> <script> //#foo에 대한 html Element 객체 반환받기 const foo = document.getElementById("foo"); //HTML Element객체는 innerHTML이라는 속성값을 갖으며, //이값은 해당 태그의 시작태그와 끝태그 사의 내용을 의미한다. foo.innerHTML = "Hello World"; /* 위 코드는 한줄씩 차례대로 해석하는 웹브라우저의 특성상 7라인을 브라우저가 해석하는 시점에서 #foo요소를 발견하지 못하고 null 리턴하고, 11라인에서 null에대한 접근 에러가 발생한다. */ </script> </head> <body> <h1 id="foo"></h1> </body>
2-2. 바디태그의 onload속성 활용 시
- body태그의 onload속성은 브라우저가 html을 끝까지 해석한 직후에 지정된 함수를 호출한다.
- html태그와 js구문이 뒤섞이게 되어 유지보수에 좋지 않다.
- Javascript의 고도화는 스파게티코드로부터 HTML과 JS를 분리하는 것부터 시작된다.
<head> <script> function start() { //이 코드가 정상실행되기 위해서는 브라우저가 //html 코드를 끝까지 해석한 후에 실행되어야 한다. const foo = document.getElementById("foo"); foo.innerHTML = "Hello World"; } </script> </head> <!-- body태그의 onload속성은 브라우저가 html을 끝까지 해석한 직후에 지정된 함수를 호출한다. 장점: 고전적인 바닐라스크립트 처리 중에서 가장 간결 단점: html태그와 js구문이 뒤섞이게되어 유지보수에 좋지 않다. Javascript의 고도화는 이러한 스파게티코드로부터 HTML과 JS를 분리하는 것부터 시작된다. --> <body onload="start()"> <h1 id="foo"></h1> </body>
2-3. 바디태그 닫기 직전 스크립트 작성 시
- 페이지 로딩속도가 빨라지며 검색엔진이 해당 페이지를 식별하는 것에 더 수월해진다.
- 구글은 몇년 전부터 JS코드가 아래에 배치된 페이지에 검색결과 우선권을 주고 있다.
<head> </head> <body> <h1 id="foo"></h1> <script> //스크립트를 body태그 닫기 직전에 위치시키면 //웹브라우저가 html태그를 모두 식별한 후 js를 실행하게 된다. const foo = document.getElementById("foo"); foo.innerHTML = "Hello World"; /* - 앞서 확이한 방식들보다 JS코드를 맨마지막에 배치하는 것이 페이지 로딩속도를 빠르게 할 수 있다. - 페이지 로딩속도가 빠르기 때문에 검색엔진이 이 페이지를 식별하는것에 더 수월하다. - 그래서 구글은 몇년 전부터 JS코드가 아래에 배치된 페이지에 검색결과 우선권을 주고 있다. */ </script> </body>
정리
- DOM은 자바스크립트언어를 이용하여 html문서에 접근할수 있도록하는 객체이다.
- html안에 실행되는 js는 document라는 내장객체를 갖게되며
- 단건조회는 getElement,querySelector
- 복수조회는 getElements,querySlectorAll 사용하여 해당 요소에 접근한다.
- js로 접근한 html객체는 innerHTML이라는 속성값을 얻으며
- 객체.innerHTML = 값; 예시와 같이 값에 할당한 내용은 실제 HTML의 해당 요소의 시작태그와 끝태그 사이에 적용된다.
- html 문서내의 스크립트는 바디태그 닫기 직전에 넣는것이 페이지로딩속도에 도움을 주고 유지보수에 좋다.
냠소현 개발일지