JavaScript DOM基础：概念、节点操作与内容修改

DOM基本概念与用途

一、DOM全称

文档对象模型（Document Object Model）

二、DOM是什么

DOM本质上是一个编程接口，即一套应用程序编程接口（API）。它专门针对HTML文档、XML等结构化文档设计，其作用类似于JDBC在数据库操作中的地位，提供了标准化的访问方式。

三、DOM的用途

DOM的主要功能是允许脚本访问或操作HTML、XHTML以及XML文档中的节点元素。

目前，绝大多数浏览器均已遵循W3C发布的DOM规范，因此开发者可以在浏览器环境中直接使用这些DOM API进行开发。

DOM为脚本提供了对网页结构与内容的友好视图。

在DOM视角下，网页被视为由节点构成的层次树结构。

DOM树

每棵DOM树的根节点均为Document，它位于HTML节点的上层，是整个文档结构的起点。

网页可以理解为DOM节点的集合。

见图1

DOM节点类型与特性

节点类型

网页中的节点按类别进行分类，主要由元素节点和文本节点构成。

见图2

节点特性

通过利用节点的特性，可以遍历和导航节点树。

以下是常用的节点特性：

nodeValue：存储节点的值，仅适用于文本节点和属性节点，不适用于元素节点。

nodeType：表示节点类型（如DOCUMENT、TEXT等），以数字代号形式呈现。

childNodes：包含节点下所有子节点的数组，这些子节点按照它们在HTML代码中出现的顺序排列。

firstChild：指向节点下的第一个子节点。

lastChild：指向节点下的最后一个子节点。

利用DOM修改元素内容

例子

document.getElementById(“id”).nodeValue;//获取某节点下的纯文本 
document.getElementsByTagName(“body”)[0].childNodes[1].lastChild;//body下的第二个子节点的最后一个节点

利用DOM改变元素的内容

首先，需要移除目标元素下的所有子节点。

然后，根据新的内容字符串创建一个新的文本节点。

最后，将新创建的文本子节点附加到目标节点下。

这一过程涉及三个关键方法：

removeChild()：用于移除目标节点下的指定子节点，参数为将被移除的子节点对象。

createTextNode()：用于从给定的文本字符串创建一个新的文本节点。

appendChild()：用于将新节点作为最后一个子节点添加到指定节点下，参数为将被新增的节点对象。

var node=document.getElementById(“id”);//获取元素 
while (node.firstChild)//删除元素下的所有子节点（这里判断子节点是否存在，存在为true） 
node.removeChild(node.firstChild) 
node.appendChild(document.createTextNode(“message”))//为元素添加新内容

总结

虽然innerHTML并非万维网标准，但该特性可以方便地访问元素内存储的所有内容。

Document Object Model（文档对象模型），简称DOM，提供了一种访问和修改网页数据的标准化机制。

DOM视图将网页呈现为关联节点的层次树结构。

使用DOM（而非innerHTML）改变网页内容的方案，具体步骤为：先移除元素下的所有子节点，然后创建包含新内容的文本节点，并将其附加到原元素下。

关于JavaScript驾驭网页－DOM就给大家介绍到这里，下篇将给大家介绍JavaScript驾驭网页-CSS与DOM,感兴趣的朋友点击查看详情！