노아 : 39.2.4 (CSS 선택자를 이용한 노드 취득) 부터 39.3 노드 탐색까지
kei : 39.4 (노드 정보 취득) 부터 39.6.4 까지
데브워니: 39.6.5 (노드 삽입) 부터 39.7.4 까지
널두 : 39.8 (스타일) 부터 40.2.8 까지
39.6 DOM 조작
5. 노드삽입
마지막 노드로 추가
지정한 위치에 노드 삽입
6. 노드 이동
7. 노드 복사
8. 노드 교체
9. 노드 삭제
39.7 어트리뷰트
1. 어트리뷰트 노드 & attribute 프로퍼티
2. HTML 어트리뷰트 조작
3. HTML 어트리뷰트 vs DOM 프로퍼티
4. data 어트리뷰트 & dataset 프로퍼티
39.6 DOM 조작
5. 노드삽입
마지막 노드로 추가
Node.prototype.appendChild 메서드를 사용하면
자신을 호출한 노드의 마지막 자식 노드로 DOM에 추가한다.
<!DOCTYPE html>
<html>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
</ul>
</body>
<script>
// 요소 노드 생성
const $li = document.createElement('li');
// 텍스트 노드를 $li 요소 노드의 마지막 자식 노드로 추가
$li.appendChild(document.createTextNode('Orange'));
// $li 요소 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
document.getElementById('fruits').appendChild($li);
</script>
</html>지정한 위치에 노드 삽입
Node.prototype.insertBefore(newNode, childNode) 메서드를 이용하여
첫번째 인수로 전달받은 노드를 두번째 인수로 전달받은 노드 앞에 삽입
<!DOCTYPE html>
<html>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
</ul>
</body>
<script>
const $fruits = document.getElementById('fruits');
// 요소 노드 생성
const $li = document.createElement('li');
// 텍스트 노드를 $li 요소 노드의 마지막 자식 노드로 추가
$li.appendChild(document.createTextNode('Orange'));
// $li 요소 노드를 #fruits 요소 노드의 마지막 자식 요소 앞에 삽입
$fruits.insertBefore($li, $fruits.lastElementChild);
// Apple - Orange - Banana
</script>
</html>
두 번째 인수로 전달받은 노드는 insertBefore를 호출한 노드의 자식이어야 한다.
그렇지 않은경우 DOMException 에러가 발생한다.
두 번째 인수가 null 이면 appendChild 메서드처럼 동작하여 마지막에 추가된다.
6. 노드 이동
이미 존재하는 노드를 appendChild 또는 insertBefore 메서드를 사용하여 DOM에 다시 추가 시, 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가한다. --> 노드 이동
7. 노드 복사
Node.prototype.cloneNode([deep: true | false]) 메서드는 노드의 사본을 생성하여 반환한다.
true --> 모든 자손 노드가 포함된 사본 생성(깊은 복사)
false --> 노드 자신만의 사본 생성(얕은 복사)
얕은 복사로 생성된 요소 노드는 자손 노드를 복사하지 않으므로 텍스트 노드가 없다.
8. 노드 교체
Node.prototype.replaceChild(newChild, oldChild) : 자신을 호출한 노드의 자식 노드를 다른 노드로 교체
const $fruits = document.getElementById('fruits');
// 기존 노드와 교체할 요소 노드를 생성
const $newChild = document.createElement('li');
$newChild.textContent = 'Banana';
// #fruits 요소 노드의 첫 번째 자식 요소 노드를 $newChild 요소 노드로 교체
$fruits.replaceChild($newChild, $fruits.firstElementChild);
9. 노드 삭제
Node.prototype.removeChild(Child) 메서드를 사용한다.
인수로 전달한 노드는 removeChild 메서드를 호출한 노드의 자식 노드이어야 한다.
const $fruits = document.getElementById('fruits');
// #fruits 요소 노드의 마지막 요소를 DOM에서 삭제
$fruits.removeChild($fruits.lastElementChild);
39.7 어트리뷰트
1. 어트리뷰트 노드 & attribute 프로퍼티
HTML 문서의 구성 요소인 HTML 요소는 여러 개의 어트리뷰트를 가질 수 있다.
HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는
HTML 요소의 시작 태그에
어트리뷰트 이름=어트리뷰트 값 형식으로 정의한다.
<input id="user" type="text" value="ungmo2">
글로벌 어트리뷰트(id, class, style, title, lang, tabindex, draggable, hidden 등)와
이벤트 핸들러 어트리뷰트(onclick, onchange, onfocus, onblur, oninput, onkeypress, onkeydown, onkeyup, onmouseover, onsubmit, onload 등)는
모든 HTML 요소에서 공통적으로 사용할 수 있지만
특정 HTML 요소에만 한정적으로 사용 가능한 어트리뷰트도 있다.
input 요소에만 사용 가능한 어트리뷰트 --> type, value, checked
HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트가 어트리뷰트 노드로 변환되어 요소 노드와 연결되며,
하나의 어트리뷰트 -> 하나의 어트리뷰트 노드가 생성된다.
모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장된다.
<!DOCTYPE html>
<html>
<body>
<input id="user" type="text" value="ungmo2">
<script>
// 요소 노드의 attribute 프로퍼티는 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체를 반환한다.
const { attributes } = document.getElementById('user');
console.log(attributes);
// NamedNodeMap {0: id, 1: type, 2: value, id: id, type: type, value: value, length: 3}
// 어트리뷰트 값 취득
console.log(attributes.id.value); // user
console.log(attributes.type.value); // text
console.log(attributes.value.value); // ungmo2
</script>
</body>
</html>
2. HTML 어트리뷰트 조작
Element.prototype.getAttribute
Element.prototype.setAttribute 메서드를 사용하여
요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있다.
어트리뷰트가 존재하는 지 확인 : Element.prototype.hasAttribute(attributeName)
특정 HTML 어트리뷰트 삭제 : Element.prototype.removeAttribute(attributeName)
3. HTML 어트리뷰트 vs DOM 프로퍼티
DOM 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고 있는데 DOM 프로퍼티는 setter와 getter 모두 존재하는 프로퍼티이기 때문에 참조와 변경이 가능하다.
HTML 어트리뷰트의 역할을 HTML 요소의 초기 상태를 지정하는 것이다. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않는다.
요소 노드는 상태를 가지고 있고 예를들어 Input 요소에 사용자가 값을 입력하면 처음 지정한 초기 상태와 최신 상태로 나누어져서 관리 된다.
즉, 요소 노드는 2개의 상태, 초기 상태와 최신 상태를 관리하며, 초기 상태는 어트리뷰트 노드가, 요소 노드의 최신 상태는 DOM 프로퍼티가 관리한다.
| 어트리뷰트 노드 | DOM 프로퍼티 |
| HTML 어트리뷰트로 지정한 HTML 요소의 초기 상태는 어트리뷰트 노드에서 관리한다. getAttribute 메서드로 취득한 값은 어트리뷰트 노드에서 관리하는 HTML 요소에 지정한 어트리뷰트 값, 즉 초기 상태의 값이다!(사용자에 의해 값이 변하지 않으므로 결과는 언제나 동일!) |
사용자가 입력한 최신 상태는 HTML 어트리뷰트에 대응하는 요소 노드의 DOM 프로퍼티가 관리한다. --> 사용자 입력에 의한 상태 변화에 반응하여 언제나 최신상태 유지 HTML 어트리뷰트는 초기값, DOM 프로퍼티는 최신 상태를 관리하지만 사용자 입력에 의한 상태 변화와 관련이 없는 id 어트리뷰트와 id 프로퍼티는 항상 동일한 값을 유지한다. --> id 프로퍼티와 id 어트리뷰트는 항상 동일한 값으로 연동되기 때문에 어느 한쪽이 바귀면 그 바뀐 값으로 다른 한쪽도 바뀌게 된다.
|
어트리뷰트 노드
DOM 프로퍼티
4. data 어트리뷰트 & dataset 프로퍼티
data 어트리뷰트와 dataset 프로퍼티를 사용하여 사용자 정의 어트리뷰트와 JS 간에 데이터 교환이 가능하다.
data- 접두사 다음에 임의이 이름을 붙여 사용하는데 그 값은 HTMLElement.dataset 프로퍼티로 취득이 가능하다.
--> DOMStringMap 객체 반환
이 객체는 data 어트리뷰트의 data- 뒤의 이름을 카멜 케이스로 변환한 프로퍼티를 가지고 있다.
data 접두사 다음에 존재하지 않는 이름을 키로 사용하여 dataset 프로퍼티에 값을 할당시, HTML 요소에 data 어트리뷰트가 추가된다. 카멜케이스 --> 케밥케이스로 자동 변경되어 추가!
'자바스크립트-스터디[2021-10-05~완료]' 카테고리의 다른 글
| 45장 프로미스 (0) | 2022.02.27 |
|---|---|
| 41장 타이머 (0) | 2022.02.19 |
| 38장 브라우저의 렌더링 과정 (0) | 2022.02.04 |
| 39장 DOM (0) | 2022.02.04 |
| 33장 Symbol (0) | 2022.01.21 |
