정의
DOM(Document Object Model) : XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스
사진 출처 - 위키백과
특징
- BOM(Browser Object Model) 의 하나로, 트리 구조로 되어있다.
- 자바스크립트로 요소에 접근해서 요소를 조작할 수 있다.
- after, before 같은 가상 요소를 포함하지 않는다.
다음은 빈 HTML body에 div 태그를 추가하는 JS 코드와 그 실행결과(웹페이지 화면)이다.
var body = document.body;
var divText = document.createElement('div');
var divHTML = document.createElement('div');
var divTextContent = document.createElement('div');
divText.innerText = "This is innerText.";
divHTML.innerHTML = "This is innerHTML.";
divTextContent.textContent = "This is textContent.";
body.append(divText);
body.append(divHTML);
body.append(divTextContent);
innerText, innerHTML, textContent의 차이
| 종류 | 기능 |
|---|---|
innerText | Element 내의 보여지는 텍스트 값을 읽음 |
innerHTML | Element의 HTML, XML의 전체 내용을 읽음 |
textContent | Node가 가지고 있는 텍스트 값을 그대로 읽음 |
innerText는 보이지 않는 값을 가져오지 않는다. ex.)display: none;값innerHTML은 HTML 태그 요소를 가져와서 조작할 수 있기 때문에 XSS공격에 취약할 수 있다.textContent는 보이지 않는 값도 가져온다.
다음은 innerText, innerHTML, textContent의 차이를 알아보기 위한 코드와 그 실행결과(콘솔)이다.
예시
HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="divEx">이것은 보이는 글자입니다. 사이에 긴 공백이 있습니다.
<span style='display:none'>
이것은 숨겨진 글자입니다.
</span>
</div>
</body>
</html>JS 코드
var divEx = document.querySelector('#divEx');
console.log(divEx.innerHTML);
console.log(divEx.innerText);
console.log(divEx.textContent);innerHTML의 실행결과
"이것은 보이는 글자입니다. 사이에 긴 공백이 있습니다.
<span style=\"display:none\">
이것은 숨겨진 글자입니다.
</span>
"innerText의 실행결과
"이것은 보이는 글자입니다. 사이에 긴 공백이 있습니다."textContent의 실행결과
"이것은 보이는 글자입니다. 사이에 긴 공백이 있습니다.
이것은 숨겨진 글자입니다.
"요소를 가져오는 방법
querySelector
| 종류 | 특징 |
|---|---|
querySelectorAll(css선택자) | 해당 Element의 CSS선택자에 대응하는 요소 모두를 반환 |
querySelector(css선택자) | 주어진 Element의 CSS선택자에 대응하는 요소 중 첫 번째 요소만 반환 |
예시코드
let cat = document.querySelector('#cat'); // id명이 cat인 요소
let first = document.querySelectorAll('.dog')[0]; // class명이 dog인 요소 중 첫번째 요소
let first2 = document.querySelector('.dog'); // 위와 같은 코드
let items = document.querySelectorAll('#cat, .dog'); // id명이 cat인 요소들과 class명이 dog인 요소들getElement(s)By
| 종류 | 특징 |
|---|---|
getElementsByTagName('tag명') | 주어진 tag에 해당하는 모든 요소 반환 |
getElementById('id명') | 해당 id의 요소 반환 |
getElementsByClassName('class명') | 해당 class의 요소 반환 |
id는 고유한 값이므로
getElement뒤에 s를 붙이지 않는다.
예시코드
let cat = document.getElementById('cat'); // id명이 cat인 요소
let dog = document.getElementsByClassName('dog'); // class명이 dog인 요소
let divs = document.getElementsByTagName('div'); // 문서 내 모든 div 태그들 
FE 공부중. 깃허브 팔로우&소통 환영합니다!