속성 조작하기
문서 객체의 속성을 조작할 때는 다음과 같은 메소드를 사용
문서객체.setAttribute(속성이름, 값) : 특성 속성에 값을 지정
문서객체.getAttribute(속성이름) : 특성 속성의 값을 추출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
*/
document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect'); // 클래스 선택자 모두 선택
// rects.forEach((rect, index) => { // index 값은 0부터 시작해서 1씩 증가
// const width = (index + 1) * 100; // 100, 200, 300, 400 의 너비를 가짐
// const src = `http://placekitten.com/${width}/250`;
// rect.setAttribute('src', src); // src 속성에 값을 지정
// })
for(let i = 0; i < rects.length; i++) {
const width = (i + 1) * 100;
const src = `http://placekitten.com/${width}/250`;
rects[i].setAttribute('src', src); // src속성에 값을 지정
}
});
</script>
</head>
<body>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
</body>
</html>
