JavaScript引入方式
1 直接编写
<script>
console.log('hello yuan')
</script>
2 导入文件
<script src="文件路径"></script>
JavaScript声明变量
全局变量声明
var 变量名=变量参数
局部变量声明
let 变量名=变量参数
var x = 30; // 变量初始化
var y; // 空容器 声明变量
y = 50 // 将50赋值给y 变量赋值
注释
// 单行注释
/**/多行注释
JavaScript的数据类型
变量类型
基本数据类型
Number String Boolean undefined null
var a = 1 数值类型
var b = '1' or "1" 字符串类型
var c = ture 布尔类型 0 1 true false
var d = undefined; 没有被定义的变量就是undefined 只声明
var e = null ; 空的值
复杂数据类型
object array function
typeof 查看变量的类型
字符串string
字符串定义
var 变量名="变量值"
字符串的内置函数
1.获取长度
变量.length
2.字符串的大小写
变量.toLowerCase() 小写
变量.toUpperCase() 大写
3.根据索引值获取 索引
变量.indexOf("字符串")
4.根据索引获取值
变量2=变量1["索引"]
5.字符串分割
变量 = 变量.split("分割符号")
6.字符串切片（取头不去尾）
1.起始位置 2.结束位置
str.slice(int,int)
str.substring(int,int)
7.字符串截断方法（取范围内的全部数值）
1.起始位置 2.从起始位置返回字符个数
str.substr(int,int)
8.清除字符串前后空格
str.tirm()
9.查找字符串的索引位置
从 0索引找
str.indexOf('字符串中的字符','从那个字符位置到int') // 返回字符串的索引位置
从末索引找
str.lastIndexOf('字符串中的字符','从那个字符位置到int') // 返回字符串的索引位置
10.获取指定的字符串的位置的字符
str.charAt(index) // 返回当前index的对应的字符
str.charCodeAt(index) // 获取index位置指定字符的编码
注意：
// 字符串转义
a = " i 'm \"666\""
// 字符串拼接
a = '666'
b = '8888'
a + b = '666 8888'
// 数字和字符串转换
a = 'wkx' + 555 // 浏览器会将555隐式转换为字符串，进行字符串拼接 (数值转字符串隐式转换)
b = '18' + '40' // 结果1840 浏览器不会将字符串数值 转换数值
字符串转数值(必须是整数类型的数值)
var b = '18'
console.log(typeof Number(b))
整数转字符串
var a = 18
console.log(typeof String(a))
console.log(typeof a.toString())
在字符串转换为整数时
var a = '66ssswx'
console.log(Number(a)) // 结果 NaN not a number 数值运算结果的错误体现
//字符串与数值的转换
var num = '102255.2122'
console.log(parseFloat(num)) // 将字符串保留整数和小数部分
console.log(parseInt(num)) // 将字符串转为整数，提取整数部分，如果解析的不是数值就停止解析
console.log(Number(num)) // 强制转换，如果带有不是数字 显示nen
console.log(isNaN(num)) // 判断是不是nen 返回false or ture
// 数值转换字符串
var num = 1235.22
// 强制转换
console.log(num.toString())
console.log(String(num))
// 隐式转换
console.log(''+num)
console.log(''.concat(num))
// 将整数转为字符串，指定小数位的个数，四舍五入
console.log(num.toFixed(2))
数组arr
数组是从0开始的
数组是[]
数组：['1','1','2'] 1维数组 , [1,2,3,[1,2]] 2维数组
获取数组的元素
a = ['1','1','2']
a[0] // 结果1
// 内部方法(重点)
var arr = [1,2,3,4] // 创建数组
// 使用js提供的构造函数
var arr = new Array()
// 给第0个索引存放值
arr[0] = 10
// 查看数组长度
arr.length
//判断是不是数组
Array.isArray(arr) //是返回tuer 不是返回false
// 数组转换字符串
arr.toString()
arr.toLocaleString()
// 数组分割字符串
arr.join('分割符号') // 将数组中的值进行分割，按照分割符号进行拼接 返回字符串
//数组的栈方法 后进先出 只对栈中的顶部元素启作用
// 末尾元素要不被删除要不被添加
len = arr.push('添加的元素') // 将元素添加到数组的末位，获取返回值数组长度
last = arr.pop() // 删除末尾的元素 返回删除数组的内容
// 队列 先进先出 只数组中的第一个元素启作用
// 第一个元素要不被删除要不被添加
len = arr.unshift('添加元素') // 将元素添加到数组的第一个元素，获取数据的长度
last = arr.shift() // 删除元素的第一个元素，返回删除的元素
//数组的排序
arr.reverse() // 将数组进行倒叙
arr.sort() // 默认 升序，内部逻辑调用toString()，转为字符串，调用ask码
function compare(a, b) {
if (a < b) {
return -1 // a 在 b 之前
} else if (a > b) {
return 1
} else {
return 0
}
}
arr.sort(compare) //内部可以传入一个函数 ,会将两个值进行对比
// 操作数据的方式
1.concat('可以传入多个值或者参数') 数组的合并，返回一个新的值
arr1 = [1,2,3]
arr2 = arr1.concat('4') // 如果是一个元素或者对象，那么就会将元素添加到arr1中末尾
结果:[1,2,3,4]
如果添加的是一个数组,那么会将被添加的数组中的元素追加到添加的数组中，生成一个新数组
arr2 = arr1.concat([10,12])
结果:[1,2,3,10,12]
2.slice(start,stop) 返回一个新的数组接收两个值启开始到结束的内容
顾头不顾尾,返回一个新数组
arr = [1,2,3]
arr1 = arr.slice(1,2) // 结果[2]
3.splice() // 可以删除 替换 插入
splice() 需要传入3个参数 开始 结束 插入的值(可以添加多个)
删除功能
arr = [1,2,3]
arr.splice(0,1) // 结果就是[2,3] 顾头不顾尾
插入功能，使用插入功能，需要将 结束参数为0代表不删除元素
arr = [1,2,3]
在数组的第0个元素插入一个666
arr.splice(0,0,'666') // 结果就是['666', 1, 2, 3]
删除元素
先删除，后添加
arr = [1,2,3]
删除第0个元素添加一个666
arr.splice(0,1,'666') // 结果就是['666', 2, 3]
// 数组的位置方法
indexOf('查询元素','从哪里开始查询的位置') 和 lastIndexOf('查询元素','从哪里开始查询的位置')
arr = ['wkx','66','heihi']
idnex = arr.indexOf('wkx') // 返回查询到元素的索引 从0开始
index = arr.lastIndexOf('wkx') // 返回查找元素的索引 从末尾开始
如果查询不到返回-1
// 数组的迭代方法
1.filter()
filter('内部传入函数') 过滤方法，对数组的每一项进行遍历过滤
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] // 过滤掉小于5的参数
案例：
filterres = arr.filter((item, index, array) => { // 返回一个新数组
// item 当前循环元素
// index 是当前循环元素的数组索引位置
// array 当前的原数组
return item > 5 // 将大于5的参数全部留下
})
console.log(filterres) 结果[6, 7, 8, 9]
2.map()
map('内部传入函数') 对数组进行每个值的操作，对数组的每一项进行遍历操作
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] // 对每个值进行*2
案例：
mapres = arr.filter((item, index, array) => { // 返回一个新数组
// item 当前循环元素
// index 是当前循环元素的数组索引位置
// array 当前的原数组
return item * 2 // 对数组的每个值进行操作
})
console.log(mapres) 结果[2, 4, 6, 8, 10, 12, 14, 16, 18]
3.forEach('传入一个函数') // 对数组的循环，与for一样
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.forEach((item, index, array) => {
// item 当前循环元素
// index 是当前循环元素的数组索引位置
// array 当前的原数组
console.log(item) // 循环每个当前元素
})
对象object
var person = {
name:'wkx',
age: 18,
fav:function(){
console.log('1')
}
}
获取值
person.name
修改值
person.name = 新值
布尔值
var 变量=false 假
var 变量=true 真
空值
var 变量=unescape
var 变量=null
类型转换
转换为数值型
a = “100件”
a = “100”
parseInt(a) 可以转换
转换浮点型
a = 3.14 可以转换
a = 3.1.4 不可以转换
parseFloat(a) 转换后小数点 后一位
字符串转换
a = 100
toString(a)
布尔值转换
Boolean(4>5) false
Boolean(5>4) true
一切皆对象 ，只有空的数据和数值0位false
暗转换
相加时 优先字符串拼接，在做加减
相减时 优先对数值相减，在对字符串操作
引用值和原始值(概念)
根据数据类型不同，有的变量储存在栈中，有的储存在堆中。
原始变量及他们的值储存在栈中，当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。
引用值是把 引用变量的名称储存在栈中，但是把其实际对象储存在堆中，且存在一个指针由变量名指向储存在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针， 此时 两者指向的 是同一个数据，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变；但若不是通过方法 而是通过 重新赋值 此时 相当于 重新开了一个房间 该值的原指针改变 ，则另外一个 值不会随他的改变而改变。
JavaScript的运算符
算术运算符
+ 数值相加
- 数值相减
* 数值相乘
/ 数值相除
% 数值求余
** 数值求幂
a++ 数值后自增1 a=a+1
++a 数值前自增1 a=a+1
b-- 数值后自减1 b=b-1
--b 数值前自减1 b=b-1
赋值运算符
=
+=
-=
*=
/=
%=
**=
比较运算符,比较的结果要么是true, 要么是false
> 大于
< 小于
>= 大于或者等于
<= 小于或者等于
!= 不等于[计算数值]
== 等于[计算]
!== 不全等[不仅判断数值,还会判断类型是否一致]
=== 全等[不仅判断数值,还会判断类型是否一致]
逻辑运算符
&& 并且 and 两边的运算结果为true,最终结果才是true
|| 或者 or 两边的运算结果为false,最终结果才是false
! 非 not 运算符的结果如果是true,则最终结果false ,反之亦然
逻辑运算符进阶用法:
1. 实现短路
var a = false || 2 >>> a = 2
var a = true && "hehe" >>> a = "hehe"
2. 快速布尔化[把数据快速转换成布尔类型]
var a = 100
!!a >>> true
条件运算符[三目运算符]
格式：
变量 = 条件?"条件成功返回给变量":"条件失败返回给变量"
条件?true:false
例如:
var age = 12;
var ret = age>=18?"成年":"未成年";
相当于 python中的"成年" if age >= 18 else "未成年"
JavaScript三元运算
条件比较 ? '条件为真' : '条件为假';
案例
var res = 1 === 2 ? '这个是真的' : '这个是个假的' // 结果：假的
JavaScript的条件控制语句
******* if else 语句 ******
if(条件1){
// 条件成立执行
} else if(条件2){
// 条件成立执行
}else{
// 条件不成立执行
}
案例：
var distance = 10;
var nowDistance = 15;
if (distance < nowDistance) {
console.log('自动驾驶')
} else {
console.log('人为行驶')
}
多条件案例
var a = 10;
if (a === 10){
console.log('1')
}else if (a < 10){
console.log('2')
}else {
console.log('3')
}
****** switch(开关) *******
// 相当于条件循环，只要比对成功，遇到break就会退出循环
// 如果不写break ，那么就会cash穿透，遇到下一个break才会停止循环
switch(num){
case A值:
// 执行逻辑
break //条件通过直接结束
case B值:
//执行逻辑
break
default:
//上述条件都比较不通过
break
.....
}
案例
var a = 10
switch (a) {
case 10:
console.log(1)
break
case 11:
console.log(2)
break
}
JavaScript的循环语句
******** for 循环 *********
// 知道初始条件和结束条件时
for(初始条件;结束条件;递增条件){
执行内容
}
案例：
var i = 1;
var sum = 0;
for (i = 1;i <=10;i++){
sum += i
}
console.log(sum)
循环数组
for(;;){ // 死循环写法
}
break // 停止循环，不会向下走
continue // 跳出当前循序 开始下次循环
***** while 循环 ******
先判断，在执行
初始条件
while(判读循环的结束条件){
递增条件
}
案例 计算基数的和
var i = 0;
var sum = 0;
while (i < 100) {
if (i % 2) {
sum += i
}
i++
}
console.log(sum)
****** do - while 循环 ******
先执行，在判断
语法
do{
先执行逻辑
}while(判读条件)
案例
var sum=0
var i=1
do { // 先执行逻辑
sum +=i
i++
}while (i < =100) // 在进行判断
console.log(sum)
JavaScript的序列化
json字符串解析成为js能识别的数据类型：反序列化。解析其他语言传入得数据结构：反序列化
var 接受变量 = JSON.parse("其他语言传入的json数据")
js数据类型转换为json字符串：序列化。将数据打包成为 json格式文件，传入其他语言中处理
var 接受变量 = JSON.stringify("需要转换json格式的数据")
JavaScript的时间对象
date 日期对象 utc时间
无参数，就是当前的时间
var now= new Date() // 知道怎么创建就可以
console.log(now)
带参数 传入符合的字符串
var now= new Date('1995 13:30:00')
console.log(now)
传入数值
var now = new Date(1995,11,25)
console.log(now)
*** 日期对象常用方法 ***
var now= new Date()
console.log(now.getDate()) // 获取月份的第几天(1-31)
console.log(now.getMonth()) // 获取月份(0-11) 月份需要+1
console.log(now.getFullYear()) // 获取年份
console.log(now.getDay()) // 获取当天星期几(0-6) 0代表周天
console.log(now.getHours()) // 获取小时(0-23)
console.log(now.getMinutes()) // 获取分钟(0-59)
console.log(now.getSeconds()) // 获取秒(0-59)
*** 日期格式化 ****
// 星期几 月 日 年 Sat Aug 13 2022
console.log(now.toDateString())
// 时分秒 时区 15:06:09 GMT+0800 (中国标准时间)
console.log(now.toTimeString())
// 年月日 2022/8/13 常用
console.log(now.toLocaleDateString())
// 时分秒 15:07:07 常用
console.log(now.toLocaleTimeString())
// 年月日时分秒 2022/8/13 15:07:48 常用
console.log(now.toLocaleString())
// 国际utc时间 Sat, 13 Aug 2022 07:08:53 GMT
console.log(now.toUTCString())
JavaScript的math 数字对象
1.取正数，负数转正数，正数不能转负数
Math.abs(-10000)
2.取小数的后几位 参数是几就去小数点几位，带有四舍五入
var num = 3.1415926
num.toFixed（5）
5.四舍五入
var num = 24.3
Math.ceil(num) // 将小数部分进1，无论小数是多少
Math.floor(num) // 只会保留当前整数不会四舍五入
Math.round(num) // 标准的四舍五入
6.取幂次方 参数1，参数2
Math.pow()
7.0-1随机取值 （取小数）
Math.random()
8.获取0-100的随机数
Math.random()*100
9.最大值最小值
console.log(Math.max(1,2,3,5,8)) // 最大值
console.log(Math.min(1,6,5,8,9,5)) // 最小值
10.循环取值
var arr = [6,2,5,87,69]
max = Math.max.apply(null,arr) // 相当于将每个值取出来进行对比
min = Math.min.apply(null,arr) // 相当于将每个值取出来进行对比
//Math的计算属性
console.log(Math.E)
console.log(Math.LN2)
console.log(Math.LN10)
console.log(Math.LOG2E)
console.log(Math.PI)
console.log(Math.SQRT2)
console.log(Math.SQRT1_2)
JavaScript的函数
1.声明函数
function 函数名（形参1，行参2）{
函数体....（语句体）
return 返回值
}
函数名（形参） 函数的调用
2.匿名函数
var 变量=function () {
函数体
}
变量() 函数调用
匿名函数自执行
(function (x,y) {
console.log(x+y);
})(2,3)
3.匿名函数的闭包
function bar() {
return function(){ //匿名函数当成返回值进行处理
console.log("匿名函数")}}
bar()() //调用匿名函数
4.关于返回值
return 没有书写返回值 默认返回 undefined
undefined 作用：1.变量未赋值，2.函数没有返回值
5.函数的参数
1.默认参数
例如：
function stu_info(name,gender="male"){
console.log("姓名："+name+" 性别："+gender)
}
stu_info("yuan")
2.位置参数
例如
function add(a,b){
console.log(a);
console.log(b);
}
add(1,2)
3. 动态参数 arguments
例如:
function add(a,b){
console.log(a+b);//3
console.log(arguments.length);//2
console.log(arguments);//[1,2]
}
add(1,2)
6.函数的作用域
var a = 1; // 定义到全局中的变量 全局作用域变量
function func() {
var b = 12; // 定义在函数内部的变量，局部作用域变量
console.log(a)
}
func()
全局作用域污染
变量被覆盖 或者 函数被覆盖
window方法
global对象全局对象
var url= 'http://baidu .com'
// 编码
console.log(encodeURI(url)) // 识别空格进行编码
console.log(encodeURIComponent(url)) // 识别与斜杠编码
// 解码
console.log(decodeURI(encodeURI(url))) // 解码 空格
console.log(decodeURIComponent(encodeURIComponent(url))) // 解码 空格与斜杠
global = win对象(浏览器的顶层对象)
JavaScript的弹窗方法
window弹窗方法
1.警告弹窗
window.alert(文本)
2.提示弹窗返回布尔值
window.confirm("提示内容") 返回true/false根据布尔值进行下一步操作
3.用户输入弹窗
window.prompt("提示内容") 会跳出弹框，让用户输入，输入什么返回什么。没有输就返回null
4.跳转弹窗
window.open("访问地址")
5.弹窗关闭
window.close()
JavaScript的定时器方法window
// 只执行一次
window.setTimeout(回调函数,毫秒)
window.setTimeout(()=>{
console.log(1)
},2000) // 两秒后调用传入的函数
// 按照周期性执行
var a = window.setInterval(回调函数,毫秒) // 存在一个返回值
window.setInterval(()=>{
console.log(1) // 每1秒打印一个1
},1000)
clearInterval(a) // 根据返回值 清除定时器
JavaScript的地址栏对象
**** location对象 *****
console.log(window.location.host) // 获取ip 和端口
console.log(window.location.hostname) // 获取当前的ip地址
console.log(window.location.href) // 获取完整url，url已经被编译
console.log(window.location.pathname) // 获取端口号往后的目录
console.log(window.location.port) // 获取当前的端口号
console.log(window.location.protocol) // 获取当前的协议 http:
console.log(window.location.search) // 获取url查询的参数
**** 浏览器的位置操作 *****
location.href = 'https://www.baidu.com' // 跳转网址 或产生历史记录
location.replace('https://www.baidu.com') // 不会产生历史记录
location.reload() // 刷新网页
***** 检查浏览器插件navigator对象 ******
console.log(window.navigator.plugins) // 查看浏览器的插件
var arr = window.navigator.plugins // 对象
for(let i=0 ;i<arr.length;i++){
console.log(arr[i].name) // 获取浏览器插件的name名称
}
****** 历史对象history ******
console.log(window.history)
window.history.go(0) go = 0 刷新
window.history.go(1) go = 1 表示前进1次
window.history.go(-1) go = -1 表示后退1次
JavaScript的本地储存
1.本地永久存储，可以在相同域名下进行共享（键值对的临时存储）
localStorage
//保存一个数据到存储对象
localStorage.setItem("变量名","变量值")
localStorage.变量名= 变量值
//获取存储对象
localStorage.setItem("变量名")
localStorage.变量名
//参数指定的存储对象
localStorage.removeItem("变量名")
//删除全部存储对象
localStorage.clear()
2.本地暂时存储
sessionStorage
//保存数据到存储对象
sessionStorage.setItem("变量名","变量值")
sessionStorage.变量名=变量值
//获取存储对象值
sessionStorage.setItem("变量名")
sessionStorage.变量名
//参数指定的存储对象
sessionStorage.removeItem("变量名")
//删除全部存储对象
sessionStorage.clear()
JavaScript的DOM
dom：文档对象模型 document object model
js 对象3类：
1.自定制 var
2.内建 data对象..
3.宿主对象 win对象
model:事物的表示模型
****** 节点的3个属性 ******
nodeName: 节点的名字
nodeType: 节点的类型
nodeValue: 节点值
nodeName：
元素： 标签名想相同
属性: 与属性名相同
文本节点: #text
文档节点: #document
nodeValue:
元素: undefined or null
文本: 当前自己本身
属性: 属性值
nodeType:
元素 ： 1
属性 ： 2
文本 ： 3
注释 ： 8
文档 ： 9
例如：文本
标签与标签的空格 或者没有标签的文本(都属于文本，兼容问题)
nodeName: "#text"
nodeType: 3
nodeValue: "\n" 当前是一个空格(也就是标签和标签之间的空格是一个文本标签)
例如注释
nodeName: "#comment"
nodeType: 8
nodeValue: "注释中的内容" 当前是一个空格(也就是标签和标签之间的空格是一个文本标签)
// 文本与注释是没有用的，根据浏览器兼容的问题，显示出来的内容，要的只是当前网页中的元素
DOM节点查找
1.id查找
document.getElementById("id值")
获取标签id的dom对象
2.class查找
document.getElementsByClassName("类名")
通过class对应的值查找（可能是一个，可能是多个）
多个是数组，数组的元素是dom对象
3.按照标签名查找
document.getElementsByTagName('标签')
3.通过父级找子级标签
1.根据索引查找子级标签
document.getElementsByClassName("类名")[0]
父级标签的 数组对象 的第一个元素
2.根据索引查找子级标签
变量 = document.getElementsByClassName("类名") 父级
变量.getElementsByClassName("类型") 某个子级
DOM节点对象属性
1.找到父级标签
节点.parentElement
2.找父级下面的全部子级标签
节点.parentElement.children
3.找到父级的第一个标签
节点.parentElement.firstElementChild
4.父级的最后一个子标签
节点.parentElement.lastElementChild
5.父级的第一个子级标签的下一个标签
节点.parentElement.nextElementSibling
6.找到父级标签的子标签的上一个标签
节点. parentElement.previousElementSibling
7.节点对象属性
<div>我是上一个兄弟</div>
<div id="father">
<p>1</p>
<p>2</p>
<p>1</p>
</div>
<div>我是下一个兄弟</div>
var father = document.getElementById('father')
console.log(father.childNodes) // 获取当前标签下的全部字标签集合
console.log(father.firstChild) // 获取当前标签下的第一个字标签
console.log(father.lastChild) // 获取当前标签下的最后一个字标签
console.log(father.parentNode) // 获取当前标签的父级标签
console.log(father.nextSibling) // 获取当前标签的下一个同级标签
console.log(father.previousSibling) // 获取当前标签的上一个同级标签
会出现兼容问题:谷歌浏览器会出现将标签空格当做节点获取
封装方法 获取当前标签下面的全部字标签(剔除标签中的#text(空格兼容性问题))
function get_childNodes(father) {
var nodes = father.childNodes
var arr = [] // 保存已经获取的元素节点列表
nodes.forEach((value, key, parent) => {
if (value.nodeType === 1) { // 如果标签对象type = 1 那么当前就是正常的标签
arr.push(value)
}
})
return arr
}
console.log(get_childNodes(father))
封装方法 获取兄弟标签 下一个标签可以是空格 或者 注释需要过滤掉
function get_nextSibling(n) {
var x = n.nextSibling
while (x && x.nodeType != 1) {
x = x.nextSibling
}
return x
}
console.log(get_nextSibling(father))
DOM的class找标签
1.找一个符合条件的 .c1 .c2 .c3 和css的class一样
变量 = document.querySelector(".class属性的值 ")
变量 是一个dom对象
2.根据标签找到 找全部符合条件的 ul li
变量 = document.querySelectorAll("父标签 子标签")
变量 是一个符合条件的数组对象，内部的元素都是dom
<div class="c1"> </div> 找到一个标签
<ul>
<li></li>
<li></li>
<li></li>
</ul> 找到3li 标签[li,li,li]
DOM的文本操作
var ele = document.querySelector(".c1") 获取dom 对象
1.获取信息
ele.innerHTML 获取文本信息 赋值一些特殊标签
ele.innerText 获取文本信息
2.文本赋值
ele.innerHTML = “新文本”
ele.innerText="新文本"
<div class="c1">1231</div>
DOM的value的操作
像input标签，select标签以及textarea标签是没有文本的，但是
1.input取值
显示内容由value属性决定
var ele = document.querySelector(".c1") 获取标签
res.value 取标签的value值
res.value="新内容" 重新赋值value
<input type="text" class="c1" value="holle，js">
2.select 下拉菜单取值
获取标签select
var ele = document.querySelector("#il")
res.value 获取第一个value值
res.value="hebei" 赋值
获取button标签，绑定事件，当点击标签是将地址个value的值变换
document.querySelector(".but").onclick=function(){
res.value="hebei"
}
<select name="" id="il">
<option value="henan">河南</option>
<option value="hebei">河北</option>
<option value="hunan">湖南</option>
</select>
<button class="but">点击</button>
3.textarea大文本取值
获取标签
ele = document.querySelector("#i2")
ele.value 读取文本值
ele.value = "新文本" 赋值文本值
<textarea name="" id="i2" cols="30" rows="10" >12313</textarea>
DOM的css样式的操作
var div = document.getElementById('box')
console.log(div.style) // 打印的样式对象
1.使用对象.style.进行设置
div.style.color = 'red' // 将对象字体设置为红色
2.使用setAttribute
div.setAttribute('class','样式标签')
DOM的标签内属性值操作
变量.setAttribute("属性名","属性值") 自定义属性 键值对
变量.getAttribute("属性名") 获取自定义属性
变量.removeAttribute("属性名"); 删除自定义属性
<div class="id" id="id">123</div>
var div = document.getElementById('id')
// getAttribute('标签对象中的名字')
// 获取标签中class属性的值 获取不到就是null
className = div.getAttribute('class') // 结果就是 id
// 给标签设置属性 setAttribute(属性名,属性值)
div.setAttribute('自定义','自定义')
// 删除自定义属性值
div.removeAttribute("自定义名")
DOM的 class的操作增删改查
.c2{
color：red；
}
1.获取标签
ele = document.querySelector(".c1")
2.给div添加一个样式
ele.classList.add("c2") 字体变为红
3.删除一个样式
ele.classList.remove("c2") 字体恢复
4.取当前的class的值
ele.className 查看 class的值都有什么
<div class="c1" > adsa1d32131</div>
DOM的节点操作
<div id="box">
<div id="box2">666</div>
</div>
var div = document.getElementById('box')
var div2 = document.getElementById('box2')
//1. 对象.innerHTML = '插入的标签或者文本' 对象.innerText='只能插入文本'
// 插入的内容就存在于当前标签对象的下面
div.innerText = '我是文本' // 只能插入文本
div.innerHTML = '<p>66</p>' // 可以插入文本和标签
// 2. 创建标签 使用document.createElement('什么样式的标签')
var p = document.createElement('p') // 创建一个p标签
var a = document.createElement('a') // 创建一个a标签
var h2 = document.createElement('h2') // 创建一个h2标签
// 3.插入创建的标签 标签对象.appendChild(插入的标签对象)
// 将创建的标签添加到当前对象的标签下面
div.appendChild(p) // 传入尾部
//对象.insertBefore(新插入节点,参考节点)
div.insertBefore(a, div2) // 新插入节点，会在插入到参考节点之前
// 4.创建文本对象(只是一个文本，没有标签包裹) document.createTextNode(文本内容)
var text = document.createTextNode('666')
// 5.删除节点 父对象.removeChild(子对象)
// 删除当前 父对象下的子对象
div.removeChild(div2)
// 6.替换标签 替换父级标签的子标签
// 对象.replaceChild(替换的新标签对象,被替换的旧标签对象)
div.replaceChild(h2,div2)
// 对于创建的标签，需要进行释放，因为一直存储在内存中
// 对于释放对象在执行之后
p = null
DOM的事件
1.onclick 点击事件
例如：
<div id="box" onclick="func(this)">点击</div>
function func(thiss) {
// 点击时，this就是当前的对象
console.log(thiss)
}
2.onmouseover 和onmouseout 这两个事件一起用
onmouseover 鼠标经过事件
onmouseout 鼠标离开事件
例如：
var div = document.getElementById('box')
div.onmouseover =()=>{ // 经过字体变为绿色
div.style.color = 'green'
}
div.onmouseout = ()=>{ // 离开变为红色
div.style.color = 'red'
}
3.onchange onselect
onchange 文本框内容改变事件(原内容改变,回车确认才会被触发)
onselect 文本框内容被选中事件(只有内容被选中的了才会触发，点击不会)
oninput 当原内容被改变,就会触发(实时触发,只要改变的内容与原内容不同就会触发)
例如：
<input type="text" id="users" value="111">
<textarea cols="30" rows="10" id="user">
请输入个人简介，字数不少于200字
</textarea>
var input = document.getElementById('user')
var inputs = document.getElementById('users')
input.onselect = ()=>{
console.log('内容被选中')
}
inputs.onchange = ()=>{
console.log('内容改变')
}
inputs.oninput = ()=>{
console.log(inputs.value) // 实时获取内容进行打印
console.log('实时改变')
}
4.onfocus onblur
onfocus 光标聚集事件
onblur 光标失去焦点事件
例如：
<input type="text" id="user">
var input = document.getElementById('user')
input.onfocus = ()=>{
console.log('你的鼠标已经获取焦点')
}
input.onblur = ()=>{
console.log('你的鼠标已经离开')
}
5.obload
网页加载事件 等待文档元素加载完成后才会调用(当整个文档加载完毕后,就会指定onload中的代码)
obload事件只能写一个，多个会出现覆盖的问题
例如:
window.onload = ()=>{
console.log('等待页面加载完毕后,才会执行内部的内容')
}
其他事件
1.onkey键盘事件
获取标签
var c1=document.querySelector(".c1")
onkeydown 每次点击键盘触发 事件
onkeyup 每一次点击键盘，按下去，抬起来 才会触发
c1.onkeydown=function (e) { e参数用来捕捉全部的信息
console.log(e.keyCode) e.keyCode主要用于捕获全部的信息 keyCode表示键盘编码
console.log(e.key) e.key 获取点击键盘的对应的内容
}
<input type="text" class="c1">
2.onsubmit提交事件
用于阻止用户提交信息的格式是否正确，正确传输，不正确拦截（用于拦截格式错误）
1.获取标签信息
var i1=document.querySelector("#i1")
var user=document.querySelector(".c1")
2.绑定事件
i1.onsubmit=function (e) { e捕捉全部信息
if (user.value.length<5){ 判断输入的长度是不是大于5
alert("用户名的长度应该大于5") 输入错误提示
user.value="" 输入错误 情况内容
阻止提交默认事件
return false; 方法1
e.preventDefault() 方法2 利用e 阻止默认事件
}
<form action="" id="i1">
<input type="text" name="user" class="c1">
<input type="submit"> 默认提交按钮
</form>
3.冒泡事件
当子级区域延伸到父级区域 被称为冒泡事件
.c1{
height: 300px;
width: 300px;
background-color: #e4393c;}
.c2{
height: 100px;
width: 100px;
background-color: blue;}
绑定事件
c1.onclick=function () {
alert("c1区域")
}
c2.onclick=function (e) { c2为c1的子级会触发冒跑事件
alert("c2区域")
e.stopPropagation() 消向外延伸，阻止事件冒泡
}
<div class="c1">
<div class="c2"></div>
</div>
补充文本插入
以文本形式插入标签
insertAdjacentHTML(position, text)
"position"：一个字符串，表示相对于元素的位置，必须是以下字符串之一
"beforebegin"
在 元素之前。仅当元素位于 DOM 树中并且具有父元素时才有效。
"afterbegin"
第一个子元素之前。
"beforeend"
最后一个子元素之后。
"afterend"
在 元素之后。仅当元素位于 DOM 树中并且具有父元素时才有效。
"text" : 要解析为 HTML 或 XML 并插入到树中的字符串
div = `<div>
${变量}
</div>`
insertAdjacentHTML(beforeend,div)
