1. JS에서 특정 Elem을 지정하기
자주 사용하는 방법은 크게 3가지가 있다.
ID로 찾기, Elem으로 찾기, querySelector을 사용하기
여기서 querySelector은 거의 만능인데, a 태그에서 특정 href를 가진 Elem을 반환받고 싶으면 아래처럼 사용해도 된다.
const Elem = document.querySelector(`[href="${id}"]`) // 클래스를 찾으려면 .classname 아이디를 찾으려면 #idname 처럼 . # 을 붙여주면 된다.
//아무것도 붙이지 않으면 tagName을 찾는데, 가장 큰 예시로 body를 넣어 사용해보자다만 단점은 CSR은 사용자의 성능에 따라 영향을 받아서 잘 사용하지 않는 방법인데, querySelector은 HTML을 거의 다 뒤져보기 때문에 성능을 다른 방법에 비해 굉장히 많이 잡아먹는다.
<div id="idName">나는 아이디다!</div>
<div class="className">나는 클래스 1이다!</div>
<div class="className">나는 클래스 2이다!</div>const idElem = document.getElementById("idName"); // 기본적으로 하나의 Elem을 반환한다.
const classElem = document.getElementsByClassName("className"); // 기본적으로 배열을 반환한다.2. 데이터 다루기
2-1. data-set
HTML에서 data-set으로 데이터를 data-name으로 설정했다면, 해당 Elem에서 elem.dataset.name으로 접근할 수 있을것이다.
그런데, data-set을 부모가 가지고 있다면?
const dataElem = elem.closest("[data-name]"); //으로 data-set을 가진 부모 Elem 반환받을 수 있다.
const nameValue = dataElem.getAttribute("data-projectid"); //또는 dataElem.dataset.name;2-2. append와 prepend
elem.append(element) //elem의 맨 아래에 넣어준다.
element.prepend(element) //elem의 맨 위에 넣어준다.2-3. CSR
2가지 방법이 있다.
첫번째, HTML문법을 str으로 작성해서 elem.innerHTML = str 로 때려박거나
두번째, document.createElement("div")를 사용해 위에서 설명한 append와 prepend로 elem들을 넣어주는 방법이다.
뭘 쓰든 괜찮다.
다만 str로 작성한 Elem은 한줄로 해주지 않으면 가끔 오류를 일으키니 그다지 추천하지 않는다.
크게 만들수록 코드 가독성도 떨어지고 좀 그렇지만, 짧은 코드의 경우 시간 줄이기로 값을 때려박는 용도로 가끔 사용한다.
2-4. setAttribute
js에서 <div></div> 라는 Elem을 js로 <div id="freeName"></div>로 바꾸고 싶다면 사용한다.js에서 createElem로 div Elem을 생성했다고 하자, 그런데 id랑 class 등을 다루는 코드는 기본적으로 지원하지만, 가끔 지원하지 않는 데이터를 Elem에 넣어줘야 할 때가 온다.
그때 사용하는게 바로 setAttribute다.
elem.setAttribute("id", "freeName");실행하면 비어있던 div에 id="freeName"이 추가된다. 어떻게 추가하든 자유이며, 만약 이미 값이 있다면 수정한다.