property

Node 상대적 접근

children

[요소].children

• 요소의 자식 요소들을 객체(유사 배열 - HTMLCollection) 형태로 반환한다.

firstElementChild

[요소].firstElementChild

• 요소의 첫번째 자식 요소.
• 해당하는 요소가 없다면 null이다.

lastElementChild

[요소].lastElementChild

• 요소의 마지막 자식 요소.
• 해당하는 요소가 없다면 null이다.

parentElement

[요소].parentElement

• 요소의 부모 요소.
• 해당하는 요소가 없다면 null이다.

previousElementSibling

[요소].previousElementSibling

• 요소의 이전 형제 요소.
• 해당하는 요소가 없다면 null이다.

nextElementSibling

[요소].nextElementSibling

• 요소의 다음 형제 요소.
• 해당하는 요소가 없다면 null이다.

childNodes

[노드].childNodes

• 노드의 자식 노드들을 객체(유사 배열 - NodeList) 형태로 반환한다.

firstChild

[노드].firstChild

• 노드의 첫번째 자식 노드.

lastChild

[노드].lastChild

• 노드의 마지막 자식 노드.

parentNode

[노드].parentNode

• 노드의 부모 노드.

previousSibling

[노드].previousSibling

• 노드의 이전 형제 노드.

nextSibling

[노드].nextSibling

• 노드의 다음 형제 노드.

HTML 정보 접근

innerHTML

[요소].innerHTML

• 요소의 내부 HTML 코드.
• 문자열 형태이다.
• 할당을 이용하여 해당 요소 내부의 HTML 코드를 바꿀 수 있다.
• 들여쓰기와 줄바꿈 모두 들어온다.

outerHTML

[요소].outerHTML

• 해당 요소와 그 요소 내부의 HTML 코드.
• 문자열 형태이다.
• 할당을 이용하여 해당 요소의 HTML 코드를 바꿀 수 있다. (요소 자체가 바뀐다)
• 들여쓰기와 줄바꿈 모두 들어온다.

textContent

[요소].textContent

• 요소와 내부의 tag 부분은 제외(삭제)하고 text 부분만 가져온다.
• 문자열 형태이다.
• 할당을 이용하여 해당 요소 내부를 바꿀 수 있다. 다만 특수문자를 입력해도 문자 형태로 들어간다.
• 들여쓰기와 줄바꿈 모두 들어온다.

tagName

[요소].tagName

• 요소의 tag명을 대문자 문자열 형태로 가져온다.

클래스 관리

classList

[요소].classList

• 요소의 class 속성의 속성값(들)을 객체(유사 배열 - DOMTokenList) 형태로 반환한다.

add()

[요소].classList.add([class명])
[요소].classList.add([class명1], [class명2], ...)

• 이름이 [class명]인 class를 추가한다.
• 이미 존재한다면 무시한다.

remove()

[요소].classList.remove([class명])
[요소].classList.remove([class명1], [class명2], ...)

• 이름이 [class명]인 class를 삭제한다.
• 존재하지 않는다면 무시한다.

toggle()

[요소].classList.toggle([class명])
[요소].classList.toggle([class명], [Boolean])

• 이름이 [class명]인 class가 존재한다면 삭제, 존재하지 않는다면 추가한다.
• [Boolean] : true일 경우 추가(add) 기능만 할 수 있고, false일 경우 삭제(remove) 기능만 할 수 있다.

contains()

[요소].classList.contains([class명])

• 이름이 [class명]인 class의 존재 여부를 Boolean 형태로 반환한다.

input/select 값

value

[input/select 요소].value

• input, textarea 또는 select 요소에서의 값
• 문자열 형태이다.

---

method

Node (및 유사 배열) 가져오기

getElementById()

document.getElementById([id명])

• id명은 문자열이다.
• id명 id를 가진 요소(및 그 내부 요소들)를 선택하여 Element 형태로 반환한다.
• 해당하는 요소가 없다면 null을 반환한다.

getElementsByClassName()

document.getElementsByClassName([class명])

• class명은 문자열이다.
• class명 class를 가진 요소들(및 그 내부 요소들)을 선택하여 객체(유사 배열 - HTMLCollection) 형태로 반환한다.
• 해당하는 요소가 없다면 빈 HTMLCollection을 반환한다.

getElementsByTagName()

document.getElementsByTagName([tag명])

• tag명은 문자열이다.
• tag명 tag를 가진 요소들 및 그 내부 요소들을 선택하여 객체(유사 배열 - HTMLCollection) 형태로 반환한다.
• 해당하는 요소가 없다면 빈 HTMLCollection을 반환한다.
• * 선택자도 사용 가능하다.

querySelector()

document.querySelector([css선택자])
[부모요소].querySelector([css선택자])

• css선택자은 문자열이다.
• css선택자에 해당하는 첫번째 요소(및 그 내부 요소들)를 선택하여 반환한다.
• [부모요소]에 사용하는 경우 하위 요소에서만 찾아 선택한다.
• 해당하는 요소가 없다면 null을 반환한다.

querySelectorAll()

document.querySelectorAll([css선택자]);
[부모요소].querySelectorAll([css선택자]);

• css선택자은 문자열이다.
• css선택자에 해당하는 요소들(및 그 내부 요소들)을 모두 선택하여 객체(유사 배열 - NodeList) 형태로 반환한다.
• [부모요소]에 사용하는 경우 하위 요소에서만 찾아 선택한다.
• 해당하는 요소가 없다면 빈 NodeList를 반환한다.

closest()

[요소].closest([css선택자]);

• css선택자은 문자열이다.
• css선택자에 해당하는 상위 요소 및 자기 자신 중 가장 가까운 요소를 선택하여 반환한다.
• 해당하는 요소가 없다면 null을 반환한다.

Node 생성

createElement()

document.createElement([tag명])

• tag명을 태그로 하는 속성을 만들어 반환한다.
• tag명은 문자열로 넣어주어야 한다.

Node 삽입 & 위치 변경

prepend()

[요소].prepend([노드])
[요소].prepend([노드1], [노드2], ...)

• [요소]의 첫번째 자식 노드로 [노드]를 삽입한다.
• 반환값은 없다. (undefined)

append()

[요소].append([노드])
[요소].append([노드1], [노드2], ...)

• [요소]의 마지막 자식 노드로 [노드]를 삽입한다.
• 반환값은 없다. (undefined)

before()

[요소].before([노드])
[요소].before([노드1], [노드2], ...)

• [요소]의 앞쪽 형제 노드로 [노드]를 삽입한다.
• 반환값은 없다. (undefined)

after()

[요소].after([노드])
[요소].after([노드1], [노드2], ...)

• [요소]의 뒤쪽 형제 노드로 [노드]를 삽입한다.
• 반환값은 없다. (undefined)

appendChild

[노드].appendChild([자식노드])

• [노드]의 마지막 자식 노드로 [자식노드]를 삽입한다.

insertBefore

[노드].insertBefore([새로운노드], [기준점노드])

• [노드]의 자식 노드로 [기준점노드] 앞에 [새로운노드]를 삽입한다.
• [기준점노드]가 null일 경우 가장 뒤에 삽입된다.
• 추가된 자식([새로운노드])을 반환한다.

Node 삭제

remove()

[요소].remove()

• [요소]를 삭제한다.
• 반환값은 없다. (undefined)

removeChild()

[노드].remove([자식노드])

• [노드]의 자식 [자식노드]를 삭제한다.
• [자식노드]가 [노드]의 자식이 아니라면 오류가 발생한다.
• 삭제된 [자식노드]를 반환한다.

속성 접근

getAttribute()

[요소].getAttribute([속성명])

• [요소]의 [속성명]이라는 속성의 속성값을 반환한다.
• [속성명]은 문자열로 넣어주어야 한다. 대소문자는 구분하지 않는다.
• 모든 속성에 접근 가능하다.
• 해당하는 속성이 없다면 null을 반환한다.

속성 추가 & 수정

setAttribute()

[요소].setAttribute([속성명],[속성값])

• [요소]의 [속성명]이라는 속성의 속성값을 [속성값]으로 설정한다.
• [속성명]이라는 속성이 없을 경우 새로 만든다.
• [속성명]과 [속성값]은 문자열로 넣어주어야 한다. 대소문자는 구분하지 않는다.

속성 삭제

removeAttribute()

[요소].removeAttribute([속성명])

• [요소]의 [속성명]이라는 속성을 삭제한다.
• [속성명]은 문자열로 넣어주어야 한다. 대소문자는 구분하지 않는다.

event handler(listener) 추가

addEventListener()

[요소].addEventListener([이벤트 이름], [함수])
[요소].addEventListener([이벤트 이름], [함수], [Boolean])

• [요소]의 [이벤트 이름]이라는 event의 event handler로 [함수]를 추가한다.
• 되도록 이미 선언/표현된 함수를 [함수]에 쓰는 것이 권장된다.
• [Boolean] : capturing 단계에서도 event handler를 작동시킬 것인지 결정한다. 기본(default)값은 false이며, true일 경우 bubbling 단계 뿐만 아니라 capturing 단계에서도 handler가 작동한다.

event handler(listener) 삭제

removeEventListener()

[요소].removeEventListener([이벤트 이름], [함수])

• [요소]의 [이벤트 이름]이라는 event의 event handler에서 [함수]를 추가한다.
• 위의 addEventListener()로 추가한 event handler만 지울 수 있고, 완벽히 동일하지 않으면 삭제되지 않는다.
  • 익명 함수로 event handler를 넣은 경우 removeEventListener()로 삭제할 수 없다.