[DOM-조작] 2️⃣ 요소 속성과 스타일 변경하기

속성 접근 및 변경 방법

. 점 표기법

DOM 객체의 프로퍼티에 접근하거나 설정할 때 점 표기법을 사용한다. 이를 통해 속성을 읽고, 수정할 수 있다.

이 방법은 JavaScript 객체의 프로퍼티를 직접 조작하는 방법으로, 요소의 현재 상태를 반영하게 된다.

구문

예제

const banner = document.querySelector('#banner');

// 1. 점 표기법
banner.src = 'new_image.jpg';

---

getAttribute()

getAttribute() 메서드는 Element의 메서드로, 해당 Element요소에서 속성 값을 가져오는 함수이다.

구문

element.getAttribute(name);

주어진 요소에 속성이 존재하면 그 속성의 값을 문자열로 반환한다. 존재하지 않으면 null을 반환한다.

setAttribute

구문

element.setAttribute(name, value);

setAttribute() 함수는 DOM 요소에 속성 값을 설정하는 함수이다. 속성이 이미 존재하는 경우 값이 업데이트 되며, 존재하지 않는 경우 지정된 이름과 값으로 새 속성이 추가된다.

예제

banner.setAttribute('href', 'http://www.google.com');

---

스타일 변경 방법

1) style 속성을 사용해 인라인 스타일 변경하기

element.style은 인라인 스타일만 가져옴. CSS 파일에서 설정한 스타일은 적용되지 않는다.

const h1 = document.querySelector('h1');

console.log(h1.style.color); // 인라인 스타일이 없다면, 빈 문자열 ""가 찍히게 된다.
h1.style.color = 'blue'; // 텍스트 색상을 파란색으로 변경

2) getComputedStyle() 사용하기

getComputedStyle()을 사용하면 CSS 파일에 작성된 스타일도 모두 갖고 올 수 있다.

const h1 = document.querySelector('h1');
console.log(window.getComputedStyle(h1).color); // 실제로 적용된 스타일 값 출력