目录
前言
之前在学JavaScript的时候我们知道它是由 ECMAScript 、 DOM 、 BOM 组成的，ECMAScript是JavaScript语法，也是JavaScript的基础，DOM是页面文档对象模型，BOM是浏览器对象模型，DOM和BOM都是Web API。
那么 Web API 是什么呢？在了解前我们先来看看 API 是什么。
API是应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无需访问源码、无需理解其内部工作机制细节，只需要知道如何使用即可。例如，调起手机的摄像头拍摄画面。
了解API之后，Web API就很好理解了。Web API是主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API。例如，console对象、document对象、window对象。
document.title = '设置新标题'; // 设置页面标题
console.log(document.title); // 获取页面标题
document.write('<h1>网页内容</h1>'); // 将字符串写入页面下面正式开始介绍DOM。
一、DOM简介
W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中，诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面，都离不开DOM。
DOM，全称是Document Object Model，文档对象模型，DOM是HTML和XML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中该对象进行访问，从而改变文档的结构、样式和内容。
通俗来说，DOM就是浏览器为JavaScript提供一系列接口，通过这些接口我们可以操作web页面。我们也可以得到这样一个概念：DOM API（web或XML页面）= DOM + JS（脚本语言）。
二、DOM树
DOM模型将整个文档（HTML和XML文档）看成一个树形结构，我们也可以称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。如下图。
三、节点基础与操作
3.1 DOM节点
我们可以从上面的DOM树看出，在HTML中，一切都是节点。整个HTML文档就是一个文档节点，所有的节点都是Object。
- 元素节点：HTML标签，如<body><head><p><a>等；
- 文本节点：标签中的文本，也即元素节点内包含的文本，如<p>TextNode</p>中的TextNode就是文本节点，文本节点是叶节点（树结构的最后一个节点）；
- 属性节点：标签的属性，如<a href=""></a>中href就是属性节点。
3.2 节点层级
DOM根据HTML中各节点的不同作用，可将其分别划分为元素节点、文本节点和属性节点。
节点之间的层级关系如下：
- 根节点：<html>标签是整个文档的根节点，有且仅有一个
- 父节点：指的是某一个节点的上级节点
- 子节点：指的是某一个节点的下级节点
- 兄弟节点：两个节点同属于一个父节点
获取父级节点
obj.parentNode //obj是一个DOM对象获取子级节点
childNodes //获得当前元素的所有子节点的集合，该集合为即时更新的集合
children /*例：ul.children，children是一个可读的属性，返回所有子元素节点。children只返回子元素节点，其余节点不返回，目前各大浏览器都支持该属性，在实际开发中推荐使用children。*/
firstChild //返回第一个子节点
lastChild //返回的是最后一个子节点
firstElementChild //返回第一个子元素节点
lastElementChild //返回最后一个子元素节点获取兄弟节点
nextSibling //获得下一个兄弟节点，
previousSibling //获得上一个兄弟节点
nextElementSibling //返回当前元素的下一个兄弟元素节点
previousElementSibling //返回当前元素的上一个兄弟元素节点3.3 创建节点
//创建一个DOM片段
document.createDocumentFragment();
//创建一个元素节点
document.createElement();
//创建一个文本节点
document.createTextNode();
//创建属性节点
document.createAttribute();
在DOM节点创建中最常用的是 document.createElement() 和 document.createTextNode() 。
3.4 获取HTML元素
元素查询的API返回结果是DOM节点或者DOM节点的列表。
根据id获取元素：由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。
document.getElementById('id');根据标签名获取元素：可以通过document对象获取元素和通过element对象获取元素。
document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');根据name获取元素：通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。
document.getElementsByName('name名');HTML5新增的获取方式：
// 返回当前文档中第一个类名为 "myclass" 的元素
document.querySelector(".myclass");
// 返回一个文档中所有的class为"note"或者 "alert"的div元素
document.querySelectorAll("div.note, div.alert");
//通过类名来获得某些元素集合。
document.getElementsByClassName( );3.5 DOM更改
添加、删除子元素
//将一个节点添加到指定父节点的子节点列表末尾
appendChild();替换子元素
//将一个节点添加到父节点的指定子节点前面
insertBefore(child, 指定元素)插入子元素
//删除节点，该方法从DOM中删除一个子节点，返回删除的节点
removeChild(child)3.6 复制节点
obj.cloneChild(true/false) //返回调用该方法的节点的一个副本
如果参数为空或false，则是浅拷贝，即只复制节点本身，不复制里面的子节点；如果括号参数为true，则是深拷贝，即会复制节点本身及里面所有的子节点。
关于深拷贝和浅拷贝的内容可以看 JavaScript——浅拷贝和深拷贝
四、事件基础
事件概述
事件是指可以被JavaScript侦测到的行为，是一种 “ 触发-响应 ” 的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。
事件三要素
事件三要素是指 事件源 、 事件类型 和 事件处理程序 这3部分。
- 事件源：触发事件的元素（谁触发了事件）
- 事件类型：如 click 单击事件（触发了什么事件）
- 事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）
五、操作元素
5.1 操作元素内容
在前面的内容中已经讲解了获取元素的几种方式，接下来将利用DOM提供的属性实现对元素内容的操作。
/*设置或返回元素开始和结束标签之间HTML。包括HTML标签，同时保留空格和换行*/
element.innerHTML
/*设置或返回元素的文本内容，在返回的时候会去除HTML标签和多余的空格、换行，在设置的时候会进行特殊字符转义*/
element.innerText
/*设置或者返回指定节点的文本内容，同时保留空格和换行*/
element.textContent
5.2 操作元素属性
HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。
步骤如下：
①编写HTML结构代码
②获取元素
③注册事件处理程序
5.3 操作元素样式
操作元素样式有两种方式，一种是操作style属性，另一种是操作className属性。
- 操作style属性
- 元素对象.style.样式属性名
- 注意：样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线“-”，并将半字线后面的英文的首字母大写。
- 操作className属性
- 元素对象.className
- 注意：如果元素有多个类名，在className中以空格分隔。
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
