✔️elem.getAttribute('속성')

: 속성에 접근하기. getAttribute 메소드를 활용하면 표준과 비표준 관계없이 HTML 문서에서
해당 태그에 추가된 모든 속성들에 접근할 수가 있다. class라는 문자열 그대로를 전달해줘야함.

console.log(item.getAttribute('class'));

✔️elem.setAttribute('속성', '값')

: 속성 추가(수정)하기. 파라미터 2가지!
기존에 없던 속성은 추가하고 이미 존재하는 속성엔 수정되는 형태로 동작함.

tomorrow.setAttribute('class', 'list'); // 추가
link.setAttribute('href', 'https://www.codeit.kr'); // 수정

✔️elem.removeAttribute('속성')

: 속성 제거하기. 파라미터에 문자열로 속성 이름을 전달하면 해당 속성을 제거할 수 있다.

tomorrow.removeAttribute('href'); 
tomorrow.removeAttribute('class'); 

속성에 접근하기: element.getAttribute('속성')
속성 추가(수정)하기: element.setAttribute('속성', '값')
속성 제거하기: element.removeAttribute('속성')

📢스타일 다루기

✍️자바스크립트로 HTML 태그의 클래스를 다루기는 크게 두가지(className/classList)가 있다.

✔️className(클래스 속성의 값을 통째로 바꿈) 프로퍼티 활용하기

: ❗className 프로퍼티로 값을 변경하게 되면 클래스 속성 값 전체가 바뀌게 된다.
상황에 따라서는 원래있던 클래스를 두고 새로운 클래스를 추가하고 싶을수도 있다. 그럴때 classList라는 프로퍼티를 활용한다.

✔️classList(클래스 속성을 하나씩 다룸) 프로퍼티 활용하기

: classList는 클래스 속성값을 유사배열로 다루는 프로퍼티. 클래스 속성을 하나씩 다룰 수 있는 것이다. 뿐만 아니라 클래스를 좀 더 편하게 다룰 수 있는 add,remove,toggle이라는 메소드도 활용할 수 있다.

✔️elem.classList(클래스 속성의 값을 부분적으로 수정)

: add(추가), remove(제거), toggle(있으면 제거 없으면 추가)

*done : line-decoration 값 적용된 효과

const item = tomorrow.children[1];
item.classList.add('done');//클래스를 추가.뮤지컬 공연 예매에 밑줄 그어짐.

item.classList.add('done','other');//여러개의 클래스를 넣고싶을때.
item.classList.add('done','other');
//똑같은 이름의 클래스를 중복해서 추가하더라도 코드를 실행해보면 결국 하나만 추가됨.

item.classList.remove('done');//클래스를 제거하는 메소드.
item.classList.remove('done','other');
//add와 마찬가지로 여러 개의 파라미터를 전달하게 되면 여러 개 클래스를 삭제할 수도 있다.


item.classList.toggle('done');//있으면 제거하고 없으면 추가하는 메소드.클래스를 하나만 다룸.

//add나 remove처럼 여러개의 파라미터를 전달한다고 해서 여러개의 클래스를 toggle하진않음.

//❗toggle의 두번째 파라미터에 따로 특별한 기능이 있기 때문임.

boolean 형태의 값을 전달받아서 만약 true를 전달하게 되면 add의 기능만 하고
item.classList.toggle('done','true');
false를 전달하면 remove 기능만 하도록 되어있음.
item.classList.toggle('done','false');//remove돼서 done 지워진거 확인.

today.children[0].style.textDecoration = 'line-through';
today.children[0].style.backgroundColor = '#DDDDDD';
today.children[2].style.textDecoration = 'line-through';
today.children[2].style.backgroundColor = '#DDDDDD';

//style 프로퍼티를 통해서 CSS 속성을 다룰 때 여러 단어를 이어서 만든 속성은
//카멜 표기법을 사용해야함(두번째 단어 첫글자는 대문자표기.ex_textDecoration)

⭐종합 정리⭐

1. window 객체

: window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다.
자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부른다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 window. 을 생략할 수도 있다.

2. DOM

: DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델이다. 간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 된다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.

3. DOM 트리

: HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 부른다. 각 노드 간의 관계는 부모,자식,형제라는 용어로 표현된다.

4. DOM 이동 시 활용 가능한 프로퍼티

5. 주요 요소 노드 프로퍼티

6. 요소 노드 다루기⭐⭐⭐

1. 요소 노드 만들기: document.createElement('태그이름')
2. 요소 노드 꾸미기: element.textContent, element.innerHTML, ...
3. 요소 노드 추가 혹은 이동하기: element.prepend, element.append, element.after,element.before
4. 요소 노드 삭제하기: element.remove()

7. HTML 속성 다루기

대부분의 HTML속성은 DOM 객체의 프로퍼티로 변환이 된다. 하지만 표준 속성이 아닌 경우에는 프로퍼티로 변환이 안되는데, 아래 메소드를 활용하면 표준이 아닌 HTML 속성들도 다룰 수 있다.

1. 속성에 접근하기: element.getAttribute('속성')
2. 속성 추가(수정)하기: element.setAttribute('속성','값')
3. 속성 제거하기: element.removeAttribute('속성')

8. 스타일 다루기

자바스크립트로 태그의 스타일을 다루는 방법에는 크게 두 가지가 있다.

1. style 프로퍼티 활용하기: element.style.styleName = 'value';
2. class 변경을 통해 간접적으로 스타일 적용하기: element.className,element.classList

8-1. classList의 유용한 메소드