WebAPI 정리

2020.05.29

웹 사이트 만들 때 사용되는 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값임.
© Copyright 2020 marveloper All rights reserved.