티스토리 뷰
웹 요소의 속성을 가져오거나 수정하는 getAttribute(), setAttribute(), removeAttribute() 메서드
웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다.
이 때 속성에 접근하려면 getAttribute() 메서드를 사용하고 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용하면 된다.
속성 자체를 삭제하고 싶다면 removeAttribute() 메서드를 사용하면 된다.
[예시]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>getAttribute, setAttribute</title>
</head>
<body>
<div>
<img src="./img/duck.jpg" alt="오리 사진" id="image" />
</div>
</body>
</html>
간단한 위 예시 코드를 활용하여 알아보자
getAttribute() 메서드
이 메서드는 괄호 안에 들어가는 속성에 접근하여 속성값을 반환한다.
[구문]
element.getAttribute(“속성명”)
[설명]
먼저 속성값을 얻기 위해 이미지 요소에 접근해서 변수에 담아준다.
이미지 요소를 담은 변수에 .getAttribute() 메서드를 활용하여 alt 속성 값과 id 속성 값을 반환한다.
변수에 담지 않고 체이닝을 해도 같은 결괏값을 가져올 수 있다.
setAttribute() 메서드
getAttribute() 메서드를 통해 값을 확인했다면 확인한 값에 대한 설정을 바꿀 수도 있다.
이 메서드의 괄호 안에 들어가는 첫 번째 인자는 속성에 접근하기 위한 속성명이 들어가고 두 번째 인자는 변경하고자 하는 값이 들어간다.
만약 기존 속성값이 이미 있다면 새로운 속성값으로 수정하고 만약 없다면 속성과 속성값을 새로 추가한다.
[구문]
element.setAttribute(“속성명”, “값”)
[설명]
getAttribute() 메서드를 통해 얻은 alt 속성의 값을 변경해보자.
기존에 alt 속성에 있었던 '오리 사진'이라는 값이 setAttribute() 메서드를 통해 "귀여운 오리사진"으로 변경된 것을 확인할 수 있다.
만약에 빈값으로 두고 싶다면 두 번째 인자를 ""으로 두면 된다.
removeAttribute() 메서드
이 메서드는 괄호 안에 들어가는 속성을 제거한다.
[구문]
element.removeAttribute(“속성명”)
[설명]
위에서 변경한 alt 값 자체가 마음에 안 들어서 이 속성(attribute) 자체를 삭제하려고 한다.
기존에 있었던 alt 값 자체가 제거된 것을 확인할 수 있다.
'Development' 카테고리의 다른 글
| 프레그먼트(Fragments) (1) | 2024.01.25 |
|---|---|
| 크롬 확장 프로그램 충돌로 인한 레이아웃 깨짐 문제 해결 (0) | 2024.01.09 |
| 웹 요소의 내용을 수정하는 방법 (0) | 2023.12.26 |
| DOM에 접근하는 다양한 방법 (2) | 2023.12.26 |
| 문서 객체 모델(DOM)이란? (0) | 2023.12.25 |