자바스크립트 getAttribute

JavaScript에서 getAttribute() 메소드는 요소의 속성(attribute) 값을 가져오는 메소드입니다. 이 메소드는 DOM 요소 객체에서 호출됩니다.

 

 

사용법

 

예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다.

 

<div id="example" class="my-class" data-info="some information">...</div>

 

getAttribute() 메소드를 사용하여 id, class, data-info 속성의 값을 가져올 수 있습니다.

 

const element = document.getElementById('example');
const idValue = element.getAttribute('id'); // "example"
const classValue = element.getAttribute('class'); // "my-class"
const infoValue = element.getAttribute('data-info'); // "some information"

 

 

getAttribute() 메소드는 요소의 속성 값이 존재하지 않는 경우 null을 반환합니다. 속성 값이 존재하지 않을 경우에도 에러가 발생하지 않으므로, 안전하게 사용할 수 있습니다.

 

const missingValue = element.getAttribute('missing-attribute'); // null

 

이 메소드를 사용하여 속성 값을 가져온 후, 해당 값을 이용하여 다른 작업을 수행할 수 있습니다. 예를 들어, 특정 요소의 src 속성 값을 가져와서 다른 요소의 background-image 값으로 설정할 수 있습니다.

 

const imageElement = document.getElementById('main-image');
const backgroundImage = imageElement.getAttribute('src');
const containerElement = document.getElementById('image-container');
containerElement.style.backgroundImage = `url(${backgroundImage})`;