[JS] DOM Script

data-XXX

data-XXX= html5 표준 커스텀 속성
data- 형식으로 시작하면 data-index, data-id, data-role 등 어떤 속성이든 필요에 따라 임의로 추가할 수 있음

<div class="characters">
    <div class="person1">A</div>
    <div class="person2">B</div>
    <div class="person3">C</div>
</div>

<script>
    const char = document.querySelector('.person1');

    char.setAttribute('data-id', "아이디 체크");
    char.getAttribute('data-id');

</script>

---

dataset 객체

data-XXX 형태의 속성 같은 경우, dataset을 통해 값에 쉽게 접근 가능

const char = document.querySelector('.person1');

char.setAttribute('data-id', "아이디 체크");
char.setAttribute('class', 'foo');
console.log(char.dataset);
// class 속성/값은 dataset에 없음

즉, 값을 읽어올 때도 편하게 dataset 객체의 속성에 접근해서 읽어오면 됨!

const char = document.querySelector('.person1');

char.setAttribute('data-id', "아이디 체크");

char.dataset.id = 888; //  ✨ 변경도 가능 ✨
char.dataset.title = "안녕!";

console.log(char.dataset);
console.log(char.dataset.title)

---

createElm

const pElm = document.createElement('p');

pElm.innerHTML = "<a href='#'>안녕</a>랄랄라";

---

classList (add, remove, toggle)

className과 비교

객체.className = ''; // 기존 클래스 아예 대체
객체.classList.add(''); // 해당 클래스 추가

객체.classList.remove(''); // 해당 클래스 삭제
객체.classList.toggle('special');

---

code

<script>     
    const charactersElm = document.querySelector('.characters');
    const pElm = document.createElement('p');
    const ilbuni = document.querySelector('.ilbuni');

    pElm.innerHTML = "<a href='#'>안녕</a>랄랄라";
    charactersElm.appendChild(pElm);
    ilbuni.classList.add('special');
    // ilbuni.className = 'special';

	// ilbuni.classList.remove('ilbuni');

    ilbuni.classList.toggle('special');
    ilbuni.classList.toggle('special');
</script>