📒Javascript DOM #02 :)

1. DOM 조작

🔵 Element.prototype.innerHTML

• setter, getter모두 존재하는 접근자 프로퍼티로서 요소 노드의 HTML마크업을 취득하거나 변경함.
• 요소 노드의 콘텐츠 영역 내에 포함된 모든 HTML마크업을 문자열로 반환함!!!
• 할당 시 요소 노드의 모든 자식 노드가 제거되고 HTML마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영!!!

👾 #1

• hyml

<ul id="fruits">
  <li class="apple">Apple</li>
</ul>

• js

const $fruits = document.getElmentById('fruits');
$fruits.innerHTML += '<li class="banana">Banana</li>';

👉🏻 자식 요소를 모두 제거 후 apple, banana를 추가함!
👉🏻 자식 노드까지 모두 제거하고 새롭게 자식 노드를 생성하여 DOM에 반영하기 때문에 효율적이지 않음!!!
👉🏻 삽입할 위치를 지정하지 못함~!

🔵 Element.prototype.insertAdjacentHTML(position, DOMString)

• 기존 요소를 제거하지 않고 위치를 지정해 새로운 요소를 삽입함.

🔵 노드 생성과 추가

✏️ Document.prototype.createElement(tagName)

• 요소 노드를 생성하여 반환. 문자열을 인수로 전달
• 기존 DOM에 추가되지 않고 홀로 존재하는 상태임, 별도의 추가처리가 필요

✏️ Document.prototype.createTextNode(text)

• 텍스트 노드를 생성하여 반환. 문자열을 인수로 전달
• 기존 DOM에 추가되지 않고 홀로 존재하는 상태임, 별도의 추가처리가 필요

✏️ Node.prototype.appendChild(childNode)

• 메서드는 호출한 노드의 마지막 자식 노드로 추가함.
• 텍스트노드도 추가 가능.

🔵 Document.prototype.createDocumentFragment()

• 비어 있는 DocumentFragment 노드를 생성하여 반환한다.
• 불필요한 컨테이너 요소(div)를 생성하지 않고 효율적으로 복수의 노드들을 추가할 수 있음!

🔵 Node.prototype.insertBefore(newNode, childNode)

• 메서드는 첫번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입함!

🔵 Node.prototype.cloneNode([deep: true| false])

• 노드의 사본을 생성하여 반환
• true: 깊은복사, false: 얕은복사
• 생략시 얕은 복사이며, 얕은 복사는 텍스트노드를 복사하지 않음

🔵 Node.prototype.replaceChild(newChild, oldChild)

• 자신을 호출한 노드의 자식 노드를 다른 노드로 교체
• oldChild 매개변수에 인수로 전달한 노드는 replaceChild메서드를 호출한 노드의 자식 노드여야 함.
• oldChild는 DOM에서 삭제 됨.

🔵 Node.prototype.removeChild(child)

• 자식노드가 DOM에서 삭제됨.

2. 어트리뷰트

• HTML문서가 파싱될 때 어트리뷰트 노드로 변환된어 요소 노드와 연결됨.
• HTML 어트리뷰트 당 하나의 어트리뷰트 노드가 생성됨.
• 어트리뷰트의 참조는 유사배열 객체이자 이터러블인 NameNodeMap 객체에 담겨서 요소노드의 attributes 프로퍼티에 저장됨.
• 요소의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득할 수 있음.
• attributes 프로퍼티는 getter만 존재하는 읽기전용 접근자 프로퍼티임.

👾

• html

<input id="user" type="text" value="zooyaho">

• js

const {attributes} = document.getElementById('user');

console.log(attributes.id.value); // user

🔵 Element.prototype.getAttribute/setAttribute

• attributes 프로퍼티를 참조하지 않고 취득,변경 가능함.
• getAttribute(attributeName), setAttribute(attributeName, attributeValue)

🔵 attribute 존재 확인, 삭제

✏️ Element.prototype.hasAttribute(attributeName)

• attribute 존재 확인, 불린값 반환

✏️ Element.prototype.removeAttribute(attributeName)

• attribute 삭제

3. data 어트리뷰트와 dataset 프로퍼티

• html 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있음.
• data어트리뷰트는 data- 접두사 다음에 임의의 이름을 붙여 사용.
• data 어트리뷰트 값은 HTMLElement.dataset 프로퍼티를 취득할 수 있으며, DOMStringMap객체를 반환.
• DOMStringMap객체는 data- 접두사 다음에 붙인 이름을 카멜케이스로 변환한 프로퍼티를 가지고 있음.

👾 #

• html

<ul class="users">
  <li id="1" data-user-id="1234" data-role="admin">Lee</li>
  <li id="2" data-user-id="0000" data-role="user">Park</li>
</ul>

• js

const users = [...document.querySelector('.users').children];
const user = users.find(user => user.dataset.userId === '1234');
console.log(user.dataset.role); // 'admin'

4. 스타일

🔵 HTMLElement.prototype.style

• setter/getter 모두 존재하는 접근자 프로퍼티, 인라인 스타일을 취득하거나 추가 또는 변경함.

🔵 클래스 조작

✏️ Element.prototype.className

• setter/getter 모두 존재하는 접근자 프로퍼티, 문자열로 반환
• 공백으로 구분된 여러 개의 클래스를 반환하는 경우 다루기 불편함.

✏️ Element.prototype.classList

• class 어트리뷰트의 정보를 담은 DOMTokenList객체를 반환
• DOMTokenList객체는 유사배열객체이면서 이터러블이며 다양한 메서드를 제공

1. add(...className): 추가
2. remove(...className): 삭제, 없으면 에러없이 무시됨.
3. item(index): 인수에 따른 클래스값을 반환.(문자열)
4. contains(className): 포함되어 있는지 확인, 불린값 반환
5. replace(oldName,newName): 전달한 문자열로 변환.
6. toggle(className[,force]): 인수로 전달한 문자열과 일치하는 클래스가 존재하면 제거하고, 없으면 추가함.

🔵 요소에 적용되어 있는 CSS 스타일 참조

• 클래스를 적용한 스타일이나 상속을 통해 암묵적으로 적용된 스타일은 style 프로퍼티를 참조할 수 없음.

✏️ window.getComputedStyle(elment[,pseudo])

• HTML요소에 적용되어 있는 모든 CSS 스타일을 참조할 수 있음.
• CSSStyleDecleration 객체에 담아 반환!

👾 #1

• html

<div class="box">Box</div>

• js

const $box = document.quetySelector('.box');
console.log(window.getComputedStyle($box));
// CSSStyleDecleration

console.log(window.getComputedStyle($box).width); // 100px