HTML与JavaScript结合

### HTML与JavaScript结合

JavaScript是一种脚本编程语言，它能够增强网页的交互性，允许开发者创建动态更新的内容、控制多媒体、动画效果等。以下是JavaScript的一些基础知识以及如何与HTML结合使用。

#### JavaScript基础

1. **在HTML中嵌入JavaScript**：
   - **内联脚本**：直接在HTML元素的事件属性中写JavaScript代码。
     ```html
     <button onclick="alert('Hello, World!')">点击我</button>
     ```
   - **内部脚本**：在HTML文档中使用`<script>`标签包含JavaScript代码。
     ```html
     <script>
       alert('Hello, World!');
     </script>
     ```
   - **外部脚本**：在独立的`.js`文件中写JavaScript代码，然后在HTML中通过`<script>`标签引入。
     ```html
     <script src="script.js"></script>
     ```

2. **变量和数据类型**：
   JavaScript有多种数据类型，包括字符串、数字、布尔值、对象、数组等。
   ```javascript
   var message = "Hello"; // 字符串
   var number = 42; // 数字
   var isTrue = true; // 布尔值
   var array = [1, 2, 3]; // 数组
   ```

3. **函数**：
   函数是执行特定任务的代码块，可以通过名称调用。
   ```javascript
   function sayHello() {
     alert('Hello, World!');
   }
   ```

4. **控制结构**：
   JavaScript提供了条件语句、循环等控制结构。
   ```javascript
   if (isTrue) {
     sayHello();
   } else {
     alert('Goodbye, World!');
   }

for (var i = 0; i < 5; i++) {
     console.log(i);
   }
   ```

#### DOM操作

DOM（Document Object Model，文档对象模型）是HTML文档的编程接口。JavaScript可以通过DOM操作HTML元素。

1. **获取元素**：
   使用`document.getElementById`、`document.querySelector`等方法获取DOM元素。
   ```javascript
   var element = document.getElementById('myElement');
   var header = document.querySelector('h1');
   ```

2. **修改内容**：
   修改元素的内容或属性。
   ```javascript
   element.textContent = '新内容'; // 修改文本内容
   element.setAttribute('class', 'newClass'); // 修改属性
   ```

3. **添加和删除元素**：
   创建新元素并添加到DOM中，或删除现有元素。
   ```javascript
   var newElement = document.createElement('p');
   newElement.textContent = '新段落';
   document.body.appendChild(newElement); // 添加到body

element.remove(); // 删除元素
   ```

#### 事件处理

事件是用户操作，如点击、输入等，或浏览器操作，如页面加载完成。JavaScript可以监听和响应这些事件。

1. **事件监听器**：
   为元素添加事件监听器，当事件发生时执行函数。
   ```javascript
   element.addEventListener('click', function() {
     alert('元素被点击');
   });
   ```

2. **事件对象**：
   事件处理函数可以接收一个事件对象，包含事件的详细信息。
   ```javascript
   element.addEventListener('click', function(event) {
     console.log(event.target); // 被点击的元素
   });
   ```

3. **事件传播**：
   理解事件冒泡和捕获，以及如何使用`event.stopPropagation`阻止事件传播。
   ```javascript
   parentElement.addEventListener('click', function(event) {
     event.stopPropagation(); // 阻止事件冒泡到父元素
   });
   ```

通过结合HTML和JavaScript，开发者可以创建出高度交互的网页应用。JavaScript的DOM操作和事件处理功能使得网页能够响应用户的操作，提供动态的内容和功能。