웹 사이트 만들 때 사용되는 WebAPI 정리
id로 접근
getElementById(elementID)
return Am Element Object
이름으로 접근
getElementsByTagName(tagname)
return A NodeList object
이름으로 접근
getElementsByClassName(className)
return A NodeList object
CSS기법으로 첫 번째 노드 선택
document.querySelector(CSS selectors)
return A Node object
CSS기법으로 전체 노드 선택
document.querySelectorAll(CSS selectors)
return A NodeList object
상위 노드에 접근
node.parentNode
return A Node object
상위 HTML 노드에 접근
node.parentElement
return An Element object
하위 노드에 접근
node.childNodes
return A nodeList object
하위 HTML 노드에 접근
element.chilren
return a live HTMLCollection object
하위 처음 노드에 접근
node.firstChild
reruen A Node object
하위 처음 HTML 노드에 접근
node.firstChild
return A node object
하위 마지막 노드에 접근
node.lastChild
return A Node object
하위 마지막 HTML 노드에 접근
node.lastElementChild
return A Node object
이전 노드에 접근
node.previousSibling
return A Node object
동일한 트리 수준에서 지정된 노드의 이전 노드를 반환.
이전 HTML 노드에 접근
node.previousElementSibling
return A Node object
다음 노드에 접근
node.nextSibling
Return Value : A Node object
다음 HTML 노드에 접근
nextElementSibling
return a Node object
노드의 태그 이름 속성
element.tagName
return A String
노드의 id 속성
element.id
return A String
노드의 클래스 이름 속성
element.className
return A String
노드의 속성 읽기
element.getAttribute(attributeName)
return A String
노드의 속성 변경
element.setAttribute(attributeName,attributeValue)
return no return value
노드의 속성 제거
element.removeAttribute(attributeName)
return no return value
노드의 속성이 있는지 점검
element.hasAttribute(attributeName)
return A Boolean
새로운 노드 생성
document.createElement(nodeName)
return An Element Object
노드에 생성된 새로운 노드 추가
node.appendChild(node)
return A Node Object
노드에 생성된 새로운 노드를 기준으로 노드 위치 이전 위치에 추가
node.insertBefore(newNode, existingNode)
return A Node object
노드 삭제
node.removeChild(node)
return A Node object
노드 복제
node.cloneNode(deep)
return A Node object
하위 노드가 있는지 점검
node.hacChildNodes()
return A boolean
노드 클래스
element.classList
return A DOMTokenList
- 클래스 이름을 DOMTokenList객체로 변환시킴.
- DOMTokenList는 DOM 속성을 구분짓는 하나의 리스트 형식
- 배열 모양의 객체이며 목록에 인덱스를 만들어 개별 속성을 가져올 수 있음.
노드 클래스 추가
element.classList.add(class1, class2, ...)
return No return value
노드 클래스 제거
element.classList.remove(class1, class2, ...)
return No return value
노드 클래스 여부
element.classList.contains(class)
return A boolean
노드 클래스 추가, 제거 토글
element.classList.toggle(class, true|false)
return A boolean
- 지정된 클래스가 있다면, 지정된 클래스를 요소에서 제거하고 false를 반환.
반대로 지정된 클래스가 없다면 추가하고ture를 반환.
- 선택적인 두 번째 매개변수는 클래스가 이미 존재하는지 여부에 관계없이 클래스를 추가하거나 제거하도록 하는 boolean값임.