DOM(Document Object Model) – DOM 조작 – 1 – 속성의 조작
속성의 조작이란?
DOM(Document Object Model)을 통해 HTML 문서의 요소(element)에 접근하고 조작하는 방법 중 하나는 속성의 조작입니다. HTML 요소는 보통 속성(attribute)을 가지고 있으며, 이러한 속성을 이용하여 요소의 동작이나 스타일을 변경할 수 있습니다. 속성의 조작은 주로 요소의 속성 값을 읽어오거나 수정하는 작업을 포함합니다.
속성 읽기
요소의 속성 값을 읽기 위해서는 getAttribute 메서드를 사용합니다. 이 메서드는 요소의 속성 이름을 인자로 받아 해당 속성의 값을 반환합니다. 예를 들어, <a> 요소의 href 속성 값을 읽어오려면 다음과 같이 할 수 있습니다:
var link = document.querySelector('a');
var href = link.getAttribute('href');이렇게하면 href 변수에 <a> 요소의 href 속성 값이 저장됩니다.
속성 수정
요소의 속성 값을 수정하기 위해서는 setAttribute 메서드를 사용합니다. 이 메서드는 요소의 속성 이름과 새로운 값을 인자로 받아 해당 속성의 값을 변경합니다. 예를 들어, <img> 요소의 src 속성 값을 변경하려면 다음과 같이 할 수 있습니다:
var image = document.querySelector('img');
image.setAttribute('src', 'new_image.jpg');이렇게하면 <img> 요소의 src 속성 값이 'new_image.jpg'로 변경됩니다.
비유를 통한 이해
속성의 조작을 비유적으로 설명해보겠습니다. 여러분이 자신의 옷장에서 옷을 선택하고 입기 위해서는 옷장의 문을 열고 옷을 꺼내야 합니다. 여기서 옷장은 HTML 문서를, 옷은 HTML 요소를 나타냅니다. 속성의 조작은 옷에 있는 속성(예: 색상, 크기, 디자인)을 확인하거나 변경하는 것과 비슷합니다. 즉, 속성의 조작은 옷에 대한 특정한 정보를 알아보거나 변경하여 원하는 스타일을 얻을 수 있도록 해줍니다.
주의해야 할 점
속성의 조작을 할 때 몇 가지 주의해야 할 점이 있습니다.
- 속성 이름은 대소문자를 구분합니다. 예를 들어,
getAttribute('class')와getAttribute('Class')는 서로 다른 결과를 반환합니다. getAttribute메서드는 항상 문자열을 반환합니다. 따라서 숫자와 같은 값을 읽을 때에도 문자열로 반환되므로 필요에 따라 적절한 형 변환을 해주어야 합니다.setAttribute메서드로 속성을 수정할 때에는 속성 이름과 값을 정확하게 지정해야 합니다. 올바른 속성 이름과 값을 사용하지 않으면 원하는 동작이 수행되지 않을 수 있습니다.
마무리
DOM을 통한 속성의 조작은 HTML 문서의 요소를 동적으로 변경하고 제어하는 강력한 방법입니다. getAttribute과 setAttribute 메서드를 사용하여 속성 값을 읽고 수정할 수 있습니다. 이를 통해 원하는 스타일을 적용하거나 동적인 기능을 구현할 수 있습니다. 하지만 속성의 조작을 할 때에는 대소문자를 구분하고, 적절한 형 변환을 고려하며, 올바른 속성 이름과 값을 사용하는 것을 주의해야 합니다.
DOM을 통한 속성의 조작은 웹 개발에서 중요한 개념이므로 자세히 이해하고 숙지하는 것이 좋습니다. DOM의 다른 기능과 함께 사용하면 보다 효과적인 웹 애플리케이션을 개발할 수 있습니다. 활용하여 멋진 웹페이지를 만들어보세요!