728x90
- DOM 이란 브라우저가 HTML 문서를 읽는 과정에서 생성되는 객체이다.
- DOM 은 HTML 의 모든 요소를 트리 구조로 가지고 있다.
- JS 는 DOM에 접근하여 HTML 요소를 변경할 수 있는 API 를 제공합니다.
- 위의 예시보다 훨씬 많은 것들이 있는데, 차차 사용하면서 알아보는 것이 좋습니다.
console.dir(document);
// dir 메소드는 객체의 속성을 출력한다.
// log 메소드는 객체의 정보를 출력하는 것과 대비된다.
console.log(document);
// log 로 출력된 화면을 보면 태그들이 있는 것을 알 수 있다.
console.dir(document.childNodes);
// 현재 노드의 자식 노드 리스트를 반환한다.
// 노드란 자료구조에서 많이 사용하는 용어이다.
// 노드는 앞의 요소와 뒤의 요소를 선으로 연결하는 구조 때문에 노드라는 이름이
// 붙었다. HTML이 body 의 부모 노드인 것이 대표적인 예시다.
console.dir(document.childNodes[1].childNodes);
// document 의 자식 노드 중에 1번(2번째) 노드는 html 이다.
// 즉 html 의 자식 node 를 보여주는 코드이다.
DOM 사용 예시 (defer, script 태그와 body 태그 위치와 오류의 관계)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../Javascript/DOM2"></script>
<style>
.active {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">BOX1</div>
<div class="box">BOX2</div>
<div class="box">BOX3</div>
<div class="box">BOX4</div>
</body>
</html>
const boxE1 = document.querySelector('.box');
// css 선택자로 요소 선택하였다.
console.log(boxE1);
// null 이 출력되는데, html 요소가 존재하는데도 찾지 못하는 것을 볼 수 있음.
// html 문서에 script 태그에 defer 속성을 추가해야 한다.
// script 태그를 body 보다 앞에 작성하면 웹 브라우저가 html body 를 읽기도
// 전에 script 가 실행되므로 이런 오류가 발생했던 것이다.
// 따라서 body 뒤에 script 태그를 작성하거나 defer 속성을 추가해야 한다.
- defer 속성을 넣거나 script 태그의 위치를 body 태그 뒤로 옮기지 않으면 위와 같이 오류가 발생하게 된다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="../Javascript/DOM2"></script>
<style>
.active {
border: 1px solid blue;
}
</style>
</head>
- head 태그 안에 script 태그가 있으려면 위와 같이 defer 속성을 넣어주어야 한다.
<body>
<div class="box">BOX1</div>
<div class="box">BOX2</div>
<div class="box">BOX3</div>
<div class="box">BOX4</div>
<script src="../Javascript/DOM2.js"></script>
</body>
- 혹은 body 영역이 다 끝나고 script 태그를 넣어주면 오류가 발생하지 않는다.
addEventListener 활용하기
const boxE1 = document.querySelector('.box');
// css 선택자로 요소 선택하였다.
console.log(boxE1);
boxE1.addEventListener('click', function() {
console.log('Click 되었습니다.');
})
- addEventListener 는 인자로 2개를 받는다. 이벤트와 수행할 함수를 넣어주어야 한다. 함수 인자는 주로 '익명 함수'로 넣어주게 됩니다.
- 처음 웹 브라우저를 실행하면 위와 같은 화면을 보게 됩니다. 그리고 box1 을 클릭하는 순간 화면이 다음과 같이 출력됩니다.
- click 되었습니다. 라는 문구가 console 창에 정상적으로 출력된 것을 알 수 있습니다.
addEventListener 활용하기 2 { toggle, contains }
const boxE1 = document.querySelector('.box');
// css 선택자로 요소 선택하였다.
console.log(boxE1);
// null 이 출력되는데, html 요소가 존재하는데도 찾지 못하는 것을 볼 수 있음.
// html 문서에 script 태그에 defer 속성을 추가해야 한다.
// script 태그를 body 보다 앞에 작성하면 웹 브라우저가 html body 를 읽기도
// 전에 script 가 실행되므로 이런 오류가 발생했던 것이다.
// 따라서 body 뒤에 script 태그를 작성하거나 defer 속성을 추가해야 한다.
boxE1.addEventListener('click', function() {
boxE1.classList.toggle('active');
// class 속성에 active 값이 없으면 추가, 있으면 삭제하는 코드다.
let hasActive = boxE1.classList.contains('active');
console.log(hasActive);
// 요소에 active 속성이 있는지 확인하는 코드이다.
})
- Box1 을 클릭할 때마다 box1 의 active 클래스가 추가되고 삭제되고 있는 것을 알 수 있고, active 클래스로 설정될 때마다 해당하는 css 가 적용되는 것을 볼 수 있습니다.
querySelectorAll 활용하기 { forEach }
const boxEls = document.querySelectorAll('.box');
// document.querySelectorAll 이기 때문에 box 클래스를 가진
// 모든 html 요소가 반환된다.
console.log(boxEls);
// 여러개가 반환 되어있는 것을 볼 수 있습니다.
boxEls.forEach(function (boxEl, index) {
console.log(boxEl, index);
})
// forEach 메소드를 사용하면 요소를 순회할 수 있다.
// 인자로 함수를 사용합니다.
// 위 코드를 보면 boxEls 의 요소들 중 첫 번째 요소를 boxEl 에 담고
// 첫 번째 요소의 index 번호를 index 에 담습니다.
// 그러면 함수 안에서 우리가 각 요소마다 해주고 싶은 것을 하게 됩니다.
// console.log(boxEl, index) 의 결과가 콘솔창에 보이게 됩니다.
querySelector 활용하기 { textContent }
const boxE1 = document.querySelector('.box');
boxE1.textContent = 'Hi~';
- breakPoint 를 걸어 주고 난 이후에 모습을 보면 아직 box1 이 바뀌지 않은 상태임을 알 수 있다.
- 코드를 모두 실행되고 나면 BOX1 이 Hi~ 로 수정된 것을 볼 수 있다.
'[그린컴퓨터] 클라이언트 > Javascript' 카테고리의 다른 글
| 동기(Sync)와 비동기(Async) { Promise } (0) | 2023.06.30 |
|---|---|
| 동기(Sync)와 비동기(Async) { 일반함수와 콜스택메모리, 비동기함수(setTimeout) 처리과정 } (0) | 2023.06.30 |
| 프로토타입과 상속 { prototype, __proto__ } (0) | 2023.06.30 |
| 일반함수, 익명함수, 화살표함수, this (0) | 2023.06.29 |
| 연산자, 조건문 (0) | 2023.06.29 |