今天完成的事：

1、讲了小课堂，完成了后续工作；

2、任务4写到加天数哪里，发现之前，前一天被杀的和被投的没存好，现在得回头找数据；

明天的计划：

1、任务四收尾；

遇到的困难：

1、还是数据传递的问题，之前真的没想到那么多；另外，代码块很乱。

收获：

常见的DOM操作方式有哪些？

1.背景介绍

什么是DOM？

DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。

在Chrome浏览器端，单击右键打开View Page Source展示文档结构。通过这种方式可以直观的看到文档当前的内容和结构。DOM则不同，它是提供一个API给编程语言，比如Javascript，通过一系列抽象的方法操作文档的内容，结构和样式。

官方介绍结束，现在用人话来理解：

在现实世界里，我们对所谓的'世界对象模型'都不会陌生，例如，当用'汽车'、'房子'和'树'等名词来称呼日常生活环境里的事物时，我们都可以百分百的肯定对方知道我们说的是什么，这是因为人们在对这些名词所代表的的东西有着相同的认知。于是，当对别人说"汽车停在车库里"时，可以断定他们不会理解为"小鸟关在壁橱里"等别的含义。

我们的"世界对象模型"不进可以用来描述客观存在的事物，还可以同来描述抽象概念。

例如，假设有个人想我问路，而我给出的答案是"左边第三栋房子"，这个答案有没有意义取决于那个人能够理解"左边"和"第三"的含义。如果他不会数数或者分不清左右，则不管他是否理解这几个概念，我的回答对他都不会有任何的帮助。在现实世界中，正是因为大家对抽象的"世界对象模型"有着基本的共识，人们才能用非常简单的话来表达出复杂的含义并得到对方的理解。

2.知识剖析

刚刚提到了节点。那么节点这个到底又是什么？

节点这个词是一个网络用语，代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。

在现实世界中，一切事物都由原子构成。原子就是现实世界的节点。但是原子同样还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样也是节点。

DOM也是同样的情况。文档是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。

在DOM中有许多不同类型的节点。就像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：元素节点、文本节点和属性节点。

那么，DOM是由什么组成？

对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。

DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。

作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心（core）、HTML接口和XML接口。（至于XML和HTML区别是啥，你可以理解为两种不同的语言，但是很相似。作用不一样。XML更多用于数据传输设计，HTML更多用于数据的展示模块）

核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。

HTML接口和XML接口两部分则是专为操作具体HTML文档和XML文档所提供的高级接口。

DOM树（丑图，改自红宝书）

2.知识剖析

DOM的四个基本接口

在DOM接口规范中，有四个基本的接口：Document, Node, NodeList, NamedNodeMap。

Document:Document接口是对文档进行操作的入口，它是从Node接口继承过来的。

Node:Node接口是其他大多数接口的父类。 在DOM树中，Node接口代表了树中的一个节点。

常见的DOM操作

1.查找节点

document.getElementById('id属性值'); 返回拥有指定id的第一个对象的引用

document/element.getElementsByClassName('class属性值'); 返回拥有指定class的对象集合

document/element.getElementsByTagName('标签名'); 返回拥有指定标签名的对象集合

document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合

document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素

document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素

document.documentElement; 获取页面中的HTML标签

document.body; 获取页面中的BODY标签

document.all['']; 获取页面中的所有元素节点的对象集合型

2.创建节点

document.createElement('元素名'); 创建新的元素节点

document.createAttribute('属性名'); 创建新的属性节点

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

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

document.createDocumentFragment( ); 创建文档片段节点

3.删除节点

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

element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值

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

4.修改节点

parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点

element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的目的

element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的目的

5.插入节点

parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点

parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点

element.setAttributeNode( attributeName );给元素增加属性节点

element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值

6.设置样式

ele.style.styleName = styleValue;设置ele元素的CSS样式

3.常见问题

DOM 和 HTML是一回事吗？

DOM 和 JavaScript什么关系？

书写细节

4.解决方案

DOM 和 HTML是一回事吗？

就像有些菜鸡把JQuery和Javascript的本质搞混一样（...反正不是我，虽然我也菜），DOM和HTML也完全不是一回事。

DOM是一个API，DOM是一个API，DOM是一个API（重要的话讲三遍）；

HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象。

DOM只提供编程接口，却无法实际操作HTML里面的内容。它是一个门，或者说是沟通用的桥梁。

但是，前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过script标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。

DOM 和 JAVASCRIPT什么关系？

Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。

书写细节（注意一下这个）

只有查找ID时element不加s，对菜鸡来说，要是不注意细节很可能会书写错误，导致一时半会儿找不到错误所在，因为DOM的ID捕获，在W3C定制的规矩里面，你只能获取第一个，虽然它捕获到了返回的也是一个对象。没办法，人家老大是这样写的。

getElementById

getElementsByClassName

5.代码实战

6.拓展思考

如何简化写法？

新人可能要思考一些时间，对于我们已经入门的来说通过jQuery即可简化写法。

7.参考文献

参考一:JavaScript高级程序设计

参考二:HTML DOM Document 对象

8.更多讨论

(1)鼠标事件有哪些？

1、onclick 事件——当用户点击时

2、onload 事件——用户进入

3、onunload 事件——用户离开，如刷新页面，提交表单，关闭窗口，关闭浏览器时触发（这个事件在Chrome和Opera浏览器里并不支持）

4、onmouseover事件——鼠标移入

5、onmouseout事件——鼠标移出

6、onmousedown事件——鼠标按下

7、onmouseup 事件——鼠标抬起

(2)如何获取相邻的节点？

neborNode.previousSibling :获取已知节点的相邻的上一个节点

nerbourNode.nextSlbling: 获取已知节点的下一个节点

(3)可以复制节点么？

cloneNode(true | false);复制某个节点

参数：是否复制原节点的所有属性

开始时间：2018.06.26

结束时间：2018.07.01

延期至07.05，错估难度。

有无延期风险： 有，我尽力。