DOM
DOM은 Document Object Model의 약자로,
HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model
즉, JavaScript를 사용해 DOM으로 HTML을 조작할 수 있음
DOM은 트리 구조로 이루어져 있음
<script> 태그의 위치
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면,
웹 브라우저는 HTML 해석을 잠시 멈추고 <script> 요소를 먼저 실행
즉 태그로 연결한 스크립트 파일을 다 실행할 때까지 html 멈춘다는 점을 주의해야 함
1. <head> 안쪽에 <script> 태그 삽입
2. <body> 안쪽에 <script> 태그 삽입 (권장)
jQuery 추가하기
jQuery 라이브러리를 사용하기 위해 HTML 문서에 jQuery를 추가하기 위해서는 <script> 태그를 사용함
일반적으로는 Google CDN에서 제공하는 jQuery 링크를 사용
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
jQuery 사용 예제
$(document).ready(function(){
console.log('welcome jQuery');
let msgElement = $('#msg');
console.log(msgElement);
});
JavaScript를 활용해 DOM 조작 간단한 실습
CRUD
// 태그를 생성
const test = document.createElement('div');
// 태그를 삽입할 위치를 조회
const containerDiv = document.querySelector('#container');
// 쿼리셀렉터로 가져온 위치 아래에 자손으로 추가
// 다른 자손들이 있다면 가장 아래에 추가
containerDiv.append(test);
// 태그 안에 content(웹페이지에 표시될 내용)
test.textContent = "spring";
// 해당 태그에 클래스 추가
test.classList.add('tweet');
// html 내에서 해당 태그 삭제
test.remove();
** querySelectorAll 반환 결과는 어떤 타입일까
NodeList(4) [div.tweet, div.tweet, div.tweet, div.tweet]
- 0: div.tweet
- 1: div.tweet
- 2: div.tweet
- 3: div.tweet
- length: 4
- [[Prototype]]: NodeList
* 유사배열 : 배열과 유사하게 관리할 수 있음 length, 인덱스로 접근해서 수정 가능
* 만약 일치하는 항목이 없다면 빈 배열을 반환
// document 내의 클래스가 note, alert인 모든 div element 목록을 반환
const matches = document.querySelectorAll("div.note, div.alert");
// id가 test인 컨테이너 안에 위치하고
// 부모 엘리먼트가 div.highlighted인 <p> 엘리먼트의 목록을 반환
const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");* 중첩 시 주의사항 다시 읽고 정리할 것!
onclick 방식
이벤트 핸들러 함수
키 업 트리거
* 키 업(키보드의 키를 눌렀다 뗄 때)
* 이벤트 발생 시 함수 자체를 저장한 변수를 활용
* e.target.value 는 이벤트 객체로 들어온 값
* classList를 활용해 클래스 속성을 더하거나 없애며 CSS (display: none)를 사용해
화면에서 특정 요소를 보이지 않게 할 수 있음
elUserName.onkeyup = eventKeyUp;
function eventKeyUp(e) {
let currentValue = e.target.value;
// 4글자 이상 이하 분기 필요
if(checkStringLength(currentValue)) {
// 4개 이상일 때
elFailureMessage.classList.add('hide');
elSuccessMessage.classList.remove('hide');
} else {
// 4개 이하일 때
elFailureMessage.classList.remove('hide');
elSuccessMessage.classList.add('hide');
}
}
* 특수문자 포함 여부는 반복문을 사용하거나 정규표현식을 활용할 수 있음
*** 조건이 복잡한 경우 주석으로 분기점을 정리해보면서 놓치는 케이스가 없도록 한다
