DOM操作学习1
1. DOM的概念
DOM（Document Object Model）是浏览器中把HTML或XML文件结构化为树状结构的API，它使开发者能够通过JavaScript来动态操作网页内容、结构和样式。DOM将网页中的每个元素（如标籤、属性、文本内容等）作为一个对象来表示，这些对象可以被查询、修改、删除或添加。
DOM的主要组成部分：
- Document：整个HTML文档的顶级对象，表示网页本身。
- Element：HTML标籤对应的元素对象（如< div>, < p>,< img>）。
- Attribute：元素上的属性（如class, id等）。
- Node：DOM中的每个对象都称为一个节点，节点可以是元素节点、文本节点或属性节点等。
2. DOM选择器
在操作DOM之前，首先需要选择我们想要操作的元素。JavaScript提供了几种常用的方法来选择DOM元素：
2.1 getElementById
选择拥有特定id的元素。由于id在一个页面中是唯一的，因此该方法返回单一元素。
let header = document.getElementById(\'header\');
console.log(header.textContent); // 取得元素的文本内容
2.2 getElementsByClassName
选择拥有特定class`的所有元素，返回一个HTMLCollection（类数组），需要通过索引访问具体元素。
let items = document.getElementsByClassName(\'item\');
console.log(items[0].textContent); // 访问第一个元素
2.3 getElementsByTagName
选择页面上所有指定标籤名的元素，返回一个HTMLCollection。
let paragraphs = document.getElementsByTagName(\'p\');
console.log(paragraphs[0].textContent); // 访问第一个段落元素
2.4 querySelector 和 querySelectorAll
- querySelector：使用CSS选择器语法，返回匹配的第一个元素。
- querySelectorAll：返回所有匹配的元素，返回值是NodeList，可以使用forEach()来遍历。
let firstItem = document.querySelector(\'.item\'); // 第一个匹配的class为item的元素
let allItems = document.querySelectorAll(\'.item\'); // 所有匹配的class为item的元素
allItems.forEach(item => console.log(item.textContent)); // 遍历所有元素
3. DOM内容操作
3.1 修改文本内容
可以使用textContent或innerHTML来修改元素的文本或HTML内容。
- textContent：修改元素内部的纯文本内容，不会解析HTML。
- innerHTML：能够解析并插入HTML标籤，但应谨慎使用，避免XSS攻击。
let heading = document.getElementById(\'header\');
heading.textContent = \'新的标题\'; // 修改纯文本
heading.innerHTML = \'<strong>加粗的标题</strong>\'; // 插入HTML
3.2 修改属性
可以使用getAttribute()和setAttribute()来读取或修改HTML元素的属性，也可以直接通过点语法来操作常见属性（如id、class、src等）。
let image = document.querySelector(\'img\');
image.setAttribute(\'src\', \'new-image.jpg\'); // 修改图片的src属性
console.log(image.getAttribute(\'src\')); // 读取src属性
3.3 修改样式
可以使用style属性直接修改内联样式。注意，CSS属性在JavaScript中使用驼峰式命名（如background-color变为backgroundColor）。
let box = document.querySelector(\'.box\');
box.style.backgroundColor = \'blue\'; // 修改背景颜色
box.style.width = \'200px\'; // 修改宽度