# 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>");
```