深入理解DOM解析：JavaScript核心节点详解

需积分: 7 40 浏览量更新于2024-08-02 收藏 74KB DOC 举报

本文档深入探讨了JavaScript中的Document Object Model (DOM) 解析，这是一种用于处理HTML或XML文档的标准API，使得脚本能够动态地操作网页内容。DOM将整个文档视为一棵树形结构，其中每个节点都被表示为Node对象，这构成了DOM的核心概念。 Node对象是DOM模型的基础，总共有12种不同的类型，每种类型的值对应于1到12之间的整数。这些节点类型具体如下： 1. Node.ELEMENT_NODE(1): 表示HTML元素节点，如<div>、<p>等，是DOM树的主要构建块。 2. Node.ATTRIBUTE_NODE(2): 代表元素的属性节点，如class、id等。 3. Node.TEXT_NODE(3): 包含文档中的纯文本，不包括HTML标签，如"Hello World"。注意， <![CDATA[]]> 中的文本被认为是特殊的文本节点，它不会解析特殊字符。 4. Node.CDATA_SECTION_NODE(4): 子节点始终为TextNode，用于包含非结构化的文本数据。 5. Node.ENTITY_REFERENCE_NODE(5): 表示引用外部实体的节点，例如`&copy;`。 6. Node.ENTITY_NODE(6): 用于表示DTD中的实体定义，通常不直接在页面上出现，但影响文档结构。 7. Node.PROCESSING_INSTRUCTION_NODE(7): 表示处理指令（Processing Instruction, PI），常用于传递服务器端信息，无子节点。 8. Node.COMMENT_NODE(8): 用于文档注释，不会显示在浏览器中，但对开发者有用。 9. Node.DOCUMENT_NODE(9): 最顶层的节点，通常与document对象关联，包含了整个文档的内容。 10. Node.DOCUMENT_TYPE_NODE(10): 描述文档类型声明（DTD），定义文档的结构规则。 11. Node.DOCUMENT_FRAGMENT_NODE(11): 临时的文档片段，用于组合节点而不会被插入到文档中。 12. Node.NOTATION_NODE(12): 对于XML文档，表示命名系统中的符号（notation）。 Node接口提供了丰富的属性和方法，包括但不限于appendChild()、removeChild()、getElementsByTagName()、getAttribute()等，这些方法允许开发者添加、修改、查找和删除DOM树中的节点。理解DOM节点类型及其关系对于编写动态网页脚本、实现交互式功能至关重要。总结来说，DOM解析是JavaScript中不可或缺的一部分，掌握DOM节点的不同类型以及如何有效地操作它们，是前端开发人员必须掌握的关键技能之一。通过熟练运用DOM，可以实现网页内容的动态更新，提升用户体验和网站功能性。

/* 使用 document.body 来得到<body /> */

var oBody = document.body;

/* 通过 document 对象 */

var oHtml = document.documentElement;

/* 得到<head />和<body /> */

var oHead = oHtml.firstChild;

var oBody = oHtml.lastChild;

/* 可以用这种方式 */

var oHead = oHtml.childNodes[0];

var oBody = oHtml.childNodes[1];

/* 也可以使用方法获取数组的索引值 */

var oHead = oHtml.childNodes.item(0);

var oBody = oHtml.childNodes.item(1);

/* 使用 document.body 来得到<body /> */

var oBody = document.body;? createElement(element)

创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。

eg) var para = document.createElement("p");

document.body.appendChild(para);

? createTextNode()

创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：

reference = document.createTextNode()

参数为新建文本节点所包含的文本字符串

Js 代码

var message = document.createTextNode("hello world");

var container = document.createElement("p");

container.appendChild(message);

document.body.appendChild(container);

var message = document.createTextNode("hello world");

var container = document.createElement("p");

container.appendChild(message);

document.body.appendChild(container); ? cloneNode()

reference = node.cloneNode(deep)

为给定节点创建一个副本，参数为 true 或者 false，true 表示同时复制该节点的子节点，

false 则不复制任何子节点。

Js 代码

var para = document.createElement("p");

var message = document.createTextNode("hello world");

para.appendChild(message);

document.body.appendChild(para);

剩余14页未读，继续阅读

jianchencool

粉丝: 5
资源: 16

深入理解DOM解析：JavaScript核心节点详解

JavaScript标准参考教程

JavaScript权威指南（JavaScript犀牛书一本）

head first JavaScript源码

javascript

Javascript

javascript效果_10种有趣且有趣JavaScript效果

javascript解释执行和javascript编译器如何协作

javaScript

javascript基础统计字符串中出现了JavaScript的次数

TypeScript 和javascript 区别

最新资源