DOM
웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델
HTML인 웹페이지와 스크립트언어를 서로 잇는 역할이다.
Document
전역객체. HTML 문서
- innerHTML 요소의 content에 접근하고 수정할 수 있다.
- createElement 요소를 생성한다.
- className 요소에 class 이름을 넣어준다.
- appendChild 요소 내부에 추가한다.
function addPTag() {
const Ptag = document.createElement('p');
const h1 = document.querySelector('h1');
Ptag.className = "dom";
Ptag.innerHTML = "DOM";
h1.appendChild(Ptag);
}
addPTag();- querySelector id, class, tag와 같은 css selcetor에 접근하고 수정할 수 있다.
JavaScript에서 style을 수정할 때 (-)은 사용할 수 없다.
가장 첫번 째 요소에 접근한다.
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';- getElementsByClassName('classname') classname이라는 클래스 이름이 있는 요소를 배열로 가져온다.
index를 부여하여 원하는 요소를 pick 한다.
- getElementById ID 이름을 가진 요소를 가져온다.
Event
- addEventListener 이벤트가 발생하면 함수를 실행한다.
element.addEventListener(click, function({
//click 발생 시 실행할 내용
})`이벤트의 종류
- Click 버튼, 사진, 글 등의 요소마다 클릭 이벤트를 달아서 각자 클릭이벤트에 맞는 reaction을 실행한다.
- Key keydown 키보드를 눌렀을 때 / keyup 키보드를 누르고 떼는 순간 / keypress 키보드를 눌러 어떤 텍스트가 작성되는 순간 실행한다.
-> keyCode 키보드가 가지고 있는 고유한 code. ex) Enter키의 key code = 13
로그인 화면 구현하기
로그인 버튼을 클릭했을 때
- 비밀번호와 비밀번호 확인에 입력한 문자열이 동일할 경우 로그인 성공!
- 비밀번호와 비밀번호 확인에 입력한 문자열이 동일하지 않을 경우 '비밀번호가 일치하지 않습니다'
- Input의 value값은 입력받은 값을 의미한다.
-> Input이 일어난 후의 value값을 가져오기 위해 이벤트 발생 후 변수를 지정했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="login-container">
<input type="password" id="password" placeholder="비밀번호" />
<input type="password" id="re-password" placeholder="비밀번호 확인" />
<button class="login-btn">로그인</button>
<p class="alert"></p>
<p>key code: <span id="code"></span></p>
</div>
<script src="index.js"></script>
</body>const thisIsButton = document.getElementsByClassName('login-btn')[0];
thisIsButton.addEventListener('click', function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;
if (!password) {
alert('비밀번호를 입력해주세요!');
return;
}
if (!rePassword) {
alert('비밀번호 확인을 입력해주세요!');
return;
}
if (password !== rePassword) {
alert('비밀번호가 일치하지 않습니다');
return;
}
alert('로그인 성공!');
});
const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');
thisIsPw.addEventListener('keyup', function(event) {
thisIsCode.innerHTML = event.keyCode;
});
Reference
그때그때 공부한 내용과 생각을 기록하는 블로그입니다.