2024-06-21

2024-06-21 14:34:12 +09:00
parent ca239cf362
commit 342a843ce6
23 changed files with 2654 additions and 1 deletions
--- a/Writerside/topics/DocumentObjectModel.md
+++ b/Writerside/topics/DocumentObjectModel.md
@@ -0,0 +1,174 @@
+# 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>");
+```