DOM을 다루는 실전적인 방법
😎 addEventListner의 사용법
addEventListener(type, listener, options)
MDN에 따르면 이벤트리스너는 이런식으로 사용합니다.
이벤트의 타입을 첫인자로 주고 콜백함수를 두번째 인자로 주는거죠!
근데 제가 항상 귀찮았던 부분은 저 type값을 모른다는겁니다.
type값은 문자열 형태로 전달해야하고 소문자로 이루어져있습니다.
| 'click' | 요소에 마우스를 클릭했을 경우 |
| 'dbclick' | 요소에 마우스를 더블 클릭 |
| 'mouseover' | 요소 위로 마우스를 움직였을 때 |
| 'mouseout' | 요소 바깥으로 마우스를 움직였을때 |
| 'mousedown' | 마우스를 누르고있을 때 |
| 'mouseup' | 눌렀던 마우스 버튼을 뗄 때 |
| 'contextmenu' | 마우스 오른쪽버튼 눌렀을때 |
| 'keydown' | 키를 처음 누른 상태 |
| 'keyup' | 키를 뗀 상태 |
| 'keypress' | 키를 누른 상태에서 |
| 'scroll' | 페이지를 스크롤할 때 |
| 'submit' | 사용자가 버튼키를 이용해 form을 제출할 때 발생합니다. |
| 'focus' | 요소가 포커스를 얻었을 때 |
| 'blur' | 포커스를 잃었을 때 |
😎form 태그의 속성
form 태그는 다양한 속성이 있습니다.
name = 폼을 식별하기 위한 이름 지정
method = 서버에 전송하는 http 메소드 (GET , POST)
action = 폼을 전송할 서버 쪽 스크립트 파일 지정
accept-charset = 폼 전송에 사용할 문자 인코딩 지정
각 속성의 값은 문자열 "" 형태로 할당해줘야합니다.
😎input 태그의 속성
input 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줘요
name : 인풋 태그의 이름을 지정해줍니다.
type : text, radio ,checkbox, password, button, hidden, submit 등등을 지정 가능함
readonly : 태그를 읽기전용으로 만들어줍니다.
maxlength : 최대 글자 수를 지정합니다.
required : 필수태그로 지정합니다.
autofocus : 페이지가 로딩 되자마자 이 속성을 지정한 태그로 포커스가 이동합니다.
placeholder : 태그에 입력할 값에 대한 힌트를 줍니다.
pattern : 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용합니다.
😎button 태그의 속성
button 태그는 속성값으로 button, submit, reset을 가질 수 있습니다.
name : 버튼 태그의 이름을 지정해줍니다.
type : button, submit, reset
value : 버튼의 초깃값
엥 근데 input도 버튼으로 만들 수 있는데 button 태그는 뭐하러 있음?
인풋태그의 밸류 특성은 텍스트값밖에 지정할 수 없지만
버튼태그는 html 콘텐츠, ::after, ::before 같은 것도 전달 가능함
따라서 양식 제출용 버튼이 아니라면 button 태그를 쓰는게 좋을듯
<form action="" method="get" name="login">
<input type="text" name="result" placeholder="0" readonly />
<button type="submit">제출버튼</button>
</form>코드는 이런형식으로 작성해봤습니다.
form을 쿼리셀렉해두고 submit 이벤트가 발생할 때 이벤트리스너를 실행시켜주면
submit이벤트에 맞춰 함수를 실행할 수 있겠네요
😎document.creatElement('')
새로운 요소를 만듭니다. 보통 변수에 할당해두고
.append() 태그를 이용해 부모 노드에 포함해주는 식으로 사용합니다.
이건 노마드코더 클론코딩할 때 써본게 새록새록 기억이 나네요
function onClick(event) {
console.log(event);
const num = event.target.value;
alert(num);
let div = document.createElement("div");
div.textContent = "컨텐츠 내용!";
cal.append(div);
}div 변수안에 createElement를 통해 생성한 노드를 할당해주고
textContent에 컨텐츠 내용을 넣어준뒤
cal을 부모요소로 하도록 할당해줬습니다.
대충 div요소들이 잘 생겨나고 있는 것 같네요
근데 이럴수도 있잖아요? 우리가 그냥 html요소를 만드는게 아니라
클래스를 지닌 요소를 만들고 싶은거라면?
챗지피티님의 추천은 다음과 같네요
className , id에 값을 할당해주는 방법과
createAttribute()메서드를 이용해서 속성을 만들어준 뒤
setAttributeNode를 통해 원하는 요소에 클래스와 아이디를 할당시켜주는 방법이군요
굉장히 번거로운 아래 작업보다는 위쪽 작업이 좀 더 끌리네요
oneDiv.classList.add('tweet')classList.add()를 이용해서도 가능합니다.
classList는 읽기전용 속성으로 css 클래스의 현재 값을 반환해줍니다.
하나만 할당할땐 className에 할당해도 무방하겠지만
여러개의 클래스를 할당해줘야한다면 classList에 하나하나 add해주는 방법이 더 좋겠네요
div.classList.remove('')를 통해 삭제도 가능합니다.
각각의 클래스 이름을 개별적으로 사용할 수 있는 classList가 더 유용하다네요
div.classList.toggle('visible');토글 메서드도 존재합니다. 이 토글메서드는
인자가 클래스리스트에 존재하면 그 클래스를 지우고
클래스리스트에 인자가 존재하지 않는다면 그 클래스를 추가해주는 메서드입니다.
굉장히 편리해보이네용
😎querySelector는 어떻게 써야해?
querySelector는 아주 편리합니다. 하지만 간혹 사용법이 헷갈려요
'.classname'과 같이 .을 넣고 검색하면 클래스 이름을 검색합니다.
아이디를 검색하고 싶은 경우에는
'#idname'과 같이 #을 붙여주고 검색합니다.
querySelectorAll은 유사배열객체를 반환하는군용
'.parent > .child1'
이런식으로 css에서 사용하는 직속자식 찾기 같은 것도 사용할 수 있군요
😎구조적 가상 선택자
챗지피티님한테 여쭈어봤습니다.
first-child ,last-child 이런 것들도 쿼리셀렉터에 사용할 수 있겠네요!
😎로컬스토리지를 사용하는건 어떨까?
로컬스토리지는 투두리스트를 구현할 때 잠깐 사용해봤는데
그때 사용 목표는 새로고침해도 투두리스트가 초기화되지 않는 것이었습니다.
브라우저환경에 값을 저장해두고 그걸 꺼내쓰는거죠!
localStorage.setItem("myData", "Hello World!");LocalStorage에 데이터를 저장하려면 localStorage.setItem() 메서드를 사용합니다.
이 메서드는 두 개의 인수를 받으며,
첫 번째 인수는 저장할 데이터의 키, 두 번째 인수는 저장할 데이터의 값입니다.
예를 들어, 다음과 같은 코드를 사용하여 "myData"라는 키와 "Hello World!"라는
값을 LocalStorage에 저장할 수 있습니다.
setItem()메서드를 이용해서 데이터를 저장할 수 있군요
첫번째 인자는 키 두번째 인자는 밸류값
그런데 약간의 문제가 있으니 로컬스토리지에는 문자열만 밸류로 들어갈 수 있습니다.
그렇기 때문에 배열,객체같은건 stringfy를 통해 문자열화해줘야했었던 기억이 나네요
const myData = localStorage.getItem("myData");
console.log(myData); // "Hello World!"반대로 데이터를 가져올 때에는 getItem메서드를 사용하는군요
이 메서드는 하나의 인수를 받으며, 인수는 가져올 데이터의 키입니다. 예를 들어, 다음과 같은 코드를 사용하여 "myData"라는 키에서 데이터를 가져올 수 있습니다.
이제 미래의 나는 좀 더 DOM을 쉽게 다루는 사람이 되어있기를 기도하며 글을 마칩니다.