DOM 활용

요소 이동과 선택

.children - element의 자식 요소 모음
.children[i] - 그 중 몇번째 자식인지 선택

.firstElementChild - element의 첫 번째 자식 요소 하나
.lastElementChild - element의 마지막 자식 요소 하나

.parentElement - element의 부모 요소 하나

.previousElementSibling - element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나
.nextElementSibling - element의 다음(next) 혹은 우측(right)에 있는 요소 하나

요소의 변경

.innerHTML - 요소 노드 내부의 HTML코드 문자열로 리턴(내용 수정할 때 유용)
.outerHTML - 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴 (예를 들어 a태그나 li 태그까지 나타남)
.textContent - 요소 노드 내부의 내용들 중에서 HTML을 제외하고 텍스트만 리턴 ( HTML 태그를 쓰면 그것까지 텍스트로 나타남)

요소 노드 다루기

요소 노드 만들기

document.createElement('태그이름') : 요소를 추가

요소 노드 꾸미기

element.textContent : 해당 노드가 가지고 있는 값 그대로 가져온다. ex) 연속된 공백도 그대로, display:none 요소도 그대로 가져온다.

element.innerHTML : HTML 전체내용을 가져온다. 안에 다른 태그가 있으면 그것도 가져옴

element.innerText : 보여지는 텍스트만 읽어옴, 공백은 연속으로 여러개있어도 하나만

요소 노드 추가, 삭제, 이동하기

element.prepend : 선택한 요소 내부의 맨 처음에 삽입

element.append : 선택한 요소 내부의 맨 마지막에 삽입

element.after : 선택한 요소 뒤에 삽입

element.before : 선택한 요소 앞에 삽입

element.remove() : 선택한 요소 제거

HTML 속성 다루기

element.getAttribute('속성') : 속성 값을 저장
ex) var abc = document.getElementById( 'aaa' ).getAttribute( 'title' )
id = aaa의 요소의 title 속성값을 abc에 저장

element.setAttribute('속성','값') : 속성 추가(수정)하기

element.removeAttribute('속성') : 속성 제거하기

style 다루기

1. style 사용

const today = document.querySelector('#today');

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

style.뒤에는 카멜 표기법을 사용

그러나 이렇게 사용하면 HTML에 직접 적용되기 때문에 추천하지 않는다.

2. classList 사용

class='done'

.done {
line-through;
}

today.children[0].classList.add('done')

• add : 추가
• close : 제거
• toggle : 없으면 추가 있으면 제거