DOM(Document Object Model) ,이벤트 객체

DOM에서는 이전에 보지 못한 새로운 문법들이 너무 많이 나와 외울게 많지만, 여기서 배우는 것들은 기본적으로 많이 쓰일 것 같다 다 외워야겠다.

DOM

DOM은 자바스크립트로 HTML을 제어하는 것을 의미한다. DOM은 트리 구조이다.

DOM 조회 console.dir() 을 이용해 해당 변수에 밑이 있는 자식 요소들을 찾을 수 있다.

const newDiv = document.createElement('div');	//<div></div>만들기

document.body.append(newDiv);					//body태그 자식요소의 마지막 요소로 넣기
container.append(newDiv);						//아이디가 container인 요소의 자식 요소에 넣기

const oneNew = document.querySelector('.tweet')	//tweet 이라는 클라스를 가진 요소를 자바스크립트 변수에 저장
const tweets = document.querySelectorAll('.tweet')	//tweet 이라는 클라스를 가진 모든 요소를 자바스크립트 유사배열(Array-like object)에 저장

oneDiv.textContent = 'dev';			//oneDiv 요소에 문자열 'dev'넣기 <div>dev</div>
oneDiv.classList.add('tweet')		//oneDiv의 클라스로 'tweet' 넣기 <div class="tweet">dev</div>

oneDiv.classList.remove('tweet') 	//oneDiv의 클라스 'tweet' 지우기<div>dev</div>
oneDiv.remove()						//oneDiv 지우기

그다음으로 아이디와 비밀번호의 유효성을 검사하는 코드를 만들었다.

유효성 검사

let idText = document.querySelector("#username");
let realPassWord = document.querySelector("#password");
let testPassWord = document.querySelector("#password-retype");
let successM = document.querySelector(".success-message");
let failureM = document.querySelector(".failure-message");
let passwordMiss = document.querySelector(".mismatch-message");

idText.onkeyup = function(){
  if(isMoreThan4Length(idText.value)){
    successM.classList.remove("hide");
    failureM.classList.add("hide");
  }else {
    successM.classList.add("hide");
    failureM.classList.remove("hide");
  }
}

testPassWord.onkeyup = function(){
  if(isMatch(realPassWord.value,testPassWord.value)){
    passwordMiss.classList.add("hide");
  }else {
    passwordMiss.classList.remove("hide");
  }
}
function isMoreThan4Length(value) {
  return value.length >= 4
}

function isMatch (password1, password2) {
  return password1 === password2
}

결국 DOM으로 배운 코드들을 거의 다 쓴 것 같다. 기본적으로 어떻게 쓰는지 외우고 까먹을 때마다 이 글을 보며 상기 시키면 될 것 같다.

이벤트 객체

클릭을 했을 때의 버튼 값을 이용하는 방법을 사용한다.

let 변수.onclick = function(event){
	console.log(event);		//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0…}
	console.log(event.target);	//<button>태그안의 문자열</button>
    console.log(event.target.textContent);		//태그안의 문자열
    console.log(this.textContent);		//태그안의 문자열
}

여기서 알 수 있는 것은 this 가 event.target과 동일한 값을 출력하므로 같다고 할 수 있다. this가 변수의 값을 의미하는 건가? 잘 모르겠다..