JS DOM操作详解：节点操作入门
需积分: 10 129 浏览量
更新于2024-09-28
收藏 44KB DOC 举报
"这篇教程主要介绍了JavaScript中的DOM操作，适合新手学习。内容涵盖了DOM的基本概念，包括各种类型的节点以及它们的特性和方法。"
在JavaScript中，DOM（Document Object Model）是网页内容的一种结构化表示，它允许我们通过编程方式访问和修改HTML或XML文档的各个部分。本教程针对初学者，深入浅出地讲解了JS中关于DOM操作的基础知识。
首先，我们需要了解DOM中的节点（node）。节点是DOM的核心元素，它们构成了整个文档的结构。以下是一些主要的节点类型：
1. Document：这是最顶层的节点，包含了文档的全部内容。
2. DocumentType：表示文档类型声明（如<!DOCTYPE html>），通常不包含子节点。
3. DocumentFragment：用于存储一组节点，如同一个临时的文档片段。
4. Element：代表HTML或XML元素，比如`<div>`或`<p>`，可以有属性和子节点。
5. Attr：表示元素的属性，如`class="example"`。
6. Text：存储元素内部的文本内容。
7. CDATASection：用于存储不受解析器解析的数据，如`<![CDATA[ your text ]] >`。
8. Entity：表示文档中定义的实体，如`<!ENTITY>`。
9. EntityReference：引用实体，如`&`。
10. ProcessingInstruction：处理指令，如`<?xml-stylesheet type="text/css" href="style.css"?>`。
11. Comment：注释内容，如`<!-- This is a comment -->`。
12. Notation：较少使用，表示DTD中的记号。
每个节点都有特定的属性和方法，如：
- nodeName：返回节点的名称。
- nodeValue：返回节点的值，不同类型的节点返回的值可能不同。
- nodeType：一个数字常量，标识节点的类型，例如Element是1，Text是3。
- ownerDocument：指向该节点所属的整个文档对象。
- firstChild和lastChild：分别指向子节点列表的第一个和最后一个节点。
- childNodes：一个NodeList，包含了所有子节点。
- previousSibling和nextSibling：指向前一个或后一个兄弟节点，如果没有则为null。
- hasChildNodes()：返回一个布尔值，表明节点是否有子节点。
通过这些属性和方法，我们可以遍历和操作DOM树，添加、删除或修改元素、文本和其他节点。例如，我们可以通过`document.getElementById()`或`document.querySelector()`找到特定的元素，然后利用`appendChild()`、`removeChild()`等方法进行操作。
对于初学者来说，掌握这些基本的DOM操作是编写交互式网页的关键步骤。通过实践和理解这些概念，可以更有效地控制页面的行为和外观。
JS
中的
DOM
操作
一、 基础
节点层次
－－最顶层的节点，所有的其他节点都是附属于它的。
－－ 引用（使用语法）的对象表现形式，
它不能包含子节点。
－－可以像 一样来保存其他节点。
－－表示起始标签和结束标签之间的内容，例如 或者
。这是唯一可以同时包含特性和子节点的节点类型。
!－－代表一对特性名和特性值。这个节点类型不能包含子节点。
"－－代表 #$ 文档中的在起始标签和结束标签之间，或者
%& 内包含的普通文本。这个节点类型不能包含子节点。
%&－－'!!'((的对象表现形式。这个节点类型仅能包含
文本节点 " 作为子节点。
&－－表示在 中的一个实体定义，例如)*+,-,-。这个
节点类型不能包含子节点。
&.,－－代表一个实体引用，例如/01。这个节点类型不能包
含子节点。
22&*2&－－代表一个 *。这个节点类型不能包含子节点。
－－代表 #$ 注释。这个节点不能包含子节点。
)&－－代表在 中定义的记号。这个很少用到。
) 接口定义了所有节点类型都包含的特性和方法。
特性方法 类型返回类型 说明
)+%&+节点的名字1根据节点的类型而定义
3+%&+节点的值1根据节点的类型而定义
+) +节点的类型常量值之一
4++指向这个节点所属的文档
526&+)+指向在 6&)2 列表中的第一个节点
26&+)+指向在 6&)2 列表中的最后一个节点
6&)2+)$&2+所有子节点的列表
7&2%& &+)+指向前一个兄弟节点1如果这个节点就是第一个兄弟节
点，那么该值为 +
"%& &+)+指向后一个兄弟节点1如果这个节点就是最后一个兄弟节点，
那么该值为 +
626&)2+8+当 6&)2 包含一个或多个节点时9返回真
& 2+))+包含了代表一个元素的特性的 ! 对象1仅用于
节点
6&+)+将 添加到 6&)2 的末尾
76&+)+从 6&)2 中删除 +
6&49+)+将 6&)2 中的 替换
成 4+
&28,49,+)+在 6&)2 中的 , 之前
下载后可阅读完整内容，剩余7页未读，立即下载
2010-10-15 上传
2021-05-18 上传
2024-10-28 上传
2023-07-15 上传
2023-08-04 上传
2023-08-13 上传
2024-10-28 上传
2024-10-15 上传
学学你们
- 粉丝: 32
- 资源: 10
我的内容管理
展开
最新资源
- WordPress作为新闻管理面板的实现指南
- NPC_Generator：使用Ruby打造的游戏角色生成器
- MATLAB实现变邻域搜索算法源码解析
- 探索C++并行编程：使用INTEL TBB的项目实践
- 玫枫跟打器：网页版五笔打字工具，提升macOS打字效率
- 萨尔塔·阿萨尔·希塔斯：SATINDER项目解析
- 掌握变邻域搜索算法：MATLAB代码实践
- saaraansh: 简化法律文档，打破语言障碍的智能应用
- 探索牛角交友盲盒系统：PHP开源交友平台的新选择
- 探索Nullfactory-SSRSExtensions: 强化SQL Server报告服务
- Lotide：一套JavaScript实用工具库的深度解析
- 利用Aurelia 2脚手架搭建新项目的快速指南
- 变邻域搜索算法Matlab实现教程
- 实战指南：构建高效ES+Redis+MySQL架构解决方案
- GitHub Pages入门模板快速启动指南
- NeonClock遗产版：包名更迭与应用更新
