잡담
이번에는 DOM / setAttribute, getAttribute에 대해서 공부해 봅니다. 오늘 진도를 많이 나가서 하루 만에 3번째 게시글이에요. 보통 이렇게 진도 안 나가셨는데 오늘은 무슨 일인지 많이 나가시더라고요. 그래서 복습하기도 힘듭니다. 그래도 열심히 달려봅니다.
1. setAttribute
DOM(문서 객체 모델) 요소의 속성을 설정하는 메서드입니다. 이 메서드를 사용하면 HTML 요소의 속성을 동적으로 변경할 수 있습니다.
일반적으로 HTML 요소의 속성은 HTML 태그 내에 정적으로 지정되지만, JavaScript를 사용하여 요소의 속성을 동적으로 변경해야 할 때가 있습니다. 이때 setAttribute 메서드를 사용합니다.
setAttribute 메서드는 다음과 같은 형식을 가집니다:
element.setAttribute(name, value);여기서:
- element: 속성을 설정할 DOM 요소입니다.
- name: 설정할 속성의 이름을 나타냅니다.
- value: 설정할 속성의 값입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px; /* 이미지의 너비를 100px로 설정합니다. */
height: 100px; /* 이미지의 높이를 100px로 설정합니다. */
}
</style>
<script>
function myFunc(){
// id가 "my-img"인 이미지 요소를 가져옵니다.
var myImg = document.getElementById("my-img");
// 이미지의 src 속성을 "./images/cat.jpg"로 변경합니다.
myImg.setAttribute('src', './images/cat.jpg');
}
</script>
</head>
<body>
<!-- 이미지와 버튼이 있는 본문(body) 영역입니다. -->
<img src="./images/dog.jpg" alt="개" id="my-img"> <!-- 이미지 요소입니다. 초기 이미지는 "./images/dog.jpg"입니다. -->
<button onclick="myFunc()">클릭</button> <!-- 버튼을 클릭하면 myFunc 함수가 실행됩니다. -->
</body>
</html>See the Pen setAttribute by 이현석 (@loxshqac-the-styleful) on CodePen.
이 HTML 코드는 다음과 같은 기능을 수행합니다:
- 웹 페이지의 제목은 "Document"로 설정됩니다.
- 이미지의 초기 소스는 "./images/dog.jpg"이며, 이미지의 너비와 높이는 각각 100px로 CSS로 설정됩니다.
- 버튼을 클릭하면 JavaScript 함수 myFunc()가 호출됩니다.
- myFunc() 함수는 id가 "my-img"인 이미지 요소를 가져와서 이미지의 src 속성을 "./images/cat.jpg"로 변경합니다.
- 이로 인해 이미지가 고양이 이미지로 변경됩니다.
따라서 이 페이지를 열고 버튼을 클릭하면 이미지가 개에서 고양이로 변경됩니다.
2. getAttribute
DOM(문서 객체 모델) 요소의 특정 속성 값을 반환하는 메서드입니다. 이 메서드를 사용하여 요소의 속성 값을 가져올 수 있습니다.
일반적으로 HTML 요소의 속성은 HTML 태그 내에 정적으로 지정됩니다. 그러나 JavaScript를 사용하여 요소의 속성 값을 동적으로 가져와야 할 때가 있습니다. 이때 getAttribute() 메서드를 사용합니다.
getAttribute() 메서드는 다음과 같은 형식을 가집니다:
var linkElement = document.getElementById("myLink");
var hrefValue = linkElement.getAttribute("href");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px; /* 이미지의 너비를 100px로 설정합니다. */
height: 100px; /* 이미지의 높이를 100px로 설정합니다. */
}
</style>
<script>
function myFunc(){
// id가 "my-img"인 이미지 요소를 가져옵니다.
var myImg = document.getElementById("my-img");
// 이미지의 src 속성 값을 가져와서 알림창에 표시합니다.
alert(myImg.getAttribute('src'));
}
</script>
</head>
<body>
<!-- 이미지와 버튼이 있는 본문(body) 영역입니다. -->
<img src="./images/dog.jpg" alt="개" id="my-img"> <!-- 이미지 요소입니다. 초기 이미지는 "./images/dog.jpg"입니다. -->
<button onclick="myFunc()">클릭</button> <!-- 버튼을 클릭하면 myFunc 함수가 실행됩니다. -->
</body>
</html>See the Pen getAttribute by 이현석 (@loxshqac-the-styleful) on CodePen.
이 HTML 코드는 다음과 같은 기능을 수행합니다:
- 웹 페이지의 제목은 "Document"로 설정됩니다.
- 이미지의 초기 소스는 "./images/dog.jpg"이며, 이미지의 너비와 높이는 각각 100px로 CSS로 설정됩니다.
- 버튼을 클릭하면 JavaScript 함수 myFunc()가 호출됩니다.
- myFunc() 함수는 id가 "my-img"인 이미지 요소를 가져와서 이미지의 src 속성 값을 가져와서 알림창에 표시합니다.
따라서 이 페이지를 열고 버튼을 클릭하면 이미지의 소스 경로가 알림창에 표시됩니다.
글을 마치며
오늘은 setAttribute 와 getAttribute에 대해서 알아봤습니다. 이제 픞레이 리스트를 간단하게 만들 수 있습니다. 아직 조잡하지만 그래도 하나하나 만드는데 재미가 있네요. 다음에는 제가 만든 플레이 리스트를 한번 가볍게 보도록 하겠습니다. 플레이리스트에 audio객체도 들어가니 그것에 대해서도 정리하도록 하겠습니다. 감사합니다.
'Java Script' 카테고리의 다른 글
| [Java Script] Event Bubbling(preventDefault, stopPropagation) (0) | 2024.05.28 |
|---|---|
| [Java Script] DOM / audio객체, 동적 생성 및 제거 (0) | 2024.04.24 |
| [Java Script] DOM / Input Control (0) | 2024.04.01 |
| [Java Script] DOM / 기본 메서드 (0) | 2024.04.01 |
| [Java Script] JSON, API (0) | 2024.03.25 |