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을 쉽게 다루는 사람이 되어있기를 기도하며 글을 마칩니다.