4.1 속성 조작
DOM 요소의 속성과 스타일을 조작하는 것은 웹 문서 작업의 중요한 부분이야. 이걸 통해 사용자 행동이나 다른 조건에 따라 요소의 외관과 행동을 변경할 수 있어.
1. 속성 얻기
요소의 속성 값을 얻으려면 getAttribute() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
const href = link.getAttribute('href');
console.log(href); // 출력: https://example.com
</script>
</body>
</html>
2. 속성 설정
속성의 값을 설정하거나 변경하려면 setAttribute() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
link.setAttribute('href', 'https://newexample.com');
console.log(link.getAttribute('href')); // 출력: https://newexample.com
</script>
</body>
</html>
3. 속성 삭제
속성을 삭제하려면 removeAttribute() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
link.removeAttribute('target');
console.log(link.getAttribute('target')); // 출력: null
</script>
</body>
</html>
4. 속성 존재 여부 확인
속성의 존재 여부를 확인하려면 hasAttribute() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
console.log(link.hasAttribute('target')); // 출력: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // 출력: false
</script>
</body>
</html>
4.2 클래스 조작
1. 클래스 추가
요소에 클래스를 추가하려면 classList.add() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.add('highlight');
</script>
</body>
</html>
2. 클래스 삭제
요소에서 클래스를 삭제하려면 classList.remove() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.remove('highlight');
</script>
</body>
</html>
3. 클래스 토글
클래스를 토글하려면 classList.toggle() 메소드를 사용해. 클래스가 없다면 추가하고, 있으면 삭제해줘.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" id="myButton">Click me!</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener("click", () => {
btn.classList.toggle('highlight'); // 클래스를 추가. 다시 누르면 클래스를 삭제.
});
</script>
</body>
</html>
4. 클래스 존재 여부 확인
클래스의 존재 여부를 확인하려면 classList.contains() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph.classList.contains('highlight')); // 출력: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // 출력: false
</script>
</body>
</html>
4.3 스타일 조작
1. 인라인 스타일 변경
요소의 인라인 스타일을 변경하려면 style 속성을 써.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
</body>
</html>
2. 계산된 스타일 얻기
요소의 현재 계산된 스타일을 얻으려면 window.getComputedStyle() 메소드를 사용해.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#myParagraph {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const styles = window.getComputedStyle(paragraph);
console.log(styles.color); // 출력: rgb(0, 0, 255) 또는 파란색
console.log(styles.fontSize); // 출력: 18px
</script>
</body>
</html>
3. 인라인 스타일 삭제
인라인 스타일을 삭제하려면 스타일 값을 빈 문자열로 설정하면 돼.
예:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>
GO TO FULL VERSION