더보기
<!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>
.purple {
color: rgb(181, 147, 245);
}
</style>
</head>
<body>
<h1 class="heading">DOM 조작</h1>
<a href="https://www.google.com/">google</a>
<p class="content">content1</p>
<p class="content">content2</p>
<p class="content">content3</p>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
<script>
// 클래스 속성 조작
const h1Tag = document.querySelector('.heading')
console.log(h1Tag)
console.log(h1Tag.classList)
h1Tag.classList.add('purple')
console.log(h1Tag.classList)
h1Tag.classList.remove('purple')
console.log(h1Tag.classList)
h1Tag.classList.toggle('purple')
// 일반 속성 조작
const aTag = document.querySelector('a')
console.log(aTag)
console.log(aTag.getAttribute('href'))
aTag.setAttribute('href', 'https://www.naver.com/')
console.log(aTag.getAttribute('href'))
aTag.removeAttribute('href')
console.log(aTag.getAttribute('href'))
</script>
</body>
</html>
 |
 |
 |
 |
 |
 |
 |
 |
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript][DOM 조작] 4. DOM 요소 조작 (0) | 2024.04.16 |
|---|---|
| [JavaScript][DOM 조작] 3. HTML 콘텐츠 조작 (0) | 2024.04.16 |
| [JavaScript][DOM 조작] 1. 속성 조작 (클래스 속성) (0) | 2024.04.16 |
| [JavaScript][DOM 조작] 0. 전체 종류 (0) | 2024.04.16 |
| [JavaScript] DOM 선택 (0) | 2024.04.16 |