<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//text
document.addEventListener('DOMContentLoaded', () => {
const a = document.querySelector('#a')
const b = document.querySelector('#b')
a.textContent = '<h1>textContent</h1>'
b.innerHTML = '<h1>innerHTML</h1>'
})
//property
document.addEventListener('DOMContentLoaded', () => {
const rects = document.querySelectorAll('.rect')
rects.forEach((rect, index) => {
const width = (index + 1) * 100
const src = `http://placekitten.com/${width}/250`
rect.setAttribute('src',src)
})
})
//style
document.addEventListener('DOMContentLoaded', () => {
const divs = document.querySelectorAll('body > div')
divs.forEach((div, index) => {
console.log(div, index)
const val = index * 10
div.style.height = '10px'
div.style.backgroundColor = `rgba(${val},${val},${val})`
})
})
</script>
</head>
<body>
<span id="a"></span>
<span id="b"></span>
<img class="rect">
<img class="rect">
<img class="rect">
<img class="rect">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</body>
</html>### Handling Text Content vs. Inner HTML
- **`textContent` vs. `innerHTML`**: Two `<span>` elements are targeted. For the first (`#a`), `textContent` is used to set text that appears as plain text, including the `<h1>` tags, demonstrating that `textContent` does not parse HTML. For the second (`#b`), `innerHTML` is used, which interprets the `<h1>` tags and renders them as HTML, showing the difference in handling between these properties.
### Dynamically Setting Element Attributes
- **Setting `src` Attributes on `<img>` Elements**: Several `<img>` elements with the class `.rect` are selected. Each receives a unique `src` attribute pointing to different placeholder images from `http://placekitten.com/`. The width of the images increases with each iteration, demonstrating dynamic attribute setting and how JavaScript can interact with external resources.
### Modifying CSS Styles
- **Styling `<div>` Elements**: Multiple `<div>` elements are selected, and their styles are dynamically modified. Each `<div>`'s height is set to `10px`, and the background color is a shade of gray that becomes progressively darker with each element. This loop shows how JavaScript can be used to directly modify the styles of elements, affecting the page's visual appearance.
### Execution
- All these manipulations are wrapped in `DOMContentLoaded` event listeners to ensure they execute only after the full HTML document has been loaded. This is crucial for accessing and manipulating elements that are defined in the HTML.
### Practical Use
- **Content Manipulation**: Demonstrates how to safely insert text (`textContent`) and how to include HTML content (`innerHTML`) within elements.
- **Dynamic Content Creation**: Shows how to dynamically generate content, such as image galleries or lists, where attributes like `src` need to be set based on data or iteration.
- **Styling**: Highlights how JavaScript can dynamically alter the styling of elements for responsive layouts, theming, or visual feedback.
### Conclusion
This document illustrates fundamental techniques for dynamic webpage content and style management using JavaScript. It covers essential methods for modifying the DOM, providing a basis for creating interactive and responsive web applications.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 7) Keyboard event (1) | 2024.12.19 |
|---|---|
| chapter 7) localStroage (0) | 2024.12.18 |
| chapter 7) select tag (0) | 2024.12.16 |
| chapter 6) Add object properties dynamically (1) | 2024.12.15 |
| chapter 6) Array_Copy (0) | 2024.12.14 |