안녕하세요
이제 진짜 말하는 감자가 되어버린 저입니다.
dom에 대해 배웠던 시간은 정말 헤매느라 자괴감이 들었습니다.
저번 포스팅에서 작성했던 map함수, filter함수, find함수와 같은 날 배웠지만
제 메모리가 배운 걸 받아들이질 못해서 ㅋㅎㅋㅎㅋ 따로 쓰게 되었습니다.
- javascript DOM
DOM = Document Object Model(문서 객체 모델)
xml이나 html 문서에 접근하기 위한 일종의 인터페이스로, 문서 내의 모든 요소를 정의하고, 각각의 요소에'접근하는 방법'을 제공한다.
제가 수업시간에 실습에서 배웠던 dom의 정의대로 활용한 예시를 들자면,
html에 <div class="pink"></div> 라는 태그가 있다면,
js파일에서 document.getElementByClassName('pink') 라고 한다면,
html에 있는 pink라는 클래그 이름을 가진 요소를
document함수를써서 불러올 수 있다는 것입니다.
- DOM tree
상기 그림과 같이 돔은 트리 형태로 구성 되어있으며, 문서의 각각의 요소들을 "노드"라고 부릅니다.
Dom 트리는 html이 브라우저에 불려가면서 동시에 생성됩니다.
각 태그는 Dom의 노드들로 변환되고 가지 뻗듯이 저렇게 생성이 되는 겁니다.
이 Dom트리는 브라우저의 메모리에 저장되고 당연하지만 웹 브라우저가 로드 되고 종료될 때까지 유지됩니다.
그리고 살아있는 중간중간 사용자의 반응이나 변경사항에 따라 즉각즉각 업데이트가 됩니다.
그리고 사용자가 다른 페이지로 이동하거나 페이지를 벗어나게 되면 Dom트리는 소멸되고
다시 웹페이지를 열 때마다 다시 생성됩니다.
참 피곤할 것같음,,,
- getElement와 querySelector
이 class명이나 id명 또는 태그명 등으로 html에 있는 요소를 js에서 document를 통해 '지목'할 수 있다고 하였습니다.
이 '지목'하는 방법에는 크게 두가지 가 있습니다.
- getElement메서드
메서드들은 컬렉션이 아닌 단일 요소(Element)를 반환합니다. 만약 해당 조건을 만족하는 요소가 여러 개라면, 첫 번째 요소만 선택됩니다.
1. getElementById: 문서 내에서 특정 ID를 가진 요소를 선택합니다.
const element = document.getElementById("elementId");2. getElementsByClassName: 문서 내에서 특정 클래스 이름을 가진 모든 요소들의 컬렉션(NodeList)을 선택합니다.
const elements = document.getElementsByClassName("className");3. getElementsByTagName: 문서 내에서 특정 태그 이름을 가진 모든 요소들의 컬렉션(NodeList)을 선택합니다.
const elements = document.getElementsByTagName("tagName");- querySelector 메서드
1. querySelector: CSS 선택자를 사용하여 특정 요소를 선택합니다.
대신, 해당되는 선택자의 첫번째 요소만 반환합니다.
const element = document.querySelector("CSSSelector");위 예시에 있는 CSSSelector는 하기와 같은 아이들이 들어갈 수 있습니다.
- 클래스 이름 : ".className"
- id 이름: "#idnNme"
- 태그 이름: "tagName"
- 복합 연산자 (ex, "ul li .className")
2. querySelectorAll: 마찬가지로 CSS 선택자를 사용하여 특정 요소를 선택합니다.
그러나 해당되는 선택자의 모든 요소들을 NodeList형태로 반환합니다.
const elements = document.querySelectorAll("CSSSelector");이 NodeList로 반환된 반환값을 forEach함수로 하나하나 접근해서 속성값을 바꾸기도 합니다.
그러나 여기서 주의해야할 점은 NodeList는 배열이 아닌 '유사배열' 이기 때문에
map, filter와 같은 배열 메서드를 사용할 수 없습니다.
이러한 함수를 사용하려면 배열로 변환해서 사용해야한다고 합니다.
이유는 유사 배열과 찐 배열은 다른 객체이므로, 유사 배열에는 찐 배열에 있는 배열 인스턴스가 없대여,,,
뭔말인지 잘 모르겠지만 암튼 그렇대요.
- Dom 활용
그래서 이 지목을 제대로 한 후에는 어떻게 dom을 활용할 수 있느냐?
일단 활용법을 다양하게 알아보기 전에,
먼저 dom을 통해 지목한 아이들을 대부분 변수에 넣어서 활용하는 것이
클린 코딩과 가독성에 좋으니 이부분을 활용할 예정입니다.
- 실습_간단 계산기 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습_간단 계산기 만들기</title>
<script defer src="./test00.js"></script>
</head>
<body>
<div>
<p>값1: </p>
<input type="text" id = 'num1'>
</div>
<div>
<p>값2: </p>
<input type="text" id = 'num2'>
</div>
<div>
<p>연산자: </p>
<input type="text" id = 'oper'>
</div>
<div>
<p>결과: </p>
<input type="text" id = 'result'>
</div>
<div>
<p class = 'calcul'>계산하기</p>
<p class = 'reset'>초기화</p>
</div>
</body>
</html>
//html에 있는 calcul 클래스를 불러옴
const calcul = document.querySelector('.calcul');
//html에 있는 reset 클래스를 불러옴
const reset = document.querySelector('.reset');
//각 div블록 안의 요소들 한줄로 만들고 style적용 시키기
const divs = document.querySelectorAll('div');
divs.forEach((div) =>{
div.style.display = 'flex';
div.style.height = ' 40px';
div.style.alignItems = 'center';
});
//style태그로 배경색 및 간격 설정
calcul.style.backgroundColor = '#999';
reset.style.backgroundColor = '#999';
calcul.style.margin = '30px';
//addEventListener메소드로 click했을때 일어날 함수를 설정
calcul.addEventListener('click', function(){
//num1이라는 id명을 가진 요소의 value값을 가져와서 int로 변환
const num1 = parseInt(document.getElementById('num1').value);
//num2이라는 id명을 가진 요소의 value값을 가져와서 int로 변환
const num2 = parseInt(document.getElementById('num2').value);
const oper = document.getElementById('oper').value;
let num3;
if (oper === '+'){
num3 = num1 + num2;
}else if (oper === '-'){
num3 = num1 - num2;
}else if (oper === '/'){
num3 = num1 / num2;
}else if (oper === '%'){
num3 = num1 % num2;
}else if (oper === '*'){
num3 = num1 * num2;
}
document.getElementById('result').value = num3
// console.log(num3);
})
//초기화 버튼에 대해 각각의 text박스 초기화 설정
reset.addEventListener('click', function(){
document.getElementById('num1').value = '';
document.getElementById('num2').value = '';
document.getElementById('oper').value = '';
document.getElementById('result').value = '';
})
- 실습_ 방명록 만들기
//div 태그의 모든 요소를 가져와서 divs 변수에 담음
const divs = document.querySelectorAll('div');
//모든 divs의 요소에 해당 style 적용
divs.forEach((div) =>{
div.style.display = 'flex';
div.style.alignItems = 'center';
});
//작성자 태그 가져옴
const person = document.getElementById('person');
//innerHTML속성으로 작성자 태그의 내용과 글씨 변경해봄
person.innerHTML = '<b>작성자</b>';
const content = document.getElementById('content');
content.innerHTML = '<b>내용</b>'
person_text.style.width = '100px';
content_text.style.width = '400px';
const btn = document.querySelector('#btn');
btn.style.width = '40px';
btn.style.backgroundColor = '#999';
//추가될 방명록의 넘버
let currentNumber = 1;
//테이블 태그 가져옴
const table = document.querySelector('table');
//버튼에 이벤트 생성함
btn.addEventListener('click', function (){
const person_text = document.querySelector('#person_text');
const content_text = document.querySelector('#content_text');
// 새로운 행과 세 개의 테이블 데이터 셀 생성
const newRow = document.createElement('tr');
const numCell = document.createElement('td');
const personCell = document.createElement('td');
const contentCell = document.createElement('td');
const dateCell = document.createElement('td');
//각각의 새로운 행의 새로운 열에 값 넣어주기
numCell.innerHTML = currentNumber++;
personCell.innerHTML = person_text;
contentCell.innerHTML = content_text;
dateCell.innerHTML = Date.now();
//newRow의 자식 요소로 등급(?)시켜주기
newRow.appendChild(numCell);
newRow.appendChild(personCell);
newRow.appendChild(contentCell);
newRow.appendChild(dateCell);
//table에 완성된 newRow 자식요소로 넣어주기
table.appendChild(newRow);
//초기화
person_text.value = '';
content_text.value = '';
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습_간단 계산기 만들기</title>
<script defer src = './test01.js'></script>
</head>
<body>
<h3>방명록입니다.</h3>
<div>
<p id = 'person'></p>
<input type="text" id = 'person_text'>
</div>
<div>
<p id = 'content'></p>
<input type="text" id = 'content_text'>
</div>
<p id = 'btn'>작성</p>
<table border="1px" cellpadding = '10px'>
<tr>
<td id = 'num'>번호</td>
<td id = 'person_res'>작성자</td>
<td id = 'content_res'>내용</td>
<td id = 'date'>작성일</td>
</tr>
</table>
</body>
</html>
수고했다
어려웠다
'개발 공부한 것들 > SeSSAC 웹 풀스텍 과정 회고록' 카테고리의 다른 글
| [SeSSAC] 웹 풀스택 영등포 5기 과정_ Web Resume만들기 (0) | 2023.08.04 |
|---|---|
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(3)_jquery (0) | 2023.08.03 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(2)_map,filter,find메소드 (0) | 2023.07.29 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_javascript배우기(1)_변수, 배열 , 반복문 (0) | 2023.07.27 |
| [SeSSAC] 웹 풀스택 영등포 5기 과정_css배우기 (0) | 2023.07.25 |