DOM知识梳理

 API

概念

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，我们只要学会灵活的使用这些工具即可。

Web  API

概念

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

API 和 Web  API 总结

1. API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2. Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3. Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
4. 学习 Web API 可以结合前面学习内置对象方法的思路学习

DOM 介绍

什么是DOM

文档对象模型：是 W3C组织推荐的处理[可扩展标记语言（html或者xhtml）的标准编程接口

DOM树
文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面
文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

获取元素

根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

H5新增获取元素方式

根据类名返回元素对象集合：document.getElementsByclassName('类名')
根据指定选择器返回第一个元素对象：document.querySelectorAll（'选择器'）
返回的是一个集合

获取特殊元素

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

事件基础

概述：触发--- 响应机制

事件三要素

- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

执行事件的步骤

获取事件源
绑定事件
添加事件处理程序（采取函数赋值形式）

操作元素

改变元素内容（获取或设置）

element.innerText——会去除空格和换行，不会识别html
element.innerHTML（推荐使用）——会保留空格和换行，会识别html

常用元素的属性操作

格式：元素对象.属性名 = 值
例：img.src=‘images/zxy.jpg’

表单元素的属性操作

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

样式属性操作

通过操作style属性

格式：元素对象.style.样式属性 = 值;
样式属性是采取驼峰命名法 如：fontSize
产生的行内样式 css权重较高

通过操作className属性
格式：元素对象.className=‘值’；
修改样式较多时使用
会覆盖原先的类名（导致原先类名内的样式不起用）
如果想要保留原先的类名，就在使用是选择用多类名的方式 元素对象.className=‘原来的类名 更改元素的类名’

自定义属性操作

获取属性值
element.属性

获取的是内置元素属性值
element.getAttribute('属性')；
主要是获取自定义的属性

设置属性值
element.属性='值'
设置内置元素属性值

element.setAttribute('属性'，‘值’)；
主要是设置自定义的属性

移出属性
element.removeAttribute('属性'，‘值’)；
主要是设置自定义的属性

H5规定自定义属性data-开头作为属性名并赋值
H5新增：element.dataset.inex 或者 element.dataset['index']

节点操作

概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示
节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
元素节点 nodeType 为1  属性节点为2 文本节点为3（文本节点包含文字、空格、换行等）

节点层级

利用 DOM 树可以把节点划分为不同的层级关系
常见的是父子兄层级关系

父级节点

node.parentNode
返回某节点的父节点，返回的是最近的一个父节点
如果没有指定的父节点，返回的值是null

子节点

childNodes 所有的子节点 包含 元素节点 文本节点（不提倡使用）
firstChild 第一个子节点  找不到返回null
lastChild 最后一个子节点 找不到返回null
children获取所有的子元素节点 也是我们实际开发常用的
firstElementChild 第一个元素子节点  找不到返回null
lastElementChild 最后一个元素子节点 找不到返回null
children[0]：第一个子元素节点
children[parentNode.children.length - 1]：最后一个子元素节点

兄弟节点

nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等 找不到返回null
previousSibling 得到上一个兄弟节点 找不到返回null
nextElementSibling 得到下一个兄弟元素节点 找不到返回null
previousElementSibling 得到上一个兄弟元素节点 找不到返回null

创建节点

document.createElement（’tagName‘） 动态创建元素节点
tagName 指html元素

添加节点

node.appendChild(child)
node 父级  child 是子级 后面追加元素
node.insertBefore(child, 指定元素)指定节点前面
我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素

删除节点

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点

复制（克隆）节点

node.cloneNode()
括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
括号为true 深拷贝 复制标签复制里面的内容
I9以上才支持

创建元素的三种方式

document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
innerHTML 创建元素
创建多个元素效率更高（采用数组形式拼接，不要拼接字符串），结构稍复杂
document.createElement() 创建元素
创建多个元素效率稍低，结构更清晰