2장 - Web API
1. DOM (Document Object Model)
2-1. DOM 기초
DOM이란 HTML문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API를 제공하는 트리 형태의 자료구조
HTML 요소와 노드 객체
- HTML 요소는 브라우저 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환
-> 이 때 요소의 속성은 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환
주요 노드 객체
- 문서 노드(document node)
- DOM트리의 최상위 노트, document객체로 표현
- 요소 노드(element node)
- 각 html요소들을 가리키는 객체, 부모 자식 상속관계 형성
- 어트리뷰트 노드(attribute node)
- 요소 노드와 형제 관계 형성
- 텍스트 노드(text node)
- 요소 노드의 자식 노드로 형성
DOM 구조
/*
<html>
<head>
</head>
<body>
<div class='wrap'>
<ul id='list'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
*/
let html, head, body, div, ul, li;
html = {
tagNmae: 'html',
children: [head, body] // 자식
};
head = {
tagNmae: 'head',
children: null,
parentNode: html, // 부모
nextSibling: body
};
body = {
tagNmae: 'body',
children: null,
parentNode: html,
nextSibling: null, // 다음 형제
preSibling: head // 이전 형제
}
div = {
tagNmae: 'body',
children: [ul],
parentNode: body,
nextSibling: null,
preSibling: null,
className: 'wrap clearfix',
classList: ['wrap', 'clearfix'],
attributes: {
'class' : 'wrap clearfix',
'title' : 'abc'
}
}
console.log(div.parentNode);document.documentElement: html 태그 지칭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="fruits">
<li class="f-item">사과</li>
<li class="f-item">바나나</li>
<li class="f-item">포도</li>
<li class="f-item">복숭아</li>
</ul>
<script>
// console.log(document);
// console.log(document.documentElement); // html태그 지칭
const html = document.documentElement;
html.classList.add('my-html');
console.log(html.children[1]); // body
// const body = html.children[1];
const body = document.body;
body.style.background = 'gray';
</script>
</body>
</html>id로 태그 가져오기
- document 노드 객체가 제공하는 getElementById 메서드는 인수로 전달한 id 속성값을 갖는 하나의 요소 노드를 탐색하여 반환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="fruits">
<li id="apple" class="f-item">사과</li>
<li id="banana" class="f-item">바나나</li>
<li id="grape" class="f-item">포도</li>
<li id="peach" class="f-item">복숭아</li>
</ul>
<script>
const $banana = document.getElementById('banana'); // $ 붙어있으면 안에 태그가 있구나~
console.log($banana.textContent);
$banana.textContent = '부네너';
$banana.pet = '바나나원숭이';
const $peach = document.getElementById('peach');
$peach.style['font-style'] = 'italic';
// id가 grape인 요소노드객체를 취득하여
// 배경색상을 violet색으로 조작하세요.
const $grape = document.getElementById('grape');
// $grape.style['background-color'] = 'violet';
$grape.style.backgroundColor = 'violet'; // 자바스크립트는 케멀케이스로
$grape.style.width = 'fit-content';
</script>
</body>
</html>- $를 붙이는 것은 안에 태그가 있는 것이라고 알려주는 관례
css 선택자로 태그 가져오기
- 인수로 전달한 CSS선택자를 만족하는 요소 노드가 여러 개인 경우 첫 번째 노드만 반환
- 인수로 전달한 CSS선택자를 만족하는 요소 노드가 있는 경우 DOM 컬렉션 객체인
NodeList라는 유사 배열 객체를 반환 - 유사 배열: 객체 형태를 유지한 배열
querySelectorAll, NodeList(유사배열) -> 배열
- querySelectorAll를 이용해서 뽑아보면 NodeList라는 DOM 컬렉션 객체에 들어있는 것을 볼 수 있다. 이를 유사배열이라고 하는데 이것을
[... array]을 이용해 배열로 바꿔줄 수 있다.
-> 배열로 바꾸면 for문, for of문, push, pop, reverse 등 배열문법을 쓸 수 있음!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="fruits">
<li class="f-item ap">사과</li>
<li class="f-item bn">바나나</li>
<li id="grape" class="f-item gp">포도</li>
<li class="f-item pc">복숭아</li>
</ul>
<script>
// 아이디로 태그를 가져오는 것과는 다르게 내가 알고있는 방법을
// 이용해서 불러올 수 있다.
// const $grape = document.querySelector('.gp');
// const $grape = document.querySelector('#fruits li:nth-child(3)');
// const $grape = document.querySelector('.bn + li');
const $grape = document.querySelector('#grape');
console.log($grape);
$grape.textContent = '맛있는 포도';
// const $fItemList = document.querySelectorAll('.f-item');
// [...array] 을 통해 유사배열 -> 배열로 바꿀 수 있음
const $fItemList = [...document.querySelectorAll('.f-item')];
console.log($fItemList);
// for(const $f of $fItemList) {
// $f.style.color = 'red';
// }
$fItemList.forEach($f => {
$f.style.color = 'blue';
});
// $fItemList.pop();
// 유사 배열: 객체 형태를 유지한 배열
// 배열은 아니기 때문에 배열문법 사용 불가능
// push, pop, shift, unshift 등...
const foods = {
0: '짜장면',
1: '짬뽕',
2: '볶음밥',
length: 3,
age: 30
};
</script>
</body>
</html>- getElementById랑은 다르게
.과#을 괄호 안에 넣어주어야함 nth-child, 형제, 후손 등 다양한 방법을 통해 나타낼 수 있음
퀴즈
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- #wrap>ul#list1>li{리스트$}*7 -->
<div id="wrap">
<ul id="list1">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</div>
<script>
//1. id="list1"인 요소에 <li> 요소중
// 홀수번째 요소만 선택후 배경색상 yellow 적용
// 유사배열 -> 배열
const $yellowColor = [
...document.querySelectorAll("#list1 li:nth-child(2n+1)"),
];
$yellowColor.forEach(($f) => {
$f.style.backgroundColor = "yellow";
});
//2. id="list1"인 요소에 <li> 요소중
// 짝수번째 요소만 선택후 배경색상 gray 적용
const $grayColor = [
...document.querySelectorAll("#list1 li:nth-child(2n)"),
];
$grayColor.forEach(($f) => {
$f.style.backgroundColor = "gray";
});
//3. id="list1"인 요소에 <li> 요소중
// 첫번째 <li>요소만 선택후 폰트색상 red 적용
const $redFontColor = [
...document.querySelectorAll("#list1 li:first-child"),
];
$redFontColor.forEach(($f) => {
$f.style.color = "red";
});
//4. id="list1"인 요소에 <li> 요소중
// 마지막번째 <li>요소만 선택후 폰트색상 green 적용
const $greenFontColor = [
...document.querySelectorAll("#list1 li:last-child"),
];
$greenFontColor.forEach(($f) => {
$f.style.color = "green";
});
//5. id="list1"인 요소에 <li> 요소중
// 두번째 <li>요소만 선택후 font-style: italic 적용
const $fontStyleItalic = [
...document.querySelectorAll("#list1 li:nth-child(2)"),
];
$fontStyleItalic.forEach(($f) => {
$f.style.fontStyle = "italic";
});
//6. id="list1"인 요소에 <li> 요소중 3번째 이전 요소만 선택후
// border: 2px dotted aqua 적용 (1, 2번째만 선택)
const $borderStyleAqua = [
...document.querySelectorAll("#list1 li:nth-child(-n+2)"),
];
$borderStyleAqua.forEach(($f) => {
$f.style.border = "2px dotted aqua";
});
//7. id="list1"인 요소에 <li> 요소중 3번째 이후요소만 선택후
// border 2px dashed violet 적용 (3번째부터 끝까지 선택)
const $borderStyleViolet = [
...document.querySelectorAll("#list1 li:nth-child(n+3)"),
];
$borderStyleViolet.forEach(($f) => {
$f.style.border = "2px dashed violet";
});
</script>
</body>
</html>
</body>
</html>- querySelectorAll로 만들어진 유사배열을 배열로 만드는 게 포인트
-> 배열로 만들었기 때문에 배열문법들 적용가능, 난 콜백함수인 forEach를 이용했다. - nth-child, first-child, last-child 등을 이용해 내가 원하는 부분을 선택
- 자바스크립트만을 이용하여 스타일 적용 (css사용 x)
백엔드 개발자