JavaScript之DOM章节

DOM

前面学习的运算符、数组、函数、对象、内置对象都是JS的基础知识点，都是为了后面的WebAPI做准备的，到 了API才真正开始JS之旅…看到对象我都以为我已经了解一大半了，谁知道只是开头呢…人生真是大起大落啊~
首先，什么是API呢?其实API就是程序员的一个工具、一个接口，能快速有效的帮我们完成所需的工作。就跟内置对象一样，我们不需要知道里面的操作、组成，直接调用就行了。WebAPI则是面向浏览器的一个接口，对浏览器交互。JS的WebAPI中，我们主要需要学习DOM和BOM
什么是DOM呢？
DOM就是文档对象模型，对文档里面的元素进行操作。
文档:一个页面就是一个文档。
元素：页面里的所有标签就是元素，DOM中用element表示，element英文就是元素的意思
节点：网页中所有的内容都是节点。如元素、注释、文本、属性。用node表示。
为什么要使用DOM呢？
由前面我们可以知道，DOM是面向文档对象的模型，简单的说就是对一个页面进行操作。使用DOM不仅可以让页面的H5C3的设置更加完善（因为DOM中可以修改这些设置），还可以赋予文档节点“生命”,即让页面中的元素活跃起来。就好比点击一个图片，会弹出一些放大、跳转到另一个页面等效果，使页面变得更加生动、完美~
如何使用DOM？
因为是对页面的操作，所以等一个页面的静态基本设置好了开始JS的DOM设置。一个良好的页面除了内容的填充，更重要的当然是造型的设计啦，也就是操作页面中的元素。我们可以通过document.querySelector(‘元素’)的方法来获取页面中的元素（获取过来的都是元素对象，父节点则是以伪数组的形式存在）为了美化获取过来的元素，我们把获取过来的元素作为事件源（就赋予一个新的名字叫sh），然后我们就可以给hs添加事件了，hs.onclick就相当于给hs添加了一个点击事件，onclick意为点击的意思，现在我们就有了事件源和事件，然后我们需要添加事件处理程序，通俗的说就是这样做了会发生些什么？我们传统的方法是通过匿名函数来实现。hs.onclick = function(){};这样，一个完整的事件就能发生了。
当然，上面讲的只是最初的一小部分，对页面中的元素我们可以进行增、删、改，其中也包括了对元素属性的一些修饰。
增:ducument.createElement(‘元素’)、document.innerHtml这两种方法都能给页面添加一些原来没有的属性。 不过document.innerHtml在通过数组而不是字符串连接的方式大量增加属性时的效率更加高
删：node.removechild(child)目前我只接触到了一种删除父节点里面的子节点。
改：元素.style可以直接改获取过来元素的样式，或者元素.属性可以给元素的属性重新赋值，因为JS生成的style相当于是行内的样式，所有权重更高。元素除了自己带有的属性之外，程序袁也可以人为的给之添加属性，一般规定人为添加的属性都是以data- 开头。
文本内容我们可以通过innertext、innerHTML进行修改，不过innerText里面无法保存空格、标签等，因此inner HTML会更加的实用

DOM事件流
DOM中存在许多不同的事件，根据人的需求而定。但是触发事件时一定会存在传播过程，冒泡传播或是捕获传播。
捕获传播：触发一个事件时从外面的元素往里面的元素传，存在相同的事件会按顺序触发（即使有的元素你没有触发条件）。就好比程序猿太苦了，你想学挖掘机。肯定是先找中国、再找山东，然后找南翔！捕获传播就存在一个类似的过程，由外向里。
冒泡传播：触发一个事件时从里面的元素往外面的传，存在相同的事件会按顺序触发（即使有的元素你没有触发条件）。
说到这我不得不说一个新型的获取元素的方法eventarget.addEventListener(type,listener[，useCapture]） type:事件类型字符串，去掉介词，例如on。listener事件处理函数,useCaptures可选参数，一个默认值false,可以手动修改为true。
useCapture的值即可确定冒泡排序和捕获排序，它们有的时候会给人意想不到的惊喜哦~