<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//add and create
document.addEventListener('DOMContentLoaded', () => {
const header = document.createElement('h1')
header.textContent = 'allocation of document'
header.setAttribute('data-custom', 'user of difference')
header.style.color = 'white'
header.style.backgroundColor = 'black'
document.body.appendChild(header)
})
//move to document
document.addEventListener('DOMContentLoaded', () => {
const divA = document.querySelector('#first')
const divB = document.querySelector('#second')
const h1 = document.createElement('h1')
h1.textContent = 'move to h1 tag'
const toFirst = () => {
divA.appendChild(h1)
setTimeout(toSecond,10000)
}
const toSecond = () => {
divB.appendChild(h1)
setTimeout(toFirst,10000)
}
toFirst()
})
//delete
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const h2 = document.querySelector('h2')
h2.parentNode.removeChild(h2)
//document.body.removeChild(h2)
},3000)
})
</script>
</head>
<body>
<div id = "first">
<h1>first h1 tag inner</h1>
</div>
<hr>
<div id ='second'>
<h1>second div tag inner</h1>
</div>
<hr>
<h2>delete document</h2>
<hr>
</body>
</html>### Add and Create Elements
- An `<h1>` element is dynamically created and styled with JavaScript.
- The `textContent` property sets the element's text to `'allocation of document'`.
- A custom data attribute `data-custom` is added with the value `'user of difference'`.
- The element's text color is set to white, and the background color is set to black via the `style` property.
- Finally, this `<h1>` element is appended to the document's body, making it visible on the page.
### Move Elements Between Containers
- Two `<div>` containers are selected from the document using their IDs (`first` and `second`).
- An `<h1>` element is created with the text `'move to h1 tag'` and is programmatically moved between the two `<div>` elements every 10 seconds using `setTimeout`.
- `toFirst` appends the `<h1>` to `divA` and schedules `toSecond` to execute after 10 seconds.
- `toSecond` moves the `<h1>` to `divB` and schedules `toFirst` to execute after another 10 seconds.
- This creates a looping effect where the `<h1>` element moves back and forth between the two divs.
### Delete Element
- A `<h2>` element with the text `'delete document'` is targeted for removal from the document 3 seconds after the page loads.
- The `querySelector` method selects the `<h2>` element, and `parentNode.removeChild` is used to remove it from the document.
- Alternatively, `document.body.removeChild(h2)` could also be used if the `<h2>` element is a direct child of the `<body>`. In this script, it's commented out as an alternate method.
### Execution Flow
- These scripts rely on the `DOMContentLoaded` event to ensure they execute only after the HTML document's DOM is fully loaded.
- By using `document.addEventListener('DOMContentLoaded', callback)`, the callbacks that create, move, and delete elements are queued to run in sequence after the DOM content is loaded, ensuring the elements they intend to manipulate are available.
### Observations
- The document uses multiple `DOMContentLoaded` listeners for clarity and educational purposes, demonstrating different DOM manipulation techniques. In a production environment, it's more common to combine all DOM-related JavaScript inside a single `DOMContentLoaded` listener for efficiency.
- This example provides a clear demonstration of how to interact with the DOM using JavaScript, covering key operations like creating, moving, and removing elements, which are foundational for dynamic web development.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 8) print out exception (2) | 2024.12.25 |
|---|---|
| chapter 8) try catch finally (0) | 2024.12.24 |
| chapter 7) DomContentLoaded event (0) | 2024.12.22 |
| chapter 7) handle to javascript code in HTML (1) | 2024.12.21 |
| chapter 7) Keyboard event (1) | 2024.12.19 |