API 应用程序编程接口，是一些预定义的函数，开发者无需知道其内部的具体实现代码，只需要知道其功能是什么直接调用即可。
Web API 是浏览器提供的一套操作浏览器功能和页面元素的API (DOM和BOM)，主要用于做页面交互效果。
DOM 文档对象模型
是w3c组织推荐的处理可扩展标记语言的标准编程接口，通过这些DOM接口可以改变网页内容、结构和样式。
DOM树
文档 document 一个网页就是一个文档
元素 element 页面中所有标签都是元素
节点 node 网页中所有内容都是节点(标签、属性、文本、注释等)
获取页面元素
getElementById() // 通过id值获取，返回元素对象
getElementsByTagName() // 通过标签名获取,返回元素对象的集合，以伪数组的形式存储
getElementsByClassName() // h5新增，通过类名获取，返回元素对象集合
querySelector('选择器') // h5新增，通过选择器获取，返回指定选择器的第一个元素对象
querySelectorAll('选择器') // h5新增，通过选择器获取，返回指定选择器的所有元素集合
获取特殊元素
document.body // 获取body元素
document.documentElement // 获取html元素
事件基础
事件：触发 - 响应 的一种机制，是一种可以被JS侦测到的行为。
事件三要素：事件源、事件类型、事件处理程序。
执行事件的三步骤：获取事件源、注册事件(绑定事件)、添加事件处理程序（采用函数赋值的形式）
常见的鼠标事件：onclick、onmouseover、onmouseout、onfocus、onblur、onmousemove、onmouseup、onmousedown
改变元素内容
element.innerText // 不识别html标签，去除换行和空格
element.innerHTML // 识别html标签，保留换行和空格
修改元素属性
element.属性名 // 普通元素属性 src href id alt title等 表单元素属性 type value checked selected disabled等 , 只能获取到元素内置属性
element.getAttribute('属性名') // 可以获取到自定义属性
element. setAttribute('属性名','值') // 设置自定义属性值
element.removeAttribute('属性名') // 移除自定义属性值
自定义属性：主要用于保存与使用数据，有些数据可以保存到页面中，而不需要写入数据库里。h5规定自定义属性以data-开头。element.dataset.自定义属性名 或 element.dataset['属性名'] 也可以获取到自定义的属性值 ,如果自定义属性名使用了多个-分隔，获取时使用驼峰名称。
修改样式属性
element.style.样式名称 // 行内样式，样式名称采用驼峰命名法
element.className // 类名样式 , 会覆盖原先的类名
案例：全选与全不选
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选与全不选title>
<style>
table,
th,
td {
/*细边框*/
border-collapse: collapse;
border: 1px solid #ccc;
}
table {
margin: 100px auto;
width: 300px;
}
tr {
line-height: 30px;
}
/*表头*/
#t_th tr {
background: #0099CD;
color: #fff;
font-size: 14px;
}
/*tbody中的行*/
#t_tb tr {
background: #EFF0EF;
color: #7E6467;
font-size: 12px;
}
/*tbody中的单元格*/
#t_tb tr td {
padding-left: 10px;
}
/*鼠标移入颜色*/
.overColor {
background: #F8FAF8!important;
}
/*鼠标移出颜色*/
.outColor {
background: #EFF0EF!important;
}
style>
head>
<body>
<form action="#" method="post">
<table>
<thead id="t_th">
<tr>
<th><input type="checkbox" id="cbAll" />th>
<th>商品th>
<th>价格th>
tr>
thead>
<tbody id="t_tb">
<tr>
<td><input type="checkbox" />td>
<td>iPhone8td>
<td>800td>
tr>
<tr>
<td><input type="checkbox" />td>
<td>iPad Protd>
<td>5000td>
tr>
<tr>
<td><input type="checkbox" />td>
<td>iPad Airtd>
<td>2000td>
tr>
tbody>
table>
form>
<script>
/* 鼠标移入背景变色 */
// 获取tbody中的所有行
var trs = document.getElementById('t_tb').getElementsByTagName('tr');
// 为tbody中所有行添加鼠标移入和移出事件
for (var i = 0; i < trs.length; i++) {
// 绑定鼠标移入事件
trs[i].onmouseover = function() {
this.className = 'overColor';
}
// 绑定鼠标移出事件
trs[i].onmouseout = function() {
this.className = 'outColor';
}
}
/* 全选与全不选 */
// 获取全选复选框
var cbAll = document.getElementById('cbAll');
// 获取tbody中所有复选框
var cbs = document.getElementById('t_tb').getElementsByTagName('input');
// 为全选复选框添加点击事件
cbAll.onclick = function() {
// 如果全选复选框选中，则tbody中所有复选框也会跟着选中。
// 如果全选复选框未选中，则tbody中所有复选框也会跟着未选中。
// 总结：当点击全选复选框时，tbody中的所有复选框状态应该是与全选复选框状态是一致的
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = this.checked;
}
}
// 为tbody中所有复选框添加鼠标点击事件
for (var i = 0; i < cbs.length; i++) {
cbs[i].onclick = function() {
// 默认假设全选复选框为选中状态
var flag = true;
for (var j = 0; j < cbs.length; j++) {
// 如果tbody中复选框有未选中的状态，此时将全选按钮状态也设置为未选中
if (cbs[j].checked === false) {
flag = false;
// 为了提高代码执行效率，只要发现有一个是未选中状态即可跳出循环
break;
}
}
// 更新全选复选框状态
cbAll.checked = flag;
}
}
script>
body>
html>
案例：选项卡
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡title>
<style>
.box {
margin: 100px auto;
width: 500px;
}
.box ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #ccc;
background: #EFF0EF;
overflow: hidden;
}
.box ul li {
float: left;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
}
.tab_con div {
display: none;
}
.current {
color: #fff;
background: #C71522;
}
style>
head>
<body>
<div class="box">
<div class="tab_list">
<ul>
<li class="current">商品详情li>
<li>商品评价li>
<li>专享服务li>
ul>
div>
<div class="tab_con">
<div class="item" style="display:block">详情内容div>
<div class="item">评价内容div>
<div class="item">服务内容div>
div>
div>
<script>
// 获取列表项
var lis = document.querySelector('.tab_list').querySelectorAll('li');
// 获取内容项
var items = document.querySelectorAll('.item');
// 为每个列表项添加鼠标单击事件
for (var i = 0; i < lis.length; i++) {
// 为每个列表项添加索引号
lis[i].setAttribute('index', i);
// 列表项鼠标单击事件
lis[i].onclick = function() {
// 先清除所有列表项样式，再设置当前列表项背景样式
for (var j = 0; j < lis.length; j++) {
lis[j].className = '';
}
this.className = 'current';
// 先隐藏所有内容项，再显示对应内容项
for (var k = 0; k < items.length; k++) {
items[k].style.display = 'none';
}
var index = this.getAttribute('index');
items[index].style.display = 'block';
}
}
script>
body>
html>
节点操作
利用节点层级关系获取元素
节点属性：
nodeType 节点类型 ： 元素节点(1) 属性节点(2) 文本节点(3)
nodeName 节点名称 nodeValue 节点值
节点层级关系：
父子关系： node.parentNode 父节点 parentNode.childNodes 子节点(所有的子节点，包含元素节点、文本节点等) parentNode.children 子节点(子元素节点） parentNode.firstChild 第一个子节点(文本节点、元素节点都可以) parentNode.lastChild 最后一个子节点 (文本节点、元素节点都可以) parentNode.firstElementChild 第一个子元素节点 parentNode.lastElementChild 最后一个子元素节点
兄弟关系 node.nextSibling 下一个兄弟节点(包含元素节点、文本节点等) node.previousSibling 上一个兄弟节点(包含元素节点、文本节点等) node.nextElementSibling 下一个兄弟元素节点 node.previousElementSibling 上一个兄弟元素节点
创建节点 document.createElement('标签名')
添加节点 node.appendChild(child) 后面添加节点 node.insertBefore(child,指定元素) 在指定元素前添加节点
案例：下拉菜单
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单title>
<style>
/*居中显示*/
.box {
margin: 100px auto;
width: 300px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #4C4C4C;
font-size: 12px;
}
/*导航项样式*/
.nav_list>li {
float: left;
margin-right: 10px;
width: 80px;
height: 24px;
line-height: 24px;
text-align: center;
}
/*导航项对应下拉菜单*/
.nav_list>li ul {
display: none;
}
/*导航项对应下拉菜单的列表项*/
.nav_list>li ul li {
border: 1px solid #FF8500;
border-top: none;
}
/*鼠标移入样式*/
.overStyle {
color: #FF8500;
font-size: 14px;
background: #EDEEF0;
}
/*鼠标移出样式*/
.outStyle {
color: #4C4C4C;
background: #fff;
}
style>
head>
<body>
<div class="box">
<ul class="nav_list">
<li>
<a href="#">微博a>
<ul>
<li><a href="#">私信a>li>
<li><a href="#">评论a>li>
<li><a href="#">@我a>li>
ul>
li>
<li>
<a href="#">邮箱a>
<ul>
<li><a href="#">免费邮箱a>li>
<li><a href="#">VIP邮箱a>li>
ul>
li>
ul>
div>
<script>
// 导航
var navList = document.querySelector('.nav_list');
// 导航项
var lis = navList.children;
// 为每个导航项添加事件
for (var i = 0; i < lis.length; i++) {
// 鼠标移入事件
lis[i].onmouseover = function() {
// a链接添加移入样式
this.children[0].className = 'overStyle';
// 导航项对应下拉菜单显示
this.children[1].style.display = 'block';
}
// 鼠标移出事件
lis[i].onmouseout = function() {
// a链接添加移出样式
this.children[0].className = 'outStyle';
// 导航项对应下拉菜单隐藏
this.children[1].style.display = 'none';
}
}
script>
body>
html>
案例： 简易留言板
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易留言板title>
<style>
.box {
margin: 100px auto;
width: 300px;
}
.box textarea {
vertical-align: bottom;
/*禁止拖拽*/
resize: none;
outline: none;
}
ul {
margin-top: 20px;
padding: 0;
list-style: none;
font-size: 14px;
color: #666;
}
style>
head>
<body>
<div class="box">
<textarea cols="30" rows="3">请输入内容textarea>
<input type="button" value="留言" />
<ul class="message">ul>
div>
<script>
var ta = document.querySelector('textarea');
var ul = document.querySelector('ul');
var inp = document.querySelector('input');
// 文本域获得焦点事件
ta.onfocus = function() {
this.value = '';
}
// 留言按钮鼠标单击事件
inp.onclick = function() {
if (ta.value == '' || ta.value == '请输入内容') {
alert('请输入内容');
} else {
// 创建li元素
var li = document.createElement('li');
var time = getTime();
li.innerHTML = time + ' ' + ta.value;
// 向列表最前面插入li元素
ul.insertBefore(li, ul.children[0]);
// 将文本域清空
ta.value = '';
}
}
/*获取当前日期时间*/
function getTime() {
var t = new Date();
var year = t.getFullYear();
year = year < 10 ? '0' + year : year;
var month = t.getMonth() + 1;
month = month < 10 ? '0' + month : month;
var day = t.getDate();
day = day < 10 ? '0' + day : day;
var hour = t.getHours();
hour = hour < 10 ? '0' + hour : hour;
var minute = t.getMinutes();
minute = minute < 10 ? '0' + minute : minute;
var second = t.getSeconds();
second = second < 10 ? '0' + second : second;
return '[' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + ']';
}
script>
body>
html>