[Javascript] 요소 선택과 탐색, 조작 - getElementsByTagName 등

⭐ DOM의 모든 기능을 배우지는 않음

• 핵심 기능들을, 학습해 온 자바스크립트 지식과 접목하여 이해

add_to_queue 새 창에서 열기

I. 요소 선택

• 🔗 Document 또는 🔗 Element의 인스턴스 메서드들. 자식 클래스들로 상속됨

 

1. getElementsByTagName - 태그명으로 선택

• 👉 MDN 문서 보기 ( Document )
• 👉 MDN 문서 보기 ( Element )

document에서 사용시 문서 전체에서 선택

const $sections = document.getElementsByTagName('section');

const $listItems = document.getElementsByTagName('li');

​

console.log($sections);

console.log($listItems);

• 💡 반환값: 🔗 HTMLCollection - 유사 배열 객체 & 이터러블

⭐ 요소 노드에 사용시 그 하위에서 선택

• Element로부터 물려받은 메서드
• 이후의 메서드들에도 동일하게 적용됨

$sections[0].getElementsByTagName('li')

2. getElementsByClassName - 클래스명으로 선택

• 👉 MDN 문서 보기 ( Document )
• 👉 MDN 문서 보기 ( Element )

// document에서 사용시 - Document의 메서드

const $plants = document.getElementsByClassName('plant');

const $soldOuts = document.getElementsByClassName('soldout');

​

console.log($plants);

console.log($soldOuts);

 

// 노드 요소에서 사용시 - Element의 메서드

console.log(

$plants[0].getElementsByClassName('soldout')

);

3. getElementById - 아이디로 선택

• ⭐ Document만의 메서드 - 문서 내 유일한 요소이므로
• 👉 MDN 문서 보기 ( Document )

document.getElementById('sweets');

4. querySelector, querySelectorAll

• 주어진 CSS 선택자 첫 번째 또는 모든 요소 반환
• Document와 Element 모두 갖고 있음

 

document.querySelector('section');

 

// 💡 NodeList 반환 (HTMLCollection보다 다양한 타입 담음)

document.querySelectorAll('section');

 

document.querySelector('.plant > ul > .soldout');

 

document.querySelector('#sweets ul > :nth-child(2)');

 

$sections[2].querySelectorAll('.soldout');

---

 

II. 노드 기준 탐색

1. 자식 노드 탐색

document.querySelector('section')

.children;

• Element의 기능 - 하위 요소 노드만 반환

 

document.querySelector('section')

.childNodes;

• 🔗 Node의 기능 - 텍스트 노드를 포함한 하위 노드 반환
• 공백도 텍스트 노드에 포함됨

// ⭐ 메서드 체이닝

document.querySelector('section')

.querySelector('li')

.children;

 

document.querySelector('section')

.querySelector('li')

.childNodes;

const $firstUl = document.querySelector('ul')

 

Node의 메서드들

$firstUl.firstChild;

 

$firstUl.lastChild;

 

Element의 메서드들

$firstUl.firstElementChild;

 

$firstUl.lastElementChild;

 

// ⭐ 텍스트만 있는 요소의 텍스트 노드 접근

$firstUl.firstElementChild.firstChild;

2. 형제, 부모 노드 탐색

const $secondLi = document

.querySelector('section')

.querySelector('li:nth-child(2)');

 

Node의 메서드들

$secondLi.previousSibling;

 

$secondLi.nextSibling;

 

Element의 메서드들

$secondLi.previousElementSibling;

 

$secondLi.nextElementSibling;

// Node의 기능

$secondLi.parentNode;

 

// 💡 역시 Node의 기능 - 부모 노드가 Element일 때만 반환

$secondLi.parentElement;

 

$secondLi.parentNode === $secondLi.parentElement;

 

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. geAttribute, 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);