4.1 Attribute Manipulation
Manipulating attributes and styles of DOM elements is a crucial part of working with web documents. It lets you change how elements look and behave based on user actions or other conditions.
1. Getting Attributes
Use the getAttribute() method to get the values of an element's attributes.
Example:
<!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); // Outputs: https://example.com
</script>
</body>
</html>
2. Setting Attributes
Use the setAttribute() method to set or change the value of an element's attribute.
Example:
<!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')); // Outputs: https://newexample.com
</script>
</body>
</html>
3. Removing Attributes
Use the removeAttribute() method to remove an attribute from an element.
Example:
<!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')); // Outputs: null
</script>
</body>
</html>
4. Checking for Attributes
Use the hasAttribute() method to check if an attribute exists.
Example:
<!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')); // Outputs: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Outputs: false
</script>
</body>
</html>
4.2 Class Manipulation
1. Adding Classes
Use the classList.add() method to add a class to an element.
Example:
<!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. Removing Classes
Use the classList.remove() method to remove a class from an element.
Example:
<!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. Toggling Classes
Use the classList.toggle() method to toggle a class. It adds the class if it's not there, and removes it if it is.
Example:
<!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'); // Adds the class. Removes it on next click.
});
</script>
</body>
</html>
4. Checking for Classes
Use the classList.contains() method to check if an element has a certain class.
Example:
<!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')); // Outputs: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Outputs: false
</script>
</body>
</html>
4.3 Style Manipulation
1. Modifying Inline Styles
Use the style property to change an element's inline styles.
Example:
<!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. Getting Computed Styles
Use the window.getComputedStyle() method to get an element's current computed styles.
Example:
<!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); // Outputs: rgb(0, 0, 255) or blue color
console.log(styles.fontSize); // Outputs: 18px
</script>
</body>
</html>
3. Removing Inline Styles
To remove inline styles, just set the style value to an empty string.
Example:
<!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