javaScript--05 DOM基础 12.4

来源：互联网发布：可以证件照软件编辑：程序博客网时间：2024/04/30 12:21

DOM概念简介

<!DOCTYPE html>

<title>BOM基础</title>

<style>

</style>

</head>

<div>

<p>

Dom概述：

什么事DOM？Document Object Model文档对象模型。

它的作用？重构整个HTML文档。你可以添加、移除、改变或重排页面上的项目。

分类：

Core DOM：定义了一套标准的针对任何结构化文档的对象。

XML DOM：定义了一套标准的针对 XML 文档的对象。

HTML DOM：定义了一套标准的针对 HTML 文档的对象。

XML简介

expensible markup language：可扩展标记语言

<name>

张无忌

</name>

<age>

</age>

</penson>

</p>

<p>

DOM树：

结点：文档中的每个成分都是一个节点（包括文本也是节点）。

节点的分类：

整个文档是一个文档节点

每个XML标签是一个元素节点。

每个XML属性是一个属性节点。

包含在XML元素中的文本是文本节点。

注释属于注释节点

节点的属性：

a.nodeName(节点名称）

文档节点的nodeName永远是#document。

元素节点的nodeName是标签名称。

属性节点的nodeName是属性名称。

文本节点的nodeName永远是#text。

b.nodeValue(节点值）

文档节点 nodeValue不可用。

元素节点 nodeValue不可用。

属性节点 nodeValue包含属值。

文本节点 nodeValue包含文本。

c.nodeType(节点类型）

标签节点的类型是1；

属性节点的类型是2；

文本节点的类型是3；

</p>

<p>

节点的关系

只有父子和兄弟关系

parentNode：父节点。

childNodes：所有的字标签。

firstChild：第一个儿子。

lastChild：最后一个儿子。

nextSibling:下一个兄弟节点。

previousSibling：上一个兄弟节点。

</p>

<p>

对节点进行CRUD(Create、Read、Update、Delete)操作

查找节点？

document.documentElement;

.getElementById(); 根据标签的ID拿到此标签节点。

.getElementsByTagName(); 根据标签的名字拿到此标签节点数组。

.getElementsByName(); 适用于表单控件。根据标签的name属性拿到空间的数组。

删除节点？

removeChild();

创建节点？

document.createElement();//创建一个标签节点。

document.createTextNode();//创建一个文本节点。

节点的setAttribute():添加属性节点。

添加节点？

appendChild();//添加子节点

修改或替换节点？

replaceChild();//替换子节点。

</p>

<p>

DOM（Document Object Model）（文档对象模型）是 HTML和 XML 的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或 XML 页面的每个部分都是一个节点的衍生物。DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API可以轻松地删除、添加和替换节点。

BOM（browser object model）：使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript的一个部分，没有任何相关的标准。由于没有相关的 BOM标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

BOM和DOM只是从两个不同的角度来看待HTML文件。

Dom技术：

通过JavaScript，你可以重构整个HTML文档。你可以添加，移除，改变或重排页面上的项目。

要改变页面上的某个东西，JavaScript需要访问文档中元素的入口。这个入口，联通各种操作，都是通过文档对象模型来获取的。

Dom可被JavaScript用来读取，改变HTML、XML等文档。

</p>

</div>

</body>

</html>

0 0