JS学习（二）

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

一、DOM

文档对象模型简称为DOM。

其中所有内容（标签、属性等）都视为对象，这也就是为什么DOM称为文档对象模型。 DOM其实就是一个接口，这个接口对页面里的内容、样式等进行操作。 

二、获取页面元素

1、根据ID获取（返回的是对象）

2、根据标签名获取 （返回带有指定标签名的对象的集合）

通过document调用与通过父元素调用。

例子： 

 

  

3、html5新增

例子：

  

 三、事件

事件三要素：事件源、事件类型、事件处理程序。

如上图所示，当点击一个按钮弹出对话框时，事件源就是按钮，事件类型为点击，事件处理程序为弹出对话框。 

四、改变元素内容

 两者的主要区别在于：

1、innerText不识别html标签，而innnerHTML识别HTML标签，所以当修改内容时还要求对内容有格式要求那么最好选用innerHTML。

2、这两个属性都是可读写的，利用innerText读取某个标签内容，会自动去掉空格和换行，而利用innerHTML读取 时会显示标签内容里的其他标签。

常用是innerHTML，因为它是W3C标准，更为友好。

五、修改元素样式

 

 有以上两种方法修改样式，第一种在样式比较少，功能简单的情况下使用。当修改的样式过多，可以css写一个类专门修改样式，再利用JS的className获取该类即可。需注意的是className会覆盖原先的类，因此若要保留原先的类需在前面加上原先的类名。举例如下：

六、排他思想

如果有同一组元素，我们想要某一个元素实现某种样式时可以利用排他思想。

七、获取元素属性

1、获取元素属性值可以通过element.属性获得，但对于自定义属性index我们通过getAttribute获取。

2、设置元素属性值可以通过element.属性=‘值’修改，但对于自定义属性值通过setAttribute设置。

3、移除属性值通过removeAttribute

 八、节点操作

 所有元素文本都可以视为节点，DOM提供了一些方法获取节点元素。父元素的获取通过parentNode获取，子节点元素通过childNodes获取，但是不常用，因为该方法会获取Nodetype以及nodetext这些。我们通常只需要nodetype，因此一般用children获取子元素节点。

firstChild是第一个子节点，既可以是文本节点也可以是元素节点。lastChild是最后一个子节点，同样也是既可以是文本节点也可以是元素节点。

若想获得第一个元素节点，要通过方法firstElementChild，获得最后一个元素节点通过lastElementChild。（但是有兼容性问题）

 所以一般采用children[0]数组的形式获取第几个元素。值得注意的是最后一个元素获取为children[*.children.length-1]。

兄弟节点的获取 

  

 

创建节点并添加节点

记住添加节点之前一定要先创建

删除节点

 复制节点

 九、创建节点的效率（面试会问）

 

 总结：若利用拼接字符串的形式innerHTML会慢，但如果使用数组形式拼接，innerHTML会快一些。

十、注册事件

两种方式：传统方式和方法监听注册方式。传统就是一直在用的onclick方法，但是这种方法具有唯一性，只能绑定一种事件，如果再去绑定新的事件会覆盖之前的。

监听注册方式：

举例：

十一、删除事件

 事件对象：

 target与this的区别：

 举例：

 十二、阻止事件冒泡（常问）

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

这就会导致当对ul绑定事件，也对li绑定事件，当点击li时它执行事件后也会执行ul的事件。

这种情况就是当点击son的时候，father、document也会弹出。

 

 普通浏览器可通过stopPropagation停止传播。但是ie678因为兼容问题需要通过cancelBubble停止传播。

十三、事件委托（常问）

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

举例： 

十四、鼠标坐标