JavaScript:脚本语言/高级编程语言
JS组成：ECMAScript+DOM+BOM
JS的三种书写样式：行内式、内嵌式、外部式
JS输入输出语句：
输入语句：prompt("请输入你的年龄")
弹出警示框：alert("计算的结果是")
控制台：console.log("我是程序员能看到的")

变量：

声明变量：var 变量名字；
var age = 12，myname = 'asas'，...

只声明 不赋值，结果是 undefined未定义的

不声明 不赋值，结果是 错误

不声明 赋值，结果是这个值

数据类型：

简单数据类型：Number,String,Boolean,Undefined,Null

Number数字型：
1.八进制 0~7 程序里面数字前面加0 表示8进制
2.十六进制 0~9 a~f 如果数字的前面加0x 表示16进制
3.数字型的最大值：console.log(Number.MAX_VALUE);
4.数字型的最小值：console.log(Number.MIN_VALUE);
5.无穷大：console.log(Number.MAX_VALUE * 2); //无穷大 Infinity
6.无穷小：console.log(-Number.MAX_VALUE * 2); //无穷小 -Infinity
7.非数字：console.log("abc" - 100); //NaN
8.isNaN():这个方法用来判断非数字，并且返回一个值，如果是数字返回false，如果不是数字返回true

String字符串型：
var str = '我是一个"程序员"撒看见撒娇了'; //外双内单或者外双内单
\n换行 \斜杠\ '单引号 "双引号 \t tab缩进 \b空格
字符串长度：length
字符串拼接：+

boolean布尔型: true 1 false 0
Undefined未定义数据类型：声明未赋值
null空值

获取变量数据类型：typeof

数据类型转换：

把数字型转换为字符串型：

1. 变量.toString

var num = 10
var str = num.toString()
console.log(str) //10
console.log(typeof str) //string

2.我们利用String(变量)

console.log(String(num)) //字符型10

3.利用 + 拼接字符串的方法显示转换效果 隐式转换

console.log(num + '')  // 1+’2‘  12

其他类型转换为数字型：

var age = prompt('请输入你的年龄')
1.parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
parseInt(age)
2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是浮点数
parseFloat(age)
3.利用 Number(变量)
var str = '123'

console.log(Number(str)) // 123

4.利用算术运算 - * / 隐式转换

console.log('12' - 0) // 12

转换为布尔型：Boolean()函数
除了'' 0 NaN null undefined 为false，其他都为true

运算符优先级：

() > 一元运算符(++ -- !) > 算数运算符(先*/%后+-) > 关系运算符(> >= < <=) > 相等运算符(== != === !==) > 逻辑运算符(先&&后||) > 赋值运算符(=) > 逗号运算符(,)

流程控制：顺序结构、分支结构、循环结构

顺序结构：
if (条件表达式1) {
执行语句
}else if(条件表达式2){
执行语句
}else{
执行语句
}

三元表达式：var result = num > 5 ? '真' : '假'

switch多分支语句；
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}

循环：
for循环：
for (初始化变量; 条件表达式; 操作表达式) {
循环体
}

while(条件表达式){
循环体
}

do{
循环体
} while(条件表达式)

continue关键字：跳出本次循环，继续下一次循环
break关键字：跳出循环

数组(Array): 就是一组数据的集合 存储在单个变量下的优雅方式

1.利用new创建数组
var arr = new Array(); //创建一个空的数组
2.利用数组字面量创建数组 []
var arr = [] //创建了一个空的数组
var arr1 = [1, 2, '3', true]

console.log(arr1)  // [1, 2, '3', true]

3.获取数组元素 格式 数组名[索引号]

console.log(arr1[2])   // '3'

4.数组的长度 数组名.lenth

函数：封装了一段可以被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用

函数使用分为两步：声明函数 和 调用函数
1.声明函数
function 函数名() { function 是声明函数的关键字 全部小写
函数体
}
2.调用函数
函数名()
3.可以使用函数的参数实现函数重复不同的代码
function 函数名(形参1，形参2...) { function 是声明函数的关键字 全部小写
函数体
}
函数名(实参1，实参2...)
4.函数的返回值 return 返回多个值时 返回最后一个值 想要返回多个值 用数组的方法 return[]
5.如果有return返回return后面的值，如果没有return 则返回undefined

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取,只有函数才有arguments对象，而且是每个函数都内置好了这个arguments
伪数组，并不是真正意义上的数组
1.具有数组的length属性
2.按照索引的方式进行存储的
3.没有真正的数组的一些方法 pop() push()...

函数表达式声明函数
var 变量名 = function(){}

js作用域：就是代码名字(变量)在某个范围内起作用和效果目的是为了提高程序的可靠性恒重要的是减少命名冲突
1.js的作用域(es6)之前： 全局作用域 局部作用域
2.全局作用域：整个script标签 或者是一个单独的js文件
var num = 10
3.局部作用域(函数作用域) 在函数内部就是局部作用域 这代码的名字旨在函数内部起效果和作用
function fn() {
局部作用域
}

变量的作用域：根据作用域的不同 变量分为全局变量和局部量
1.全局变量：在全局作用域下的变量
var num = 10 num就是一个全局变量
2.在函数内部没有声明直接定义：num=1 则num为全局变量
2.局部变量 在局部作用域下的变量
function fun() {
var num1 = 10 num1就是局部变量
}
3.从执行效率来看全局变量和局部变量
(1)全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2)局部变量执行完毕就会销毁

域解析：

f1()
console.log(c)
console.log(b)
console.log(a)
function f1(){
var a=b=c=9
console.log(c)
console.log(b)
console.log(a)
}

解析后如以下代码：
function f1(){
var a a在函数里声明，为局部变量
a=b=c=9 b，c未声明，为全局变量
console.log(c)
console.log(b)
console.log(a)
}
f1() 结果为：99999报错
console.log(c)
console.log(b)
console.log(a)

对象：(boject)对象是一组无须的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等

对象是由属性和方法组成的：
属性：事物的特征，在对象中用属性来表示
方法：事物的行为，在对象中用方法来表示

创建对象的三种方式：
1.利用字面量创建对象：{表达这个具体事物的属性和方法}
var obj = {} //创建了一个空的对象
var obj = {
age: 18,
sex: '男',
uname: '李苏飞',
sayHi: function () {
console.log('hi~~')
}
}
里面的属性或者方法我们采取键值对的形式 建 属性名：值 属性值
多个属性或方法中间用逗号隔开
方法冒号后面跟的是一个匿名函数

使用对象：
调用对象的属性 我们采取 对象名.属性名
console.log(obj.uname)
console.log(obj.age)
console.log(obj.sex)
调用属性还有一种方法 对象名['属性名']
console.log(obj['age'])
调用对象的方法 sayHi 对象名.方法名
obj.sayHi()

2.利用 newObject 创建对象
var obj = new Object(); //创建了一个空的对象
obj.uname = '刘德华'
obj.age = 18
obj.sex = '男'
obj.sayHi = function () {
console.log('hi~~~~~')
}
利用等号 = 赋值的方法 添加对象的属性和方法

console.log(obj.uname) // '刘德华'
console.log(obj['sex']) // 18
obj.sayHi()  // 'hi~~~~~'

3.利用构造函数创建对象
需要四大天王的对象 相同的属性: 名字 年龄性别 相同的方法: 唱歌
构造函数的语法格式：

function 构造函数名() {
  this.属性 = 值
  this.方法 = function () { }
}

使用：

new 构造函数名()
function Star(uname, age, sex) {
  this.name = uname
  this.age = age
  this.sex = sex
  this.sing = function (sang) {
    console.log(sang)
  }
}
var ldh = new Star('刘德华', 18, '男')
console.log(typeof ldh)  //返回的是一个对象 object
console.log(ldh.name)
console.log(ldh['sex'])
ldh.sing('冰雨')
var zxy = new Star('张学友', 19, '男')
console.log(zxy.name)
console.log(zxy.age)
zxy.sing('李香兰')

构造函数名字首字母要大写
构造函数不需要return 就可以返回结果
调用构造函数 必须使用 new
只要new Star() 调用函数就创建一个对象
属性和方法前面必须添加this

for...in用于对数组或者对象属性进行遍历

for (var k in obj) {
  console.log(k) //k变量 输出 得到的是 属性名
  console.log(obj[k])//obj[k] 得到的是属性值
}

内置对象：
Math对象：是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

console.log(Math.PI) // 3.141592653589793
console.log(Math.max(1, 2, 3, 4)) // 4
console.log(Math.abs(-100))  //绝对值
console.log(Math.floor(1.9))  //1 向下取整
console.log(Math.ceil(1.1))  //2 向上取整

console.log(Math.round(2.5))  //四舍五入 .5往大了取 比如-1.5 取-1

console.log(Math.random())

想要得到两个数之间的随机整数 并且包含这两个数

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
  //含最大值，含最小值 
}
console.log(getRandom(1, 10))

Date()日期对象：是一个构造函数 必须使用new来调用创建我们的日期对象
1.如果没有参数 返回当前系统的当前时间

var date = new Date()
console.log(date)

2.参数常用的写法 数字型 2019，10，01 或者是 字符串型'2019-10-1 8：8：8'

var date1 = new Date(2019, 10, 1)
console.log(date1) //返回的是11月不是10月
var date2 = new Date('2019-10-1 8:8:8')
console.log(date2) // Tue Oct 01 2019 08:08:08 GMT+0800

3.格式化日期 年月日

var date3 = new Date()
console.log(date3.getFullYear()) //返回当前日期的年
console.log(date3.getMonth() + 1) //返回的月份小1个月 记得月份+1
console.log(date3.getDate()) //返回几号
console.log(date3.getDay()) //返回周几 周一返回1 周六返回6 周日返回0

var nowdate = new Date()
var year = nowdate.getFullYear()
var month = nowdate.getMonth() + 1
var dates = nowdate.getDate()
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = arr[nowdate.getDay()]

时分秒封装函数化：

function getTimer() {
  var time = new Date()
  var h = time.getHours()
  h = h < 10 ? '0' + h : h
  var m = time.getMinutes()
  m = m < 10 ? '0' + m : m
  var s = time.getSeconds()
  s = s < 10 ? '0' + s : s
  return h + ':' + m + ':' + s
}

// var hours = nowdate.getHours()
// var minutes = nowdate.getMinutes()
// var seconds = nowdate.getSeconds()

console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + day + getTimer())  //今天是：2021年6月9日星期三 19时3分2秒

4.获得Date总的毫秒数(时间戳) 距离1970年1月1日过了多少毫秒数
1.通过valueOf() getTime()

var date = new Date()
console.log(date.valueOf())
console.log(date.getTime())

var date1 = +new Date()
console.log(date1)

3.H5 新增的 获得总的毫秒数

Date.now()

创建数组的两种方式
1.利用数组字面量

var arr = [1, 2, 3]
console.log(arr[0]) // 1

2.利用new Array()

var arr1 = new Array()  //创建了一个空数组
var arr1 = new Array(2) //这个2表示数组的长度为2 里面有2个空的数组元素
var arr1 = new Array(2, 3) //等价于[2，3] 里面由2个数组元素2和3

instanceof 运算符 检测是否为数组
Array.isArray(参数)

添加删除数组元素方法
1.push()在我们数组的末尾 添加一个或者多个数组元素

var arr = [1, 2, 3]
console.log(arr.push(4, 'pink')) // 5

//push完毕之后，返回的结果是 新数组的长度 原数组也会发生变化

console.log(arr) // [1, 2, 3, 4, 'pink']

2.unshift()在我们数组的开头 添加一个或者多个数组元素

arr.unshift('red', 'purple')
console.log(arr)  // ['red', 'purple', 1, 2, 3, 4, 'pink']

3.pop()可以删除数组的最后(一个)元素
// arr.pop() 没有参数

console.log(arr.pop()) //返回的是删除的那个元素  'pink'
console.log(arr) // ['red', 'purple', 1, 2, 3, 4]

4.shift()可以删除数组的第(一个)元素
console.log(arr.shift()) //返回的是删除的那个元素 'red'
console.log(arr) // [ 'purple', 1, 2, 3, 4]

数组排序：
1.翻转数组

var arr = ['pink', 'red', 'blue']
arr.reverse()
console.log(arr) //['blue', 'red', 'pink']

2.数组排序（冒泡排序）

var arr1 = [377777, 745, 777, 71, 775]
arr1.sort(function (a, b) {
  // return a - b  //升序
  return b - a //降序
})
console.log(arr1)

返回数组元素索引号方法

var arr = [1, 2, 3, 4, 5, 6, 4]

indexof 返回第一个满足条件的索引号 找不到该元素，返回-1 从前往后找

console.log(arr.indexOf(4)) //返回3 
console.log(arr.indexOf(10)) // -1

lastIndexof 从后往前找 找不到该元素，返回-1

console.log(arr.lastIndexOf(4)) // 6

数组转换为字符串
1.toString() 将我们的数组转换为字符串

var arr = [1, 2, 3]
console.log(arr.toString())

2.join(分隔符)

var arr1 = ['green', 'blue', 'pink']
console.log(arr1.join('-')) //默认逗号 green-blue-pink

拓展：
concat():连接两个或多个数组卖不影响原数组，返回一个新的数组

var num1 = [1, 2, 3],
  num2 = [4, 5, 6],
  num3 = [7, 8, 9];
var nums = num1.concat(num2, num3); // [1,2,3,4,5,6,7,8,9]

slice():数组截取 slice(begin,end),返回被截取项目的新数组
begin按照索引号，end按照第几个

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);  // ['Orange', 'Lemon']

splice():数组删除 splice(第几个开始，要删除的个数，'插入内容'),

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet"); // ["drum"]

字符串对象 根据字符返回位置
str.indexOf('要查找的字符',[起始的位置])

var str = '改革春风吹满地,春天来了'
console.log(str.indexOf('春', 3)) // 8

o出现的索引号，出现了几次

var str1 = 'abcoefoxyozzopp'
var index = str1.indexOf('o')
var count = 0
while (index !== -1) {
  console.log(index)
  index = str1.indexOf('o', index + 1)
  count++
}
console.log(count)

根据位置返回字符
1.charAt(index) 根据位置返回字符

var str = 'andy'
for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i)) //andy
}

2.charCodeAt(index) 返回相应索引号的字符 ASCII值
// 目的：判断用户按下了哪个键

console.log(str.charCodeAt(0)) //97

3.str[index] H5新增的

console.log(str[0]) //a

字符串操作方法
1.concat('字符串1', '字符串2'...)

var str = 'andy'
console.log(str.concat('red')) // andyred

2.substr(star,length)

var str1 = '改革春风吹满地'
console.log(str1.substr(2, 2)) //春风

3.替换字符 replace('被替换的字符', '替换为的字符')
只会替换第一个字符

var str2 = 'andyandy'
console.log(str2.replace('a', 'b')) //bndyandy

4.字符串转换为数组 split('分隔符')

var str3 = 'red,pink,blue'
console.log(str3.split(','))//["red", "pink", "blue"]

5.转换为大写 toUpperCase()

var str4 = 'abcdefg'
console.log(str4.toUpperCase())//ABCDEFG
console.log('QwEr'.toUpperCase()) //QWER
str4 = str4.toUpperCase()

6.转换为小写 toLowerCase()

console.log(str4.toLowerCase())//abcdefg
console.log('QwEr'.toLowerCase()) //qwer

BOM：浏览器对象模型，提供了独立于内容而于浏览器窗口进行交互的对象，核心对象时window

window常见对象：

窗口加载事件：
window.onload = function(){}
window.addEventListener('load',function(){})

调整窗口大小事件：

window.onresize=function(){}
window.addEventListener('resize',function(){})
window.innerWidth 当前屏幕尺寸

定时器：

setTimeout():window.setTimeout(调用函数，[延迟得毫秒数])

调用一次

停止setTimeout()定时器：window.clearTimeout(timeoutID)

setIntercal():window.setIntercal(调用函数，[延迟得毫秒数])

持续调用

停止setIntercal()定时器：window.clearIntercal(timeoutID)

location对象：

*location.href：获取或者设置整个URL
location.host：返回主机(域名)
location.port：返回端口号
location.pathname：返回路径
*location.search：返回参数
location.hash：返回片段
navigator对象：navigator.userAgent 是移动端打开 还是pc端
history对象：与浏览器历史记录进行交互
back()：后退
forward():前进
go(参数)：前进后退功能

方法：

location.assign():跟href一样，可以跳转页面
location.replace():替换当前页面，不记录历史，不能后退页面
location.reload():刷新页面 F5

元素偏移量offset系列：

1.可以得到元素得偏移 位置 返回的不带单位的数值
console.log(father.offsetTop)
console.log(father.offsetLeft)
它以带有定位得父亲为准 如果没有父亲 或者父亲没有定位 则以body为准
console.log(son.offsetLeft)
2.可以得到元素的大小 宽度和高度 是包含 padding + border + width 不包含margin
console.log(w.offsetWidth);
console.log(w.offsetHeight);
3.返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent);
console.log(son.parentNode); //返回的最近一级的父亲 不管父亲有没有定位

client系列：

clientWidth：不包含边框，其他和offsetWidth 一样
clientTop：返回元素上边框大小
clientLeft：返回元素左边框大小

元素滚动scroll系列：

scrollWIdth：和clientWidth一样 但是内容超出会变大 clientWidth 不会变大
scrollTop:被滚动事件 头部卷进去的内容部分

mouseenter：鼠标经过事件

只有经过自己触发；mouseover经过自己触发，经过子盒子还会触发

mouseleave；鼠标离开

动画函数封装：

动画实现原理：通过定时器setInterval()不断移动盒子位置
实现步骤：
1.获取盒子的当前位置
2.让盒子在当前位置上加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器效果
5.注意此元素需要添加定位，才能使用element.style.left

var div = document.querySelector('div')
var timer = setInterval(function () {
  if (div.offsetLeft >= 400) {
    //停止动画 本质是停止定时器
    clearInterval(timer)
  }
  div.style.left = div.offsetLeft + 1 + 'px'
}, 30)

缓动动画效果原理：
1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2.算法：(目标值-现在的位置)/10 做为每次移动的距离步长
3.停止条件：让当前盒子位置等于目标位置就停止定时器

移动端：

触屏事件：touch
touchstart：触摸到一个DOM元素触发
touchmove：在DOM元素上移动
touchend：在Dom元素离开

触摸事件对象：TouchEvent
touches：正在触摸屏幕的所有手指的一个列表
targetTouches：正在触摸当前DOM元素上的手指的一个列表
changedTouches：手指状态发生了改变的列表，从无到有，从有到无变化

拖动元素三部曲：
1.触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
2.移动手指touchmove：计算手指的滑动距离，并且移动盒子
3.离开手指touchend
注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault()

classList 返回元素的类名
classList.add（类名） 追加类名 不会覆盖以前的类名
classList.remove（类名）删除类名
*classList.toggle（类名） 切换类名 有就删除 没有就添加

本地存储：

window.sessionStorage:
1.生命周期为关闭浏览器窗口
2.在同一个窗口下数据可以共享
3.以键值对的形式存储使用
存储数据：sessionStorage.setltem(key,value)
获取数据：sessionStorage.getltem(key,value)
删除数据：sessionStorage.removeItem(key)
清除所有：sessionStorage.clear()

window.localStorage
1.生命周期为永久生效
2.可以多窗口共享(同一个浏览器)
3.以键值对的形式存储使用
存储数据：localStorage.setltem(key,value)
获取数据：localStorage.getltem(key,value)
删除数据：localStorage.removeItem(key)
清除所有：localStorage.clear()

DOM：
文档对象模型，标准的编程接口，通过接口可以改变网页的内容、结构和样式
DOM树：
文档：一个页面就是一个文档，document表示
元素：页面中的所有标签都是元素，element表示
节点：网页中所有的内容都是节点（标签、属性、文本、注释等），node表示
DOM把以上内容都看做是对象

获取元素：
1.根据ID获取：getElementByld()方法可以获取带有ID的元素对象
<div id='time'>2019-9-1</div>
<script>
//1.因为文档页面从上往下加载，所以先得有标签，所有script写到标签得下面
//2.get获得 element元素 by通过 驼峰命名法
//3.参数 id 是大小写敏感的字符串
//4.返回的是一个元素对象
var timer = document.getElementById('time')
console.log(timer)
console.log(typeof timer) //object
//5.console.dir可以打印我们返回的元素对象 更好的查看里卖弄的属性和方法
console.dir(timer) //div#time
</script>

2.getElementsByTagName获取某类标签元素
<ul>
<li>1231231</li>
<li>1231322</li>
</ul>
<ol id='ol'>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
//1.返回的是 获取过来元素对象的集合 以为数组的形式存储的
var lis = document.getElementsByTagName("li")
console.log(lis)
console.log(lis[0])
//2.遍历
for (var i = 0; i < lis.length; i++) {
console.log(lis[i])
}
//3.如果页面中只有一个li或者没有 返回的还是伪数组的形式
//4.element.getElementsByTagName('标签名') 父元素必须是指定的单个元素
var ol = document.getElementById('ol')
console.log(ol.getElementsByTagName('li'))
</script>

3.通过HTML5新增的方法获取
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1.getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box')
console.log(boxs)
// 2.querySelector 返回指定选择器的第一个元素对象
// 里面的选择器需要加符号
var firstBox = document.querySelector('.box')
console.log(firstBox)
var nav = document.querySelector('#nav')
console.log(nav)
var li = document.querySelector('li')
console.log(li)
// 3.querySelectorAll() 返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box')
console.log(allBox)
</script>

4.获取body html 元素
// 1.获取body 元素
var bodyEle = document.body
console.log(bodyEle)
console.dir(bodyEle)
// 2.获取Html 元素
var htmlEle = document.documentElement
console.dir(htmlEle)

事件：触发--相应机制
三要素：事件源 事件类型 事件处理程序
<button id='btn'>唐伯虎</button>
<script>
//点击一个按钮，弹出对话框
// (1)事件源：事件被触发的对象
var btn = document.getElementById('btn')
// (2)事件类型：如何触发 什么事件 比如单击(onclick) 还是经过 按下
// (3)事件处理程序：通过一个函数赋值的方式完成
btn.onclick = function () {
alert('点秋香')
}
</script>

常见的鼠标事件：
onclick：鼠标单击左键触发
onmouseover：鼠标经过触发
onmouseout：鼠标离开触发
onfocus：获得鼠标焦点触发
onblur：失去鼠标焦点触发
onmousemove：鼠标移动出发
onmouseup：鼠标弹起触发
onmousedown：鼠标按下触发
contextmenu：禁止鼠标右键菜单
selectstart：禁止鼠标选中

操作元素：
1.改变元素内容
element.innerText/innerHTML
innerText不识别HTML标签，innerHTML识别HTML标签

<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>

//当我们点击了按钮 div里的文字会发生变化
// 1.获取元素
var btn = document.querySelector('button')
var div = document.querySelector('div')
// 2.注册事件 //点击才会改变
btn.onclick = function () {
  div.innerText = getDate()
}
function getDate() {
  var nowdate = new Date()
  var year = nowdate.getFullYear()
  var month = nowdate.getMonth() + 1
  var dates = nowdate.getDate()
  var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  var day = arr[nowdate.getDay()]
  return '今天是：' + year + '年' + month + '月' + dates + '日 ' + day
}
//我们元素可以不用添加事件 //不用任何操作直接改变
var p = document.querySelector('p')
p.innerText = getDate();

</script>

自定义属性
1.获取是性质
element.属性 获取属性值
element.getAttribute('属性')
2.设置属性值
element.setAttribute('属性'，'值')
3.移除属性 removeAttribute(属性)

H5自定义属性
<div getTime='20' data-index='2' data-list-name='andy'></div>
<script>
var div = document.querySelector('div')
// console.log(div.getTime)
console.log(div.getAttribute('getTime'))
div.setAttribute('date-time', 20)
console.log(div.getAttribute('data-index'))
// h5新增的获取自定义属性的方法
// dataset 是一个集合 里面存放了所有以data开头的自定义属性
console.log(div.dataset)
console.log(div.dataset.index)
console.log(div.dataset['index'])
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName)
</script>

节点：
节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)

父节点：parentNode 得到的是离元素最近的父级节点

子节点：parentNode.childNodes 所有的子节点 包含元素节点 文本节点等等
parentNode.children 获取所有的子元素节点
parentNode.children[0] 第一个子节点
parentNode.firstChild 第一个子节点 包含元素节点 文本节点等等
parentNode.lastChild 最后一个子节点 包含元素节点 文本节点等等
parentNode.firstElementChild 第一个子节点
parentNode.lastElementChild 最后一个子节点

兄弟节点：node.nextSibling 得到的是下一个兄弟节点 包含元素节点 或者 文本节点等等
node.previousSibling 得到的是上一个兄弟节点
node.nextElementSibling 得到下一个兄弟元素节点
node.previousElementSIbling 得到上一个兄弟节点

创建节点：document.createElement('tagName')

添加节点：node.appendChild(child) 追加元素
node.insertBefore(child,指定元素) 指定元素前面添加

删除节点：node.removeChild(child)

复制节点：node.cloneNode() 如果括号参数为空或者false，浅拷贝，只复制标签不复制内容

innerHTML创建多个元素效率更高(不采用拼接字符串，采取数组形式拼接)，结构稍微复杂
createElement()创建多个元素效率稍微低一点，单结构更清晰
不同浏览器下，innerHTML效率要比createElement高

DOM事件流：页面接受事件的顺序
捕获阶段、当前目标阶段、冒泡阶段

事件对象常见属性和方法：
e.target 返回触发事件的对象
e.type 返回事件的类型
e.preventDefault() 阻止默认事件(默认行为)标准 比如不让链接跳转
e.stopPropagation() 阻止冒泡

鼠标事件对象：
e.clientX：返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY：返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX：返回鼠标相对于文档页面的X坐标
e.pageY：返回鼠标相对于文档页面的Y坐标
e.screenX：返回鼠标相对于电脑屏幕的X坐标
e.screenY：返回鼠标相对于电脑屏幕的Y坐标

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

键盘事件：
onkeyup：按键被松开时触发
onkeydown：按键被按下时触发
onkeypress：按键被按下时触发 不能识别功能键