DOM
1.JavaScript 如何与网页交互的？
HTML是标记，而JavaScript是代码。它们是如何交互的呢？这是通过网页的表示,既文档对象模型（DOM）实现的。
1.2DOM的作用是什么
HTML是标记组成，让你能够描述一系列组成网页的嵌套元素。JavaScript是代码，用于对计算进行描述。HTML和JavaScript两种截然不同的技术是怎么走到一起的？它们根本就不是一路人，是不是就无法交流呢？
当然不是，因为它们之间有座桥：DOM。通过DOM，JavaScript能够与网页进行交流
JavaScript通过DOM修改元素时，实际上也在即时地修改网页内容。因此，当修改DOM内容时候，网页也随之变化。
1.3 什么是DOM
DOM中的D代表document,它是树的跟，js就是通过使用它来访问整个DOM
DOM中的O代表对象，既document对象，它的主要功能是处理网页内容。我们需要使用document对象的属性和方法
DOM中的M代表着“model 模型，”也可以说是Map地图，他们的含义都是某种事物的表现形式。就像一个模型火车代表着一辆真正的列车、一张城市街道图代表着一个实际存在的城市.DOM代表着加载到浏览器窗口的当前页面。浏览器提供网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。
既然是地图，就必须有诸如方向、等高线和比例尺之类的图例.要想看懂和使用地图，就必须知道这些图例的含义和用途，这个道理同样适用于DOM。要想从DOM获得信息，必须把各种表示和描述文档的“图例”弄明白
在每个DOM（文档对象模型）的顶部都是一个document对象，它下面是一棵树，其中包含由HTML标记中各个元素构成的树枝树叶。
1.4 DOM是如何来的
DOM是浏览器在加载网页时创建的。
浏览器加载完网页、显示网页的所有内容并生成了表示网页的DOM。
1.4.1 DOM创建过程是怎么样的
- 在浏览器加载网页时，浏览器不仅对HTML进行分析并将其渲染到显示器中，还创建一系列表示标记的对象，这些对象存储在DOM中。我们称之为文档对象模型，简称DOM。
- JavaScript代码可以通过与DOM交互来访问元素及其内容，还可使用DOM来创建和删除元素
- JavaScript代码修改DOM时，浏览器将动态地更新网页，让用户能够在网页中看到新内容。
1.4.2 如何使用DOM表示网页
DOM把一份文档表示为一棵树，更具体地说是，DOM把文档表示为一颗家谱树。家谱树的典型用法时表示一个人类家族的谱系，并使用parent(父)、child（子）、sibling(兄弟)等记号表明家族成员之间的关系.利用简单的家谱关系记号，我们可以把个元素之间的关系简明清晰地表达出来。
有了DOM之后，js就有了通过DOM查看和修改网页的能力
2.元素对象的属性和方法
2.1 JavaScript 从DOM获取的到底是什么？
使用getElementByxxx从DOM获替换取元素时，得到的是一个元素对象，你可以用它来读取、修改或替换元素的内容和特性。神奇之处在于，当你修改元素时，所作的修改也将反映到网页中。
1 <body> 2 <p id="p1" >使用JavaScript获取id为p1的元素</p> 3 <script type="text/javascript"> 4 var elem=document.getElementById("p1"); 5 </script> 6 </body> 7 </html>
2.2元素对象的属性和方法
对象也有属性和方法。就元素对象而言，我们可以使用其属性和方法来读取和修改元素
2.2.1 方法 ：getelement getatribute setattribute
2.2.2 属性 innerHTML
2.2.3 这些属性和方法使得js可以对元素对象执行的一些操作。
- 从DOM中获取元素
- 创建元素并将其加入DOM中
- 从DOM删除元素
- 遍历DOM中的元素
通过DOM修改元素时，实际上你也在即时地修改网页内容。因此，当你修改DOM内容时候，网页也随之变化。
2.3 HTML DOM到底是什么
是HTML和JavaScript之间的桥梁，是HTML的标准对象模型和编程接口。它定义了：
- 作为对象的HTML元素
- 所有HTML元素的属性
- 访问所有的HTML方法
- 所有的HTML元素事件
通过HTML Dom,JavaScrip能够访问和改变HTML文档中的所有元素
总之，HTML DOM是关于如何获取、更改、添加和删除HTML元素的标准。是标准对象模型和编程接口
所以我们的学习重点就从javaScript能做什么编程——>学习元素对象的属性和方法
2.4 javaScript能够做什么？
- 改变页面上的所有HTML元素
- 改变页面上所有的HTML属性
- 改变页面中所有的CSS样式
- 删除已有的HTML元素和属性
- 添加新的HTML元素和属性
- 对页面中已有的HTML事件做出反应
- 能在页面中创建新的HTML事件
3.事件处理函数/响应式代码
在javaScript中，绝大多数代码是事件响应式的。用户单击网页、通过网络收到数据、定时器到期、DOM发生变化等。事实上，在浏览器中，幕后始终有事件在不断发生。我们需要学习如何编写响应式事件的代码以及为何要这么做。
3.1 为什么要把js元素放在body结束标签之前
因为dom是浏览器加载网页是创建的，如果js代码在前，body中的元素在后。浏览器还未创建dom,就不可能只从代码
因为在处理DOM的时候，确保代码在网页完全加载后再执行至关重要，否则，代码执行时，DOM很可能还未创建。
3.1.2如何修复这种问题呢？
可将代码移到<body>元素的末尾
另一种更简单的确保代码再正确的时候运行，就是让浏览器再加载网页并创建DOM后再执行代码。
做法：首先创建一个函数，其中包含要在网页加载完毕后执行的代码
第二步：将这个函数赋值给对象window的属性onload
1 function init(){ 2 var elem=document.getElementById("p1"); 3 p1.innerHTML="使用元素对象的方法innerHTML改变元素文本"; 4 } 5 window.onload=init;
3.1.3上面的代码有什么作用呢？
对象window将调用你赋给其属性onload的函数，但仅在网页加载完毕之后才这么做。这让程序员能指定在网页加载完毕之后将要执行什么样的代码
再深入研究以下onload的工作原理，因为它使用了一个很常见的JavaScript编码模式
给发生事件的对象提供一个函数，，事件发生之后，这个对象将通过调用这个函数来通知你
3.2为什么JavaScript中绝大多数代码是响应式的
以响应事件的方式组织代码是另一种代码编写方式。要以这种方式编写代码，需要考虑可能发生的事件以及代码应该如何响应这些事件。在计算机科学中，通常说这种代码是异步的，因为我们编写的代码仅在相应的事件发生时才会被调用。这种代码编写方式也改变了我们看待问题的角度，不在逐步的编写代码实现算法，而是将处理事件的众多处理程序整合起来，构成一个应用程序。
3.3 如何编写响应式代码
给发生事件的对象提供一个函数
事件发生之后，这个对象将通过调用这个函数来执行需要的操作
- 那个元素
- 触发了什么事件
- 要如何响应
3.4 事件对象的工作原理
文档对象模型事件发生时，将向事件处理程序传递一个事件对象。事件对象包含一些有关事件的常规信息。如事件是那个元素出发的，事件是何时发生的。另外，还将获得有关事件的特有信息。例如：用户单击鼠标时，你将获得单击位置的坐标。
事件对象的一些常用属性
| target | 它存储了一个引用，将指向触发事件的元素 |
| type | 字符串，如’click‘或”load“,指出发生的是那种事件 |
| touches | 在触摸设备上，确实使用多少根手指来触摸屏幕 |
| keyCode | 用户刚按下了那个键 |
| timeStamp | 事件是何时发生的 |
以上
