前端学习开发之【DOM与BOM】

Web API 是浏览器提供的操作浏览器功能BOM和页面元素DOM的API。

DOM

Document Object Model 文档对象模型，一组可以改变网页内容、样式、结构的接口。

文档：页面；
元素：标签；
节点：内容 node
以上都可以当作对象。

1.获取元素

ID：getElementById()
返回元素对象，可以使用console.dir打印；

标签名：getElementsByTagName()
以伪数组的形式返回元素集合，可以遍历访问

H5新增：
类名：getElementsByClassname()
选择器：querySelector()或querySelectorAll()
前者返回第一个对象，后者返回全部。

获取body元素：document.body
获取html元素：document.documentElement

2.事件

事件：触发响应的机制；包含事件源（被触发的对象）、事件类型（如何触发）、事件处理程序（函数赋值）

执行事件过程
1.获取事件源 2.注册事件 3.添加事件处理程序。

3.操作元素

修改元素样式：
修改元素样式时，样式少可以直接使用element.style，如果元素样式多可以将样式写入一个类中，然后使用classname进行添加类名。

排他思想：
如果一组元素，想要某一个元素实现某种样式，需要排他思想：先清除其他样式，再设置自己的样式。

获取属性值：

• element.属性 ：获取内部属性值
• element.getAttribute('属性')：获取自定义属性。

修改属性值：

• element.属性='值'
• element.setAttribute('属性')：设置自定义属性的值。

移除属性：
element.removeAttribute('属性')

自定义属性：

为了保存并使用数据。H5规定自定义属性使用data-开头作为属性名并赋值。
H5新增获取自定义属性：element.dataset.属性

4. 节点操作

网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。HTML DOM树中的所有节点都可以通过JS来访问，所有HTML元素均可以被修改、创建、删除。

一般地，节点有nodeType节点类型、 nodeName节点名称、nodeValue节点值三个基本属性。

父节点：
node.parentNode：属性可以返回某节点的最近一个父节点，若无则返回空。
子节点：

• node.childNodes：返回所有子节点，包含文本节点。
  若只想获取元素节点：判断节点类型是否为1。
• node.children：获取子元素节点。
• parent.firstChild：第一个子节点；
• parent.lastChild：最后一个子节点；
• parent.firstElementChild：第一个子元素节点；（IE9支持
• parent.lastElementChild：最后一个子元素节点。
  兄弟节点：
• node.nextSibling：下一个兄弟节点；包含文本节点
• node.previousSibling：前一个兄弟节点；
• node.nextElementSibling：下一个兄弟元素节点；（IE9支持
• node.previousElementSibling：前一个兄弟元素节点。

创建节点：

• document.createElement('tagName')：动态创建节点；
• node.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾；
• node.insertBefore(child,指定元素)：添加到父节点指定子元素前。
  删除节点：
• node.removeChild(child):删除一个子节点，返回删除的节点。
  复制节点：
• node.cloneNode():返回调用该方法的节点的一个副本。括号为空或者为false，则浅拷贝，不复制子节点；括号里为true，则复制子节点，深拷贝。

动态创建标签：

• document.write()：重新绘制一个页面，只有write里的元素；如果页面文档流加载完毕，再调用这句话会导致页面重绘；
• innerHTML：在该元素里加入子元素；将内容写入某个DOM节点，不会导致页面全部重绘；采用数组方式拼接，效率最高；
• document.createElement()：创建后再使用appendChild添加到子元素尾部。

5.总结DOM

1. DOM，文档对象模型，是处理可扩展标记语言的标准编程接口；
2. 使JS操作HTML；使html形成dom树，包含文档、元素、节点；获得的dom元素是一个对象；
3. DOM主要是对元素进行创建、增、删、改、查、属性、事件；
4. 创建：document.write、innerHTML、createElement；
5. 增：appendChild、insertBefore；
6. 删：removeChild;
7. 改：改属性、内容、元素、样式；
8. 查：搜索器、节点操作；
9. 属性操作：setAttribute、getAttribute、removeAttribute;
10. 事件：获取元素、注册、 添加事件处理程序。

6.事件高级

注册事件或绑定事件：

传统：

• 利用on开头的事件；
• 注册事件唯一：同一个元素同一个事件只能设置一个处理函数，多个则覆盖。

方法监听注册：

• addEventListener()， IE9之前使用attachEvent()；

• 同一个元素同一个事件可以添加多个监听器。
  
  删除事件或解绑事件：

• eventTarget.onclick=null;

• eventTargrt.removeListener(type,listener[],useCapture)：不可使用匿名函数。

DOM事件流：
事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即为DOM事件流。

addEventListener第三个参数为true，则处于捕获阶段，反之false或空则冒泡，表示事件执行顺序。

事件对象：
事件对象，事件一系列相关数据集合，在监听函数的形参中；事件对象只有在事件有了后才会存在；系统自动创建；可以自己命名。IE678使用window.event。

e.target返回触发事件的对象或元素，this返回绑定事件的对象；

阻止默认行为：

• 方法监听：e.preventDefault；
• 传统：ereturnValue或return false。
  阻止冒泡：
• e.stopPropagation；
• e.cancelBubble=true。

事件委托：
事件委托也称为事件代理。不给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

只操作一次DOM，提高效率。

鼠标事件：

禁止鼠标右键菜单：

禁止选中：

鼠标事件：

键盘事件：

keypress：不能识别功能键，keydown：可以识别功能键。

BOM

BOM浏览器对象模型，browser object model，它提供了独立于内容而与浏览器窗口进行交互的对象，核心是window。

1.window常见事件

窗口加载事件

load等页面加载完全，包含页面dom元素、图片、flash、css等再执行function；
DOMContentLoaded是DOM加载完毕，不包含上述，执行速度更快。

调整窗口大小

2.定时器

this指向
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁。

• 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
• 方法调用中谁调用this指向谁
• 构造函数中this指向构造函数实例

3.JS执行机制

JS语言是单线程语言，同一时间只能做一件事。但这样如果JS执行时间会导致页面渲染不连贯，导致页面渲染加载阻塞。
允许JS脚本创建多个线程，于是出现了同步和异步。
同步：一个一个做；异步：同时做。

同步：
同步任务都在主线程上执行，形成一个执行栈。

异步：
JS的异步通过回调函数来实现。一般异步有三种类型：
1.普通事件，如点击；2. 资源加载：load、error；3.定时器。
异步任务相关回调函数放入消息队列。

执行机制：

1. 先执行执行栈中的同步任务；
2. 将回调函数放入任务队列中；
3. 一旦执行栈中所有同步任务执行完毕，再按次序读取任务队列中的异步任务，进入执行栈再执行。

4.location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，也可以用于解析URL。

URL：统一资源定位符（Uniform Resource Locator，URL），是互联网上标准资源的地址，指出文件位置以及浏览器该如何处理它。

5.navigator对象

6.history对象