深入理解DOM：JavaScript操作XML/HTML节点的基石

51 浏览量更新于2024-08-31 收藏 171KB PDF 举报

本篇笔记主要针对JavaScript高级程序设计中的Document Object Model (DOM)进行深入学习。DOM是专为XML和HTML文档设计的Application Programming Interface (API)，它提供了一种统一的方法来操作网页内容，包括添加、删除、修改元素以及获取和设置属性。尽管DOM本身是规范，但具体的实现细节由不同的浏览器厂商负责。在DOM结构中，核心概念包括节点层次关系。文档节点(document)是最顶层，对应于整个HTML或XML文档。文档元素，如HTML的<html>标签，是文档节点的第一个子节点。DOM节点类型分为多种，如Element_NODE表示元素节点，TEXT_NODE代表文本节点，等等。每个节点都有其独特的nodeType属性，可以用来识别节点类型，并且通过比较nodeType与预定义常量确定具体类型。节点的属性，如nodeName和nodeValue，用于获取节点名称和节点值。节点的子节点信息存储在childNodes属性中，这是一个NodeList对象，类似数组但不是真正的Array实例。我们可以使用索引访问节点，例如`someNode.childNodes[0]`或`someNode.childNodes.item(1)`。NodeList对象虽然没有length属性，但可以通过length属性获取子节点数量。为了处理NodeList时更方便，可以将其转换为真正的数组，如通过`convertToArray`函数： ```javascript function convertToArray(nodes) { var array = null; try { array = Array.prototype.slice.call(nodes); // 使用Array的扩展方法实现数组复制 } catch (e) { // 如果不支持slice，可能需要其他方式（比如for循环） array = []; for (var i = 0; i < nodes.length; i++) { array.push(nodes[i]); } } return array; } ``` 这一章节还会介绍如何遍历节点树，创建新的节点，以及处理事件等高级操作。通过深入理解DOM，开发者能够灵活地动态修改网页内容，是前端开发不可或缺的一部分。掌握DOM对于构建交互式用户界面、响应式布局和SEO优化等方面具有重要意义。

6) Text类型

①文本节点由Text类型表示，包含纯文本内容，不含HTML代码。

□不支持（没有）子节点

□nodeValue属性、data属性可访问Text节点中包含的文本。

②操作文本节点

□appendData(text)：将text添加到节点的末尾。

□deleteData(offset,count)：从offset位置开始删除count个字符。

□insertData(offset,text)：在offset位置插入text；

□replaceData(offset,count,text)：用text替换从offset指定的位置开始到offset+count为止处的字符串。

□splitText(offset)：从offset指定位置将当前文本节点分成两文本节点。

□substringData(offset,count)：提取offset指定的位置开始到offset+count为止处的字符串。

□文本节点有一个length属性，保存节点中字符的数目。而nodeValue.length和data.length中也保存着同样的值。

○修改文本节点值时字符串经HTML编码，特殊符号转义：

div.firstChild.nodeValue = "Some<strong>other</strong>"; //输出Some<Strong>other</strong&gt

③创建文本节点

□使用document.createTextNode()创建新文本节点。参数：要插入的文本（自动按HTML或XML格式编码）

④规范化文本节点

□DOM操作中可向同一父元素插入多个文本节点，但会造成混乱。

□通过node类型继承的normalize()方法可合并同一父元素上的所有文本节点。

⑤分割文本节点

□Text类型方法splitText()：与node方法normalize()相反传入一个位置参数，从该位置拆分成两个文本节点，返回后面的文本

节点。

□分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。

7) Comment类型

□Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外所有字符串操作方法。

□可使用document.createComment()创建注释节点。

8) CDATASection类型

□CDATASection类型只针对基于XML的文档表示CDATA区域。

□CDATASection类型继承自Text类型，拥有除splitText()之外所有方法。

□各大浏览器均无法正确解析这种类型。

9) DocumentType类型

□IE不支持

□在DOM1级中DocumentType对象不能动态创建。

□DocumentType对象保存在document.doctype中。

◇name属性：文档类型名称。

◇entities属性：文档类型描述的实体的NamedNodeMap对象。

◇notation属性：文档类型描述的符号的NamedNodeMap对象。

10) DocumentFragment类型

□DOM规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额

外资源。

□文档片段不能添加到文档中，只会添加文档片段作为“仓库”保存的节点。

var fragment = document.createDomFragment();

var ul = document.getElementById("myList");

var li = null;

for(var i= 0; i<3; i++){

li = document.createElement("li");

li.appendChild(document.createTextNode("haha"));

fragment.appendChild(li);

}

ul.appendChild.appendChild(li);

□可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。

11) Attr类型

□是节点，但特性不被认为是DOM文档树的一部分。很少使用这类节点。

□Attr对象3个属性：

◇name属性：特性名称（如nodeName）

◇value属性：特性的值（如nodeValue）

◇specified属性：布尔值，用以区别特性是在代码中指定的还是默认的。

□不建议直接访问特性节点。建议用getAttribute()

setAttribute()、removeAttribute()方法。0

二、DOM扩展

1. 呈现模式

①document对象的compatMode属性

□值为“CSS1Compat”即标准模式。

□值为“BackCompact”即混杂模式。

②IE8为document对象引入documentMode新属性，返回数值：5（混杂模式）、7（仿真模式）、8（标准模式）

2. 滚动

□滚动方法都是作为HTMLElement类型的扩展存在，可再元素节点上使用。

剩余11页未读，继续阅读

weixin_38605144

粉丝: 6
资源: 945

深入理解DOM：JavaScript操作XML/HTML节点的基石

JavaScript高级程序设计2，学习笔记---第一篇

JavaScript高级程序设计 学习笔记之DOM基础(五)

对javascript的一点点认识总结《javascript高级程序设计》读书笔记

Javascript高级程序设计---笔记.pdf

Javascript高级程序设计---笔记归类.pdf

DOM学习笔记

《Javascript DOM 高级程序设计》书摘与学习笔记

JavaScript高级程序设计精华笔记

JavaScript高级程序设计第四版学习笔记全览

JavaScript高级程序设计（第3版）学习笔记与术语解析

最新资源

JavaScript高级程序设计学习笔记之DOM基础(五)