JavaScriot

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)