2.4 KiB
DOM
-
documentElement
<html> 요소를 반환
-
head
<head> 요소를 반환
-
body
<body> 요소를 반환
만일, <head>에 포함된 스크립트에서 body를 호출한다면 body는 null이 되므로 주의해야 합니다.
-
getElementById()
-
getElementsByClassName()
-
getElementsByTagName()
-
querySelector()
-
querySelctorAll()
-
anchors
-
characterSet
-
docType
-
documentURI
-
embeds
-
fonts
-
forms
-
images
-
links
-
childElementCount
-
children
-
firstElementChild
-
lastElementChild
-
title
-
referrer
-
URL
-
location
-
createElement()
-
createTextNode()
-
createAttribute()
-
append()
-
prepend()
Node
-
childNodes
-
firstChild
-
lastChild
-
nextSibling
-
previousSibling
-
parentNode
-
parentElement
-
nodeType
-
nodeValue
-
textContent
-
appendChild()
-
insertBefore()
-
cloneNode()
-
removeChild()
-
replaceChild()
-
contains()
-
hasChildNodes()
Element
-
id
-
tagName
-
attributes
-
innerHTML
-
outerHTML
-
classList
-
className
-
clientWidth, clientHeight
-
clientTop, clientLeft
-
scrollWidth, scrollHeight
-
scrollTop, scrollLeft
-
addEventListener()
-
removeEventListener()
-
getAttribute()
-
getAttributeNames()
-
setAttribute()
-
hasAttribute()
-
removeAttribute()
-
getElementById()
-
getElementsByClassName()
-
getElementsByTagName()
-
querySelector()
-
querySelectorAll()
-
insertAdjacentElement()
-
insertAdjacentHTML()
- beforebegin
- afterbegin
- beforeend
- afterend
el.insertAdjacentHTML("beforeend", "<p>Hello~</p>"); -
insertAdjacentText()
-
remove()
-
requestFullScreen()
-
scroll()
-
scrollBy()
-
scrollIntoView()
-
scrollTo()
클래스
let classes = document.querySelector('div').classList;
classes.add("myclass", "myclass-2");
classes.remove("myclass-2");
classes.replace("myclass", "myclass-1");
classes.toggle("hidden");
스타일
let el = document.querySelector('p');
el.style.color = "red";
속성
let el = document.querySelector('a');
el.getAttribute("href");
el.setAttribute("href", "...");
el.removeAttribute("href");
자식 요소 추가
let el = document.querySelector('div');
let p = document.createElement("p");
let text = document.createTextNode("Hello");
p.appendChild(text);
el.appendChild(p);
el.innerHTML = "<p>Hello~</p>";
el.insertAdjacentHTML("beforeend", "<p>Hello~</p>");