DOM笔记

Web APIs

在JavaScript中的DOM(页面文档对象模型)和BOM（浏览器对象模型）属于Web APIs

API

是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又不需要访问源码，或理解内部工作机制的细节。

API 是给程序员提供的一种工具，以便于能轻松的实现想要完成的功能

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

Web API 主要是针对于浏览器的接口，
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）

DOM

DOM（文档对象模型 Document Object Model），是W3C组织推荐的处理可扩展标记语言的标准（HTML或者XML）编程接口； 可以通过DOM接口改变页面的内容、结构和样式；

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

console.dir 打印我们放回的元素对象，更好的查看里面的属性和方法。

DOM获取过来的是一个对象（object）。所以称为文档对象模型。

DOM 获取元素

可以通过ID获取；通过标签名来获取，通过HTML5新增的方法获取；特殊元素获取；
element 属性：获取内置对象属性值（元素自带的属性）

ID获取

ID获取 document.getElementById("demo"); 通过Id 获取元素

标签名来获取

getElementsByTagName  
get  Elements By Tag Name 通过标签名获取元素集合

getElements 获取到的都是 伪数组
得到的是一个对象的集合，需要使用遍历来进行操作里面的元素；
得到的元素是动态的；

HTML5新增的方法

document.querySelector
返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav

document.querySelectorAll()返回指定选择器的所有元素对象集合

自定义属性

element.getAttribute('属性','值');

主要获取的是自定义属性（标准）我们程序员自定义的属性

移除属性 removeAttribute('属性') 

自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

H5规定自定义属性data- 开头作为属性名并且赋值

获取：1.兼容性获取：element.getAttribute('属性') 

H5新增element.dataset.indext或者使用element.dataset[‘indext’] ie 11才开始支持
如果自定义属性中有多个 - 连接的单词，我们需要驼峰命名法来获取
a-b aB

改变元素的内容

innerHTML 获取内部的HTML 可以设置内部的HTml 如果是符合标签规则的文本会变成标签 W3C标准

innertext 获取内部的文本内容 html标签会被忽略 可以设置内部的文本 即使是符合标签规则的文本也会变成纯文本
textcontent 获取内部文本 和 intertext 存在浏览器支持问题 （非标准）

读取里面的内容时， innerHTML会去除空格和换行
innertext 保留空格和换行的

操作属性：

获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值

表单元素的属性操作
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

样式属性操作

element.style 行内样式操作
如果样式比较少，或者功能简单的情况下进行使用

element.className 类名样式操作

方式1：

通过操作style属性 JS里面的样式采取的是驼峰命名法，比如：fontSize、backgroundColor JS修改style
样式操作，产生的是行内样式，行内样式的权重比css中的样式高一些

利用for循环	设置一组元素的精灵背景
1.精灵图图片排列必须要有规律的
2.核心思路：利用for循环，修改精灵图片的背景位置 background-position

方式2：

通过操作className属性

结论：

如果样式比较少，或者功能简单的情况下进行使用element.style 这时候就需要className来给标签添加或者修改类名
来修改元素的样式，使用于样式较多或者功能复杂的情况，className 会直接修改元素的类名，会覆盖掉原来的类名 class是个保留字

排他思想：

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式
（留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己

节点操作

获取元素的两种方式：

1.DOM提供的方法获取元素

document.getElementByld();
document.getElementsByTagName();
document.querySelector() 等 逻辑性不强、繁琐

2.利用节点层次关系获取元素

a)利用父子兄节点关系获取元素 b)逻辑性强，但是兼容性较差
一般节点至少有节点类型（nodeTapy）、节点名称（nodeName）和节点值（nodeValue）这三个基本属性
元素节点的nodeTapy 为1； 属性节点的nodeTapy为2； 文本节点的nodeTapy为3 （文本节点包含了空格、换行、文字）

父级节点：

node.parentNode 

parentNode可以返回某个节点的父节点，是最近的一个节点；如果没有父节点，那么就返回为NULL；

子节点

所有子节点 parentNode.childNodes（标准的）

包含了所有的子节点(包含了元素节点，文本节点)；需要进行处理才能得到元素节点；

子元素节点parentNode.children（非标准的） 

是一个只读属性，放回所有的子元素节点。它只返回所有的子元素节点，其余的节点不会返回；虽然是非标准的，但是却得到了各个浏览器的支持；

第一个元素节点(firstElementChild)和最后一个子元素节点（lastElementChild），但是有兼容问题，只有ie9上才支持
实际开发写法：

console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);

兄弟节点：

nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
previousSibling
nextElementSibling 得到下一个兄弟元素节点有兼容问题，只有ie9上才支持
previousElementSibling 

创建节点

动态创建

document.createElement(‘li’) 这些元素是不存在的，是根据我们的需求动态生成的，

添加节点

node.appendChild(child) 这是将一个节点添加到指定节点的子节点列表的末尾。

node.insertBefore(child，指定元素) 将一个节点添加到指定节点前面。

节点删除

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
阻止连接跳转需要添加Javascript:void(0);或者Javascript:;

克隆节点

1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

三种动态创建元素的区别

document.write 是直接写入页面的内容流，但是文档执行完毕，则他会导致页面重绘
inner.innerHTML 是将内容写入某个DOM节点，不会导致页面重绘；innerHTML创建元素的效率更高（不要使用拼接字符串的方法；使用数组形式拼接），结构稍微复杂
createElement 创建多个元素效率稍微低一点点，但是结构更清晰；

DOM事件流

dom 事件流 三个阶段

js代码中只会执行一个阶段；
onclick和attachEvent只能得到冒泡阶段
有些事件是没有冒泡的：onblur、onfocus、onmouseenter、onmouseleave

捕获、冒泡、目标阶段

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document