✅ HTML Attribute
기본 HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div>
<h1>오늘 할 일</h1>
<ol id="today">
<li class="item">자바스크립트 공부</li>
<li class="item">고양이 화장실 청소</li>
<li class="item">고양이 장난감 쇼핑</li>
</ol>
<h1>내일 할 일</h1>
<ol id="tomorrow" href="https://www.codeit.kr">
<li class="item"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">자바스크립트 공부</a></li>
<li class="item">뮤지컬 공연 예매</li>
<li class="item">유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
☑️ getAttribute
// HTML 속성(HTML attribute)
const tomorrow = document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;
// // elem.getAttribute('속성'): 속성에 접근하기
console.log(tomorrow.getAttribute('href'));
console.log(item.getAttribute('class'));
☑️ setAttribute
// elem.setAttribute('속성', '값'): 속성 추가(수정)하기
tomorrow.setAttribute('class', 'list'); // 추가
item.setAttribute('href', 'https://www.codeit.kr'); // 수정
☑️ removeAttribute
// elem.removeAttribute('속성'); 속성 제거하기
tomorrow.removeAttribute('href');
tomorrow.removeAttribute('class');
⭐ tomorrow href = ?
a 태그가 아닌 경우에 href를 콘솔 출력하면,
undefined나옴
필요하다면 공부하는 개발자, 한승준