6. DOM 조작
DOM manipulation : 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것
6-1. innerHTML
Element.prototype.innderHTML : 요소 노드의 HTML 마크업을 취득하거나 변경한다.
- 요소 노드 콘텐츠의 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환
📍참고📍 textContent는 HTML 마크업을 무시하고 텍스트만 반환
BUT! innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열 그대로를 반환 - 단점 :
① 크로스 사이트 스크립팅 공격 문제
② 고비용. 비효율 → 그대로 있어야 할 요소들까지 전부 삭제하고 다시 새로운 자식 노드를 생성해서 반영해야 하기 때문
③ 위치를 지정할 수 없다. - 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입해야 할 때는 🙅♀️
6-2. insertAdjacentHTML 메서드
Element.insertAdjacentHTML(position, text); : 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입
👉이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. 따라서 innerHTML보다 고효율이다!
- 'beforebegin' element 앞에
- 'afterbegin' element 안에 가장 첫번째 child
- 'beforeend' element 안에 가장 마지막 child
- 'afterend' element 뒤에
6-3. 노드의 생성과 추가
HTML을 파싱하여 노드를 생성하고 DOM에 반영하는 방법외에 직접 노드를 생성하고 추가하는 방법도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>노드생성과 추가</title>
</head>
<body>
<ul id="fruits">
<li>Apple</li>
</ul>
</body>
<script>
const $fruits = document.getElementById('fruits');
const $li = document.createElement('li');
const textnode = document.createTextNode('Banana');
$li.appendChild(textnode);
$fruits.appendChild($li);
</script>
</html> -
요소 노드 생성 Document.prototype.createElement(tagName) 텍스트 노드 생성 Document.prototype.createTextNode(text) 텍스트 노드를 요소 노드의 자식 노드로 추가 Node.prototype.appednChild(childNode) 요소 노드를 DOM에 추가 Node.prototype.appendChild 웹 문서의 요소 중에서 HTML요소를 표현하는 객체 HTMLElement HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement -
복수의 노드 생성하는 법 : 감싸주는 tag(div)를 활용하는 것이 좋다. 그래야 DOM이 한번만 변경되기 때문!
-
이 때 불필요한 div가 생겼을 것이다 → 이를 해결하기 위해 Document.Fragment 노드를 사용한다.
6-4. 노드 삽입 : Node.prototype.appendChild()
Node.prototype.appendChild() : 자신을 호출한 노드의 마지막 자식 노드로 DOM에 추가 / 추가할 위치 지정 불가, 언제나 마지막 자식 노드로 추가
✔ 지정한 위치에 노드 삽입 : Node.prototype.insertBefore(newNode, childNode)
- 첫 번째 인수(newNode)로 받은 노드를 두 번째 인수(childNode) 앞에 삽입
- 이 때 childNode는 반드시 insertBefore를 호출하는 대상 요소 노드의 자식 노드이어야 한다.
6-5. 노드 이동
이미 존재한 노드에 appendChild 또는 insertBefore 메서드 사용해서 DOM에 다시 추가하면 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가한다.
6-6. 노드 복사 : Node.prototype.cloneNode([deep: true | false])
6-7. 노드 교체 : Node.prototype.replaceChild(newChild, oldChild)
자신을 호출한 노드의 자식 노드를 다른 노드로 교체
첫 번째 매개변수 newChild : 교체될 새로운 인수 전달
두 번째 매개변수 oldChild : 이미 존재하는 교체될 노드
✔ 이 때 oldChild는 삭제된다.
6-8. 노드 삭제 : Node.prototype.removeChild(child)
child 매개변수에 인수로 전달한 노드를 DOM에서 삭제
- 인수로 전달한 노드는 removeChild 메서드를 호출한 노드의 자식 노드이어야 함
7. 어트리뷰트(Attribute)
💡 What is Attribute?
html 태그의 속성값을 부여하는 것
- global attribute : id, class, style, title, lang, tabindex, hidden 등
- event attribute : onclick, onchange, onfocus, onblur, oninput, onkeypress, onkeydown, onkeyup, onmouseover ...등
- 특정 태그에 한정적인 어트리뷰트도 있다. (ex. type, value checked)
Element.prototype.attributes : 요소 노드의 모든 어트리뷰트 노드를 요소 노드의 프로퍼티로 취할 수 있따. (읽기 전용)
요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NameNodeMap 객체를 반환한다.
7-1. HTML 어트리뷰트 조작
Element.prototype.getAttribute(attributeName), Element.prototype.setAttribute(attributeName, attributeValue)
attributes 프로퍼티를 통하지 않고 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득/변경 가능
값 참조 : getAttribute
값 변경 : setAttribute
존재 확인 : Element.prototype.hasAttribute(attributeName)
특정 html 어트리뷰트 삭제 : Element.prototype.removeAttribute(attributeName) 메서드 사용
8. 스타일
인라인 스타일 조작 : HTMLElement.prototype.style : 요소 노드의 인라인 스타일을 취득하거나 추가 or 변경함
- Element.prototype.className : HTML요소의 class 어트리뷰트 값을 취득, 변경
- Element.prototype.classList : class 어트리뷰트의 정보를 담은 DOMTokenList 객체를 반환함 (이 때 DOMTokenLisst : 유사 배열 객체, 이터러블)
✔ DOMTokenList 객체가 제공하는 메서드들
add()
토큰 목록에 항목을 추가한다.
contains()
인수로 지정된 토큰이 포함되어 있으면 true, 그렇지 않으면 fasle 값을 반환한다.
entries()
모든 키와 값을 한 세트를 갖는 반복자(Iterator) 객체를 반환한다.
forEach()
토큰 순서에 따라 각 토큰에 대해 인수로 지정된 콜백 함수를 한번 호출한다.
item()
인수로 지정된 인덱스의 토큰을 반환한다.
keys()
객체에 포함된 모든 토큰 리스트의 키를 갖는 Iterator(반복) 객체를 반환한다.
remove()
인수로 지정된 항목을 토큰에서 제거한다.
replace()
기존 토큰을 주어진 인수로 대체한다.
supports()
인수로 주어진 연관된 속성을 지원하는 토큰이 존재하는 경우에 true, 그렇지 않으면 false를 반환한다.
toggle()
인수로 지정된 항목이 기존 토큰 목록에 존재하면 제거, 존재하지 않으면 추가한다.
values()
객체에 포함된 모든 값을 조회할 수 있는 Iterator(반복자) 객체를 반환한다.
