23 | JS replit - DOM, Event
DOM(Document Object Model)
DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체모델이며, DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는다. JavaScript는 이 모델로 웹 페이지에 접근하고 페이지를 수정할 수 있다. document 객체로 요소나 요소의 속성에도 접근할 수 있다. 특정 element에 접근하고 싶을 때 tag, class, id와 같은 css selector로 접근하면 된다.
//`innerHTML`을 사용하면 태그 내 내용이 전부 교체된다
document.body.innerHTML = '내용 다 바꿈';
//class명으로 접근하기 1
let blueElement = document.querySelector('.blue');
// 2 : class는 여러번 사용이 가능하기 때문에 몇 번째의 요소를 가져올 것인지도 지정한다. 지정을 하지 않으면 배열로 반환된다.
let blueElement = document.getElementsByClassName('blue')[0];
//요소의 속성을 수정하기
blueElement.style.backgroundColor = 'blue';
//javascript에서 수정할 때 하이픈은 사용할 수 없다. camelClass로 바꿔 표현한다.
//요소를 생성할 수도 있다. (p 요소 생성)
let p = document.createElement('p');
//class를 지정한다.
p.className = "paragraph";
//위치를 정해준다. appendChild함수는 요소의 뒤쪽에 붙이는 역할을 한다.
//먼저 어떤 태그 뒤에 새로운 요소를 붙일지 생각한 뒤 앞으로 갈 요소를 불러온다.
let h1 = document.querySelector('h1');
//h1뒤에 p를 붙인다
h1.appendChild(p);
Event
기본적인 내용은 아래에 정리해두었다.
https://velog.io/@dabin0219/TIL-13-event-%EC%A2%85%EB%A5%98%EC%99%80-eventListener
event 함수를 추가하고 싶으면, DOM을 사용한다.
const thisIsButton = document.getElementsByClassName('login-btn')[0];
thisIsButton.addEventListener('click', function() {
alert('로그인!')
});
키보드 이벤트
- 키보드를 눌렀을 때 발생하는 keydown
- 키보드를 누르고 떼는 순간 발생하는 keyup
- 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress
[문제]
input#re-password
에keyup
이벤트를 추가해주세요.input#password
와input#re-password
의value
속성을 통해 input에 작성된 값을 가져오고,- 서로 같은지 아닌지 확인해서 같지 않다면
<p>
태그의.alert
클래스에"비밀번호가 일치하지 않습니다"
라는 문구를 넣어주세요.- 서로 비밀번호가 같다면
""
빈 문구를 넣어주시면 됩니다.
[풀이]
const thisIsRpw = document.getElementById('re-password');
thisIsRpw.addEventListener('keyup', function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;
if(password === rePassword) {
document.querySelector('.alert').innerHTML = " ";
} else {
document.querySelector('.alert').innerHTML = "비밀번호가 일치하지 않습니 다";
}
});
[과제]
//dom에서 불러오기
const thisIsParagraph = document.getElementsByClassName('big-paragraph')[0];
//p를 파란색으로 수정
thisIsParagraph.style.color = "blue";
//p클릭시 alert
thisIsparagraph.addEventListener('click', function() {
alert("내용을 클릭했군요!")
});
Author And Source
이 문제에 관하여(23 | JS replit - DOM, Event), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dabin0219/TIL-23-JS-replit-array-methods-DOM-Event저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)