목차
여러 요소 선택
문서에서 여러 요소(elements)를 선택해야 할 때가 있다. querySelectorAll() 메서드를 사용하면 CSS의 선택자를 문자열로 전달받고, 해당하는 모든 요소를 선택해서 NodeList로 반환한다. 반환 값은 유사 배열 객체다. 배열은 아니지만, 배열과 비슷한 객체다.
const nodeList = element.querySelectorAll(selector)
NodeList의 특정 요소에 접근하려면 숫자 타입의 키를 사용한다. 배열처럼 각 항목에 접근할 수 있다.
const paragraphs = document.querySelectorAll('p')
console.log(paragraphs[0] === paragraphs.item(0)) // true
NodeList는 배열이 아니기 때문에 배열의 메서드를 모두 사용할 수 없다. findIndex() 메서드는 사용할 수 없지만, forEach() 메서드는 사용할 수 있다. length 속성도 사용할 수 있다. NodeList를 배열로 변환해 배열 메서드를 사용하려면 Array.from() 메서드를 사용한다.
const listArray = Array.from(lists)
여러 요소를 선택할 때 querySelectorAll() 메서드 말고도 getElementsByTagName(), getElementsByClassName()과 같은 메서드도 사용할 수 있다. 하지만 대부분의 경우 필요하지 않다. querySelectorAll() 메서드보다 성능상 다소 빠르지만 크게 체감되지 않고, 제한적이다. 자동으로 갱신되는 라이브 컬렉션을 반환한다는 점이 특징이다. 그래서 특수한 경우에만 사용하는 것을 권장한다. querySelectorAll() 메서드는 가장 일반적이고 직관적이며, 선택자를 사용하여 유연하고, 배열 메서드를 사용할 수 있다.
노드 vs. 요소
노드(Node)는 DOM을 트리 다이어그램(Tree Diagram)으로 시각화했을 때 각 줄기와 잎(Leaf)을 나타낸다. 노드에는 사용 가능한 속성과 메서드 세트가 있다. 하지만 다음 2가지를 제외하고는 대부분의 경우 사용되지 않는다.
- Node.parentElement: 노드의 부모 요소를 반환하고, 부모 요소가 없을 경우 null을 반환
- Node.textContent: 요소와 모든 하위 요소의 텍스트 내용을 반환 또는 설정
요소(Element)는 특별한 노드로, 노드가 가진 모든 속성과 메서드를 사용할 수 있고, 요소에서 사용할 수 있는 속성과 메서드 세트도 가진다.
| 항목 | 노드 (Node) | 요소 (Element) |
| 정의 | DOM 트리 구조를 이루는 모든 단위 | 노드 중 HTML 태그로 표현되는 특정 노드 |
| 예시 | <html>, <body>, "텍스트", 주석, 문서 등 | <html>, <body>, <h1>, <a> 등 |
| 종류 | Element, Text, Comment, Document, Attribute 등 | Element만 해당됨 |
| 포함 범위 | 모든 종류의 노드를 포함 | 노드의 하위 개념 (특수한 노드) |
| 주요 메서드 | parentElement, textContent 등 | getAttribute, classList, querySelector 등 |
| 사용 예시 | node.textContent, node.parentElement | element.classList.add('active'), element.getAttribute('href') |
| 사용 빈도 | 비교적 적음 (기본 DOM 구조 이해용) | 매우 높음 (실제 DOM 조작의 대부분) |
| 기타 정보 | 일부 노드는 더 이상 사용되지 않음(예: CDATA, Entity 등) | 문서를 이루는 노드 중 요소가 아닌 것도 있음 |
요소 선택하기
아이디(id), 클래스(class), 태그(tag) 또는 속성을 사용하여 요소를 선택할 수 있다. HTML을 제어할 수 없을 때는 선택자를 직접 조작해야 하고, HTML을 제어할 수 있다면 선택해야 할 요소의 개수에 주의해야 한다.
| 조건 | 추천 선택자 | 이유/설명 |
| HTML 제어 불가 | 속성 선택자 | 구조나 클래스 변경 없이 선택 가능 |
| 요소가 1개만 필요 | id | 문서 내 고유함. getElementById()로 빠르게 접근 가능 |
| 요소가 여러 개 존재 | 클래스 또는 속성 | 대부분 클래스 사용 권장. 속성은 특정 조건 필터링에 유용함 |
| 태그로 선택 | 지양 | 너무 일반적이어서 예기치 않은 선택 가능성 있음 |
| JS로 조작 예정인 요소 | js 클래스 접두사 | JavaScript 용도 명시 → 유지보수 및 협업에 도움 |
JavaScript로 CSS 스타일 설정
JavaScript를 사용해 요소의 CSS 스타일을 설정하려면 style 속성을 사용한다. 아래처럼 변경하려는 CSS 속성에 새 값을 할당할 수 있다.
요소.style['CSS속성'] = 값
style 속성을 사용하면 브라우저가 지원하는 모든 CSS 속성을 변경할 수 있다. 단, CSS 속성은 kebab-case를 사용할 수 없어서 camelCase로 설정해야 하고, 속성 값은 따옴표로 묶어야 한다.
const element = document.querySelector('.element')
element.style.color = 'rgb(237, 76, 103)'
element.style.backgroundColor = '#1289A7'
element.style.fontSize = '2.875rem'
element.style.fontWeight = '800'
setProperty() 메서드를 사용해서 요소의 CSS 스타일을 변경할 수도 있다. 이 방법을 사용하면 사용자 정의 CSS 속성도 설정할 수 있다. 단, setProperty() 메서드를 사용하려면 속성을 kebab-case로 설정해야 한다.
요소.style.setProperty('--theme-color', '#A3CB38')
JavaScript로 CSS 스타일 읽기
CSS만으로는 충분하지 않아서 JavaScript를 사용해 CSS 스타일 값을 제어해야 할 수도 있다. JavaScript에서 요소의 CSS 스타일 값을 읽으려면 다음의 두 가지 방법을 사용할 수 있다.
- 인라인 스타일 읽기: 인라인 스타일이 적용된 요소의 CSS 스타일 속성 값을 읽으려면 style 속성을 사용한다.
- 계산된 스타일 읽기: 요소에 적용된 스타일이 CSS 파일에 작성된 경우 getComputedStyle() 메서드를 사용하여 계산된 스타일로 값을 읽어야 한다. getComputedStyle() 메서드는 사용자가 설정한 스타일 값이 아닌, 브라우저에 의해 계산된 스타일 값을 읽는다.
// 인라인 스타일 읽기
const element = document.querySelector('.element')
const fontSize = element.style.fontSize
console.log(fontSize)
// 계산된 스타일 읽기
const backgroundColor = elementStyles.backgroundColor
const color = elementStyles.color
console.log({ color, backgroundColor })
오늘 하루를 돌아보며
인라인 스타일링은 권장하지 않는다고 배웠다. 인라인 스타일의 우선 순위가 가장 높기 때문에 레이아웃이 무너지거나 스타일링이 의도한 대로 적용되지 않을 수 있기 때문이다. JavaScript로 인라인 스타일을 넣어버리면 디자인이 무너질 수 있으니 주의해야 한다. 열심히 HTML과 CSS 코드를 짰는데 JavaScript로 부주의하게 인라인 스타일을 넣어버리면 억울하지 않을까? 주의, 또 주의하자!
'부트캠프' 카테고리의 다른 글
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 42 (요소의 크기와 위치 정보, DOM 탐색) (0) | 2025.06.25 |
|---|---|
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 41 (빌트인 / 커스텀 속성 설정) (0) | 2025.06.24 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 39 (루프(Loop), forEach 루프) (0) | 2025.06.19 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 38 (배열, 배열 메서드, 루프) (0) | 2025.06.18 |
| 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 37 (UI 컴포넌트(구성 요소), 디버깅) (0) | 2025.06.17 |
