葡萄藤PPT

1.背景介绍

API

我们常说DOM是针对HTML和XML文档的API，那在介绍DOM前，我们就先来了解下什么是API；API是Application Programming Interface的缩写，就是应用程序接口。它指的是一些能实现某些功能的函数，对象，方法，类的集合。这是个统称，比较广泛的概念。

什么是DOM？

文档对象模型（Document Object Model，简称DOM），是是为HTML和XML提供的API。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。它允许程序和脚本动态地访问和更新文档的内容、结构和样式。它定义了表示和修改文档所需对象、这些对象的行为和属性以及这些对象之间的关系。

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

2.知识剖析

DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点；每个 HTML 元素是元素节点； HTML 元素内的文本是文本节点；每个 HTML 属性是属性节点；注释是注释节点；

常见的DOM操作

创建节点
删除节点
修改节点
查找节点

增：创建节点

我们可以通过document.createElement(); 来创建新的元素节点

此外我们还可以通过.createAttribute(); 来创建新的属性节点

document.createTextNode(); 创建新的文本节点

document.createComment(); 创建新的注释节点

删：删除节点

删除已有的子节点，返回值为删除节点：.removeChild();

此外我们还可以通过.createAttribute(); 来创建新的属性节点

删除具有指定属性名称的属性.removeAttribute();

删除指定属性，返回值为删除的属性：.removeAttributeNode();

改：修改节点

用新节点去替换父节点中已有的子节点 .replaceChild( );

若原元素已有该节点，此操作可以达到修改该属性值的目的.setAttribute();

查：查找节点

通过ID查找 document.getElementById();返回拥有指定id的第一个对象的引用

通过CLASS查找 document.getElementsByClassName(); 返回拥有指定class的对象集合

通过标签名查找 document.getElementsByTagName(); 返回拥有指定标签名的对象集合

通过名称标签名查找 document.getElementsByName(); 返回拥有指定名称的对象结合

常见问题

常见的DOM事件有哪些？

能不能完全复制节点及其所有内容？

4.解决方案

1.常见的DOM事件有哪些？

最常见的就是我们说的鼠标事件了；

onclick 事件——当用户点击时

onload 事件——用户进入

onunload 事件——用户离开

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup 事件——鼠标抬起

2.能不能完全复制节点及其所有内容？

通过 cloneNode();我们复制节点

并且我们可以设置括号里的取值 true/false，来选择是否复制原节点的所有属性

5.编码实战

6.扩展思考

HTML和XML的区别及联系

我们前面说DOM是针对HTML和XML文档的API，那么HTML与XML的区别是什么?又有什么联系呢？

XML 指可扩展标记语言（EXtensible Markup Language） ;是一种标记语言，很类似 HTML; XML 的设计宗旨是传输数据，而非显示数据; XML 标签没有被预定义,需要自行定义标签;

XML 与 HTML 的主要差异

html是用来显示数据的；xml是用来描述数据、存放数据的，所以可以作为持久化的介质！Html将数据和显示结合在一起，在页面中把这数据显示出来；xml 则将数据和显示分开。 XML被设计用来描述数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观。

XML 不是对 HTML 的替代 XML 是对 HTML 的补充。 XML 不会替代 HTML，理解这一点很重要。在大多数 web 应用程序中，XML 用于传输数据，而 HTML 用于格式化并显示数据。对 XML 最好的描述是：XML 是独立于软件和硬件的信息传输工具。

7.参考文献

参考资料：https://www.cnblogs.com/yinshuige/p/5812095.html

—— DOM常用操作

参考资料：https://www.cnblogs.com/wuyaxing/p/6429838.html

—— DOM节点的增删改查

参考资料：http://www.runoob.com/jsref/dom-obj-document.html

——HTML DOM Document 对象

8.更多讨论

DOM 和 HTML的关系？

DOM 和 JAVASCRIPT的关系？

鸣谢

感谢大家观看

BY : 钟华俊

【JS-task2】

常见的Dom操作有哪些？