JavaScript青少年简明教程：DOM和CSS简介
DOM简介
DOM（Document Object Model）将文档表示为一个树形结构，其中每个节点都是一个对象，每个对象都有其自身的属性和方法。
通过对DOM的操作，开发者可以使用编程语言（如JavaScript）动态地更新页面内容、样式以及处理用户交互，为用户提供丰富的体验。
【DOM元素和HTML文档标签的关系
HTML标签是定义网页内容和结构的标记语言元素，存在于HTML文件中。比如<title>,<a>,<h1>等。它们是静态的，决定了网页最初的内容布局。
而DOM(文档对象模型)元素是HTML标签在浏览器中的对象表示形式。当浏览器解析HTML文档时,会根据标签生成对应的DOM元素，形成一个树状结构。DOM元素是动态的对象模型,可以通过JavaScript等脚本语言来访问和操作。
说明：
HTML标签是编写网页内容和结构的标记。
DOM元素是标签在浏览器内存中的对象表示和数据模型。
DOM元素与HTML标签并不是一一对应的关系，因为一个HTML标签在DOM中可能对应多个节点对象。这是由于浏览器解析HTML时，除了构建对应元素节点外，还会创建其他节点，比如文本节点、属性节点等。
举个例子，对于HTML标签<p id="test">Hello World</p>
在DOM中会存在如下节点:
元素节点 - <p>元素
属性节点 - id="test"的属性节点
文本节点 - Hello World的文本节点
所以一个看似简单的HTML标签，在DOM树中可能会有多个节点来表示它的不同部分，而不是简单的一一对应。
另外，除了HTML解析出的节点，DOM还提供了一些附加的节点对象，比如document对象、window对象等，它们在HTML中没有直接对应的标签。】
下面给出一个通过JavaScript操作DOM的示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作示例</title>
</head>
<body>
<h1 id="greeting">你好，世界！</h1>
<button onclick="changeGreeting()">点击我改变问候语</button>
<script>
// 定义一个函数来改变问候语
function changeGreeting() {
// 使用getElementById方法来获取id为"greeting"的元素
let greetingElement = document.getElementById('greeting');
// 修改该元素的内容为新的问候语
greetingElement.textContent = '你好，JavaScript!';
}
</script>
</body>
</html>
在这个示例中，当你点击按钮时，会触发changeGreeting函数。该函数首先使用document.getElementById方法获取页面上id为greeting的元素（即<h1>元素），然后修改该元素的textContent属性来改变其显示的内容。这样，<h1>元素的内容将从“你好，世界！”更改为“你好，JavaScript!”
以下是一些常见的DOM操作介绍：
以下是一些常见的DOM操作介绍：
1. 访问DOM元素
通过ID获取元素
let element = document.getElementById('myElement');
通过类名获取元素
返回一个包含所有匹配元素的HTMLCollection。
let elements = document.getElementsByClassName('myClass');
通过标签名获取元素
返回一个包含所有匹配元素的HTMLCollection。
let elements = document.getElementsByTagName('div');
通过CSS选择器获取元素
返回第一个匹配的元素。
let element = document.querySelector('.myClass');
返回所有匹配的元素，返回的是一个NodeList。
let elements = document.querySelectorAll('.myClass');
2. 修改DOM元素内容和属性
修改元素内容
a)修改元素的文本内容：
element.textContent = '新的文本内容';
例如，操作网页的文档对象模型 (DOM)，例如修改元素内容：
<p id="myParagraph">Hello, world!</p>
<script>
document.getElementById("myParagraph").textContent = "Hello, JavaScript!";
</script>
b)修改元素的HTML内容：
element.innerHTML = '<span>新的HTML内容</span>';
修改元素属性
element.setAttribute('src', 'image.png');
获取元素属性
let src = element.getAttribute('src');
删除元素属性
element.removeAttribute('src');
3. 修改元素样式
通过style属性修改内联样式
element.style.color = 'blue';
element.style.fontSize = '16px';
添加或删除类名
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('activeClass'); // 如果类名存在则移除，否则添加
4. 创建和删除元素
创建新元素
let newElement = document.createElement('div');
newElement.textContent = '我是一个新元素';
添加新元素到DOM
let parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);
删除元素
parentElement.removeChild(newElement);
在JavaScript中，操作表单元素是一个常见的任务，它允许你读取用户输入、验证数据、动态地更改表单内容等。下面给出获取表单元素示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br>
<input type="submit" value="Submit">
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 防止表单实际提交
const name = document.getElementById('name').value;
const age = document.getElementById('age').value;
alert('Name：'+ name + ' '+ 'Age：'+age);
});
</script>
</body>
</html>
此例，使用document.getElementById 获取表单元素，然后访问其 value 属性来获取用户输入的数据。
CSS 简介
CSS (Cascading Style Sheets) 是一种样式表语言,用于描述和控制网页中元素的呈现效果，包括布局、字体、颜色、背景等方面的样式。CSS 是网页设计中最重要的技术之一，它可以使网页内容和样式相分离，有利于内容的重复使用和样式的统一管理。
CSS 的主要作用如下:
- 布局和排版:通过设置元素的宽高、边距、填充、浮动、定位等属性，可以实现不同的布局和排版方式。
- 字体和文本样式:可以设置文本的字体family、大小、颜色、加粗、倾斜、行高、对齐方式等样式。
- 背景和边框:可以为元素设置背景颜色、背景图片、背景重复方式，以及边框的样式、颜色、宽度等。
- 盒模型:CSS 将网页元素视为矩形盒子，通过设置 margin、padding、border 等属性来控制盒子的样式。
- 过渡和动画:CSS3 引入了过渡和动画功能，可以实现元素的平滑过渡和动画效果。
CSS 可以通过多种方式与 HTML 页面关联:内联样式、内部样式表、外部样式表等。在实际开发中，通常推荐使用外部样式表的方式，利于样式的复用和维护。CSS 的语法包括选择器、属性和值，通过不同的选择器可以精准地选中页面中的元素并设置其样式。
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
要对HTML页面中的元素实现一对一，一对多或者多对一的控制，可用CSS 规则集（rule-set）实现，CSS 规则集也称为css样式定义，CSS 规则集由选择器和声明块组成，CSS语法
CSS规则由选择器和声明块组成：
选择器 {
属性: 值;
}
选择器（selector）：用于选择要应用样式的HTML元素。常用选择器：
元素选择器（如 p、div、span 等），选择指定的元素
类选择器（如 .classname），选择指定类的元素，类名以点（.）开头
ID选择器（如 #idname），选择指定ID的元素，ID名以井号（#）开头。
属性选择器（如 [attr=value]），选择指定属性的元素。
伪类选择器（如 :hover、:active 等），选择特定状态的元素。
等
声明块（declaration block）：包含一个或多个声明，每个声明由属性（property）和属性值（value）组成，属性和值之间用冒号分隔，声明之间用分号分隔。
属性 (Property): 要改变的样式特性，如颜色、字体、布局等。
值 (Value): 指定给属性的值，即你希望样式特性具有什么样的表现。
换句话说，声明块指明了样式，选择器指明了 “样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
CSS注释
CSS中的注释以 /* 开头，以 */ 结尾。注释内容不会被浏览器解析。
CSS示例：
/* 选择器 */
body {
/* 声明块 */
background-color: lightblue; /* 属性: 值; */
}
h1 {
color: navy;
font-size: 24px;
}
p {
color: green;
}
CSS（层叠样式表）可以通过多种方式应用到HTML文档中，主要有三种：内联样式（Inline Styles）、内部样式表（Internal Stylesheets）和外部样式表（External Stylesheets）。：
1. 行内样式（Inline Styles）
直接在HTML元素的style属性中定义样式。这种方式仅适用于单个元素。但一般不推荐使用，因为它和HTML代码混杂在一起，不易于维护。例如：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: blue; font-size: 20px;">这是一个段落。</p>
</body>
</html>
2. 内部样式表（Internal Style Sheet）
在HTML文件的<head>标签内的<style>标签中的定义样式。这种方式在HTML文件内将将样式代码与HTML代码进行了适当分离——写在不同部分。例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
3. 外部样式表（External Stylesheets）
外部样式表是将样式代码写在单独的.css文件中，并通过HTML文件的<link>标签引入。这种方式是最推荐的方式，因为它可以实现样式代码的复用，提高代码的可维护性。
假设创建的css的文件名为styles.css，内容如下：
p {
color: blue;
font-size: 20px;
}
在HTML文件中引入这个CSS文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
进一步学习，可参考：
HTML网页文档和DOM结构介绍 https://blog.csdn.net/cnds123/article/details/136901800
BOM和DOM入门 https://blog.csdn.net/cnds123/article/details/109635554
CSS选择器介绍https://blog.csdn.net/cnds123/article/details/125926256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
