JavaScript操作DOM：添加、删除、插入与替换节点
需积分: 10 117 浏览量
更新于2024-08-22
收藏 3.82MB PPT 举报
"本资源主要涵盖了JavaScript中的DOM操作，包括添加、插入、删除和替换节点的基本方法，以及变量的声明和赋值规则。此外，还提到了JavaScript在HTML中的引入方式以及常见的变量命名规范。"
在JavaScript中，DOM（文档对象模型）允许我们操作HTML或XML文档的结构，这包括创建、修改和删除元素。以下是一些关键的DOM操作方法：
1. `createElement()`: 这个方法用于创建新的HTML元素。例如，`var newElement = document.createElement('div')`会创建一个新的`<div>`元素。
2. `createTextNode()`: 如果需要向文档中添加文本，可以使用这个方法。例如，`var newText = document.createTextNode('Hello, world!')`。
3. `insertBefore(newNode, beforeNode)`: 这个方法将`newNode`插入到`beforeNode`之前的位置，即在`beforeNode`的父节点中成为它的前一个兄弟节点。
4. `appendChild()`: 这个方法将新节点添加到指定元素的末尾，作为其子节点。
5. `removeChild()`: 通过这个方法可以删除指定的子节点。例如，`parentElement.removeChild(childNode)`会从`parentElement`中移除`childNode`。
6. `replaceChild(newNode, oldNode)`: 这个方法将`oldNode`替换为`newNode`，`newNode`成为`oldNode`原来的位置。
7. `nodeValue`属性：用于获取或设置节点的文本内容。
8. `tagName`属性：返回元素的标签名称，如`<div>`的`tagName`就是`'DIV'`。
9. `className`属性：用于获取或设置元素的CSS类名。
JavaScript通常在HTML文档中通过`<script>`标签引入，可以放在`<head>`或`<body>`部分。当`src`属性被指定时，它会加载外部的JavaScript文件；如果没有`src`，则在`<script>`标签内编写代码。
在JavaScript中，变量的声明和赋值是基础操作：
- 使用`var`关键字定义变量，如`var test`。在ES6之后，还可以使用`let`和`const`。
- 变量赋值通过等号(`=`)完成，例如`test = "hi"`。
- 可以使用分号(`;`)结束语句，虽然在某些情况下可以省略，但推荐始终使用以避免潜在问题。
- 变量命名遵循特定规则：首字符可以是字母、下划线或美元符号，后续字符可以是字母、数字、下划线或美元符号。常见的命名风格有：
- 驼峰式（CamelCase）：首字母小写，如`myTestValue`。
- 帕斯卡式（PascalCase）：首字母大写，如`MyTestValue`。
- 匈牙利类型标记法：在变量名前加上表示类型的缩写，如`strMyTest`表示字符串类型。
理解并熟练掌握这些基本概念对于进行JavaScript编程至关重要，它们构成了JavaScript交互式网页应用的基础。
1688 浏览量
158 浏览量
105 浏览量
2021-05-26 上传
2021-02-26 上传
2021-06-18 上传
2021-05-30 上传
2021-02-23 上传
2021-05-31 上传
