I. 요소의 내용 확인 및 수정
const $carrot = document
.querySelector('section > ul > li');
1. textContent - Node의 기능
- 텍스트에 관한 접근자 프로퍼티
🔗 innerText대신 쓰는 이유 - 아래 문서 참조- 👉 MDN 문서 보기
$carrot.textContent
$carrot.textContent = '제주당근';
2. nodeValue - Node의 기능
- 텍스트 노드 전용 접근자 프로퍼티 - 다른 노드에서는 null 반환
- 👉 MDN 문서 보기
$carrot.firstChild.nodeValue;
$carrot.firstChild.nodeValue = '친환경유전자조작당근';
3. className - Element의 기능
- 클래스에 관한 접근자 프로퍼티 - 문자열로 다룸
- 👉 MDN 문서 보기
const $onion = document
.querySelector('section ul')
.lastElementChild;
$onion.className;
$onion.className = '';
$onion.className = 'soldout organic';
4. classList - Element의 기능
- 클래스에 관한 읽기 전용 프로퍼티
🔗 DOMTokenList반환 - 유사배열객체 & 이터러블- 👉 MDN 문서 보기
$onion.classList;
// 💡 이터러블
[...$onion.classList];
$onion.classList.remove('organic');
$onion.classList.add('hidden');
// 반복실행해 볼 것
$onion.classList.toggle('hidden');
$onion.classList.replace('hidden', 'organic');
5. style - HTMLElement의 기능
- 스타일에 관한 읽기 전용 접근자 프로퍼티
- 👉 MDN 문서 보기
$onion.style;
$onion.style.fontSize;
// 대괄호 접근자로는 CSS 속성명 그대로 사용 가능
$onion.style['font-size'] = '2em';
// 💡 마침표 접근자를 쓰면 camel case 사용
$onion.style.fontSize = '1em';
$onion.style.fontSize;
⭐ 클래스, 상속 등에 의한 프로퍼티는 접근되지 않음
6. getComputedStyle - 💡 window의 기능
- 인자로 전달받은 요소의 계산된 CSS 속성 정보 반환
- 👉 MDN 문서 보기
const onionCompStyle = window.getComputedStyle($onion);
onionCompStyle;
onionCompStyle.fontSize;
onionCompStyle.opacity;
onionCompStyle.color;
7. getAttribute, setAttribute - Element의 기능
- 요소들의 속성에 관한 메서드
- 👉 MDN 문서 보기 ( getAttribute )
- 👉 MDN 문서 보기 ( setAttribute )
const $hyperlink = document.querySelector('a');
$hyperlink.getAttribute('href');
$hyperlink.setAttribute('href', 'https://www.yalco.kr');
8. value, checked - 인풋 요소들의 기능
- 인풋 값에 대한 접근자 프로퍼티
const $message = document
.querySelector('input[name=message]');
const $toggle = document
.querySelector('input[name=toggle]');
$message.value;
$message.value = '안녕하세요';
$toggle.checked;
$toggle.checked = !$toggle.checked;
II. 요소 제거
removeChild - Node의 기능
- 인자로 주어진 자식 노드를 제거 - 자식 노드이어야 동작
- 👉 MDN 문서 보기
const $ul = document.querySelector('section > ul')
$ul.removeChild($onion);
$ul.removeChild($ul.lastElementChild);
⭐ 자식 요소 모두 지우기
while ($ul.firstChild) {
$ul.removeChild($ul.firstChild);
}
⚠️ 아래 방법은 비추천
$ul.innerHTML = '';
- 요소들을 삭제하지만, 이벤트 핸들러가 걸려 있을 경우 이들은 메모리에 남음
III. 요소 생성 및 추가
createElement - Document의 기능
- 인자로 주어진 태그명의
Element요소 생성하여 반환 - 👉 MDN 문서 보기
const $tomato = document.createElement('li');
$tomato.textContent = '토마토';
$tomato;
appendChild - Node의 기능
- 인자로 주어진 요소를 자식요소 중 마지막 위치로 이어붙임
- 👉 MDN 문서 보기
$ul.appendChild($tomato);
['상추', '가지', '브로콜리'].forEach(itm => {
$el = document.createElement('li');
$el.textContent = itm;
$ul.appendChild($el);
});
const $newSec = document.createElement('section');
const $newUl = document.createElement('ul');
$newSec.appendChild($newUl);
[
{ name: '소고기', classes: []},
{ name: '돼지고기', classes: ['soldout']},
{ name: '닭고기', classes: []},
{ name: '오리고기', classes: ['soldout', 'organic']},
{ name: '양', classes: ['organic']}
]
.forEach(itm => {
$el = document.createElement('li');
$el.textContent = itm.name;
$el.classList.add(...itm.classes)
$newUl.appendChild($el);
});
document.querySelector('body')
.append($newSec);