WebAPIs基本认知，DOM基础介绍

Web APIs

基本认知

变量声明

变量声明有三个var let 和const
建议：优先使用const，原因是const语义化更好，且在react框架中基本都是const

有了变量先给const，如果发现后续它会被修改，再改为let

且对数组,对象也可以使用

html 复制代码

<script>

const arr = ['red','pink']

arr.push('blue')

console.log(arr)

</script>

但是不能这样写

html 复制代码

<script>
        const arr=['red','pink']
        arr=[1,2,3]
        console.log(arr)
    </script>

作用和分类

作用：就是使用Js去操作HTML和浏览器

分类：DOM（文档对象模型），BOM（浏览器对象模型）

什么是DOM:前端开发的基础

DOM（Document Object Model，文档对象模型）是一种用于表示HTML或XML文档的编程接口。它将网页文档解析为树形结构，其中每个节点都是一个对象，开发者可以通过JavaScript等编程语言对这些对象进行操作，从而实现动态修改网页内容、结构和样式。

DOM的核心特点

树形结构：DOM将文档表示为节点树，每个节点可以有父节点、子节点和兄弟节点。
平台和语言无关：DOM是一种标准接口，可被多种编程语言使用，如JavaScript、Python等。
动态交互 ：通过DOM操作，网页可以在不刷新的情况下更新内容，实现丰富的交互效果。
DOM对象是DOM（文档对象模型）中的基本组成单元，代表了HTML或XML文档中的各个部分（如元素、文本、属性等）。每个DOM对象都是一个独立的实体，具有属性、方法和事件，可通过JavaScript进行操作。

DOM对象的类型

DOM对象主要分为以下几种类型：

文档节点（Document）

表示整个HTML或XML文档，是DOM树的根节点。
示例：
javascript 复制代码
```
document.body; // 获取<body>元素
document.querySelector('h1'); // 选择第一个<h1>元素
```

元素节点（Element）

表示HTML标签（如<div>, <p>, <a>等）。
示例：

javascript 复制代码

const div = document.createElement('div'); // 创建div元素
div.id = 'container'; // 设置id属性

文本节点（Text）

表示元素内的文本内容。
示例：

javascript 复制代码

const textNode = document.createTextNode('Hello World');
div.appendChild(textNode); // 将文本添加到div中

属性节点（Attr）

表示元素的属性（如id, class, src等）。
示例：
javascript 复制代码
```
const img = document.querySelector('img');
const src = img.getAttribute('src'); // 获取src属性
```
注释节点（Comment）

表示HTML中的注释（如）。

通用属性：

parentNode：获取父节点
childNodes：获取所有子节点（包括文本节点）
children：获取所有子元素（仅元素节点）
nextSibling/previousSibling：获取相邻节点
nextElementSibling/previousElementSibling：获取相邻元素

常用方法：

querySelector(selector)：返回匹配选择器的第一个元素
querySelectorAll(selector)：返回所有匹配的元素
appendChild(node)：添加子节点
removeChild(node)：移除子节点
setAttribute(name, value)：设置属性
addEventListener(event, callback)：添加事件监听

操作DOM对象

html 复制代码

<!DOCTYPE html>
<html>
<body>
  <div id="app">
    <h1>DOM操作示例</h1>
    <p>点击按钮添加元素</p>
    <button id="addBtn">添加</button>
    <ul id="list"></ul>
  </div>

  <script>
    // 获取元素
    const app = document.getElementById('app');
    const addBtn = document.getElementById('addBtn');
    const list = document.getElementById('list');
	//一般使用querySelector()与querySelectorAll()

    // 修改样式
    app.style.padding = '20px';

    // 添加事件监听
    addBtn.addEventListener('click', () => {
      // 创建新元素
      const li = document.createElement('li');
      li.textContent = `项目 ${list.children.length + 1}`;
      
      // 添加到列表
      list.appendChild(li);
      
      // 为新元素添加点击事件
      li.addEventListener('click', () => {
        li.style.textDecoration = 'line-through';
      });
    });
  </script>
</body>
</html>

通过ID获取DOM对象
修改元素样式
添加事件监听器
创建新元素并添加到DOM树
为动态创建的元素绑定事件

常见的DOM操作

javascript 复制代码

// 获取元素
const element = document.getElementById('myId'); // 通过ID获取
const elements = document.querySelectorAll('p'); // 获取所有<p>元素

// 修改内容
element.textContent = '新文本内容';

// 修改样式
element.style.color = 'red';

// 修改属性
element.setAttribute('href', 'https://example.com');

// 添加事件监听
element.addEventListener('click', () => {
  alert('元素被点击了！');
});

// 创建和添加新元素
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';
document.body.appendChild(newElement);

DOM与JavaScript的关系

在浏览器环境中，JavaScript通过DOM接口与网页进行交互。当网页加载时，浏览器会自动构建DOM树，JavaScript可以访问和修改这棵树，进而改变网页的呈现效果。