174 lines
2.4 KiB
Markdown
174 lines
2.4 KiB
Markdown
# 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
|
|
|
|
```javascript
|
|
el.insertAdjacentHTML("beforeend", "<p>Hello~</p>");
|
|
```
|
|
|
|
- insertAdjacentText()
|
|
|
|
- remove()
|
|
|
|
|
|
- requestFullScreen()
|
|
- scroll()
|
|
- scrollBy()
|
|
- scrollIntoView()
|
|
- scrollTo()
|
|
|
|
## 클래스
|
|
|
|
```javascript
|
|
let classes = document.querySelector('div').classList;
|
|
classes.add("myclass", "myclass-2");
|
|
classes.remove("myclass-2");
|
|
classes.replace("myclass", "myclass-1");
|
|
classes.toggle("hidden");
|
|
```
|
|
|
|
## 스타일
|
|
|
|
```javascript
|
|
let el = document.querySelector('p');
|
|
el.style.color = "red";
|
|
```
|
|
|
|
## 속성
|
|
|
|
```javascript
|
|
let el = document.querySelector('a');
|
|
el.getAttribute("href");
|
|
el.setAttribute("href", "...");
|
|
el.removeAttribute("href");
|
|
```
|
|
|
|
## 자식 요소 추가
|
|
|
|
```javascript
|
|
let el = document.querySelector('div');
|
|
|
|
let p = document.createElement("p");
|
|
let text = document.createTextNode("Hello");
|
|
p.appendChild(text);
|
|
|
|
el.appendChild(p);
|
|
```
|
|
|
|
```javascript
|
|
el.innerHTML = "<p>Hello~</p>";
|
|
el.insertAdjacentHTML("beforeend", "<p>Hello~</p>");
|
|
``` |