JavaScript控制网页- DOM

一、DOM全称。

文档对象模型(文档对象模型)。

二、什么是DOM？

DOM是一个编程接口和一组API。DOM是一组用于HTML文档、XML文档等的API。就像JDBC是一套数据库应用编程接口。

第三，DOM的使用。

DOM用于访问或操作HTML文档、XHTML文档和XML文档中的节点元素。

现在基本上所有的浏览器都实现了W3C发布的DOM规范，所以DOM的这些API都可以在浏览器上使用。

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

DOM将网页视为由节点组成的层次树。

DOM树

每个DOM树的最顶端节点是文档，它位于HTML节点的顶部。

是DOM节点的集合。

参见图1。

节点类型

网页按类别分类，主要由元素节点和文本节点组成。

参见图2。

节点特征

节点属性可用于导航节点树。

以下是常见的节点特征：

NodeValue是存储在节点中的值，只用于文本和属性节点(没有元素)。

NodeType节点类型，例如，它是DOCUMENT或TEXT等。但它是由代码表示的。

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

第一个子节点下的第一个子节点。

lastChild节点下的lastchild节点。

例子

document . getelementbyid(“id”)。nodeValue//获取纯文本文档. getelementsbytagname(" body ")[0]。childnodes [1]。节点下的lastchild//body下第二子节点的最后一个节点使用DOM改变元素的内容。

首先删除所有子节点。

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

最后，新创建的文本子节点被附加到该节点。

这里涉及三种方法。

RemoveChidl()移除目标节点下的子节点，并传入要移除的子节点。

Textnode()从文本字符串创建TextNode。

AppendChildO()将新节点与最后一个子节点的起点连接起来，并传入新添加的子节点。

var node=document . getelementbyid(" id ")；//获取元素while (node.firstChild)//删除该元素下的所有子节点(这里判断是否存在子节点，如果存在则为true)节点。removechild(节点。firstchild)节点。appendchild(文档。createtextnode(" message ")//为元素添加新的内容摘要。

虽然innerHTML不是万维网的标准，但是这个特性可以访问存储在元素中的所有内容。

文档模型(简称DOM)提供了一种访问和修改网页数据的标准化机制。

DOM视图页面是关联节点的层次树。

在使用DOM(而不是innerHTML)来更改网页内容的方案中，应该删除元素下的所有子节点，然后创建并附加一个包含新内容的新子节点。

我们将在这里介绍JavaScript来控制网页——DOM。下一章将介绍控制网页的JavaScript——CSS和DOM。感兴趣的朋友可以点击查看详情！