JS DOM操作详解：节点操作入门

需积分: 10 61 浏览量更新于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：注释内容，如``。 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操作是编写交互式网页的关键步骤。通过实践和理解这些概念，可以更有效地控制页面的行为和外观。

中的

DOM

操作

一、 基础

节点层次

－－最顶层的节点，所有的其他节点都是附属于它的。

－－ 引用（使用语法）的对象表现形式，

它不能包含子节点。

－－可以像  一样来保存其他节点。

－－表示起始标签和结束标签之间的内容，例如 或者

。这是唯一可以同时包含特性和子节点的节点类型。

!－－代表一对特性名和特性值。这个节点类型不能包含子节点。

"－－代表 #$ 文档中的在起始标签和结束标签之间，或者

%& 内包含的普通文本。这个节点类型不能包含子节点。

%&－－'!!'((的对象表现形式。这个节点类型仅能包含

文本节点 " 作为子节点。

&－－表示在  中的一个实体定义，例如)*+,-,-。这个

节点类型不能包含子节点。

&.,－－代表一个实体引用，例如/01。这个节点类型不能包

含子节点。

22&*2&－－代表一个 *。这个节点类型不能包含子节点。

－－代表 #$ 注释。这个节点不能包含子节点。

)&－－代表在  中定义的记号。这个很少用到。

) 接口定义了所有节点类型都包含的特性和方法。

特性方法类型返回类型说明

)+%&+节点的名字1根据节点的类型而定义

3+%&+节点的值1根据节点的类型而定义

+) +节点的类型常量值之一

4++指向这个节点所属的文档

526&+)+指向在 6&)2 列表中的第一个节点

26&+)+指向在 6&)2 列表中的最后一个节点

6&)2+)$&2+所有子节点的列表

7&2%& &+)+指向前一个兄弟节点1如果这个节点就是第一个兄弟节

点，那么该值为 +

"%& &+)+指向后一个兄弟节点1如果这个节点就是最后一个兄弟节点，

那么该值为 +

626&)2+8+当 6&)2 包含一个或多个节点时9返回真

& 2+))+包含了代表一个元素的特性的 ! 对象1仅用于

 节点

6&+)+将  添加到 6&)2 的末尾

76&+)+从 6&)2 中删除 +

6&49+)+将 6&)2 中的  替换

成 4+

&28,49,+)+在 6&)2 中的 , 之前

下载后可阅读完整内容，剩余7页未读，立即下载

学学你们

粉丝: 32
资源: 10

JS DOM操作详解：节点操作入门

js_HTML_Dom操作练习

JS DOM 表格操作

JavaScript和DOM操作

ui.js：JavaScript中的简易DOM操作库

简单实现JS对dom操作封装

js使用DOM操作实现简单留言板的方法

javascript dom操作参考

ui.js:简易的DOM操作

JavaScript基于DOM操作实现简单的数学运算功能示例

简单DOM: 构建轻量级JavaScript DOM操作库

最新资源