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