4.1 操作属性
操作DOM元素的属性和样式是处理web文档的重要部分。这可以根据用户操作或其他条件改变元素的外观和行为。
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