[寒假js笔记]

变量的命名规则和命名规范

• 规则:必须遵守的，不遵守就是错
  1.一个变量名称可以由数字、字母、英文下划线(_)、美元符号($）组成
  ⒉.严格区分大小写
  3.不能由数字开头
  4.不能是保留字或者关键字5.不要出现空格
• 规范:建议遵守的(开发者默认)，不遵守不会报错
  1.变量名尽量有意义(语义化)
  2.遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
  3.不要使用中文

10

既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据
·使用typeofl关键字来进行判断

11其他数据类型转成数值

1.Number(变量)
可以把一个变量强制转换成数值类型可以转换小数，会保留小数
可以转换布尔值
== 遇到不可转换的都会返回NaN==
比较严格
2.parseInt(变量)
从第一位开始检查，是数字就转换，知道一个不是数字的内容开头就不是数字，那么直接返回(NaN
不认识小数点，只能保留整数
3. parseFloat(变量)
从第一位开始检查，是数字就转换，知道一个不是数字的内容开头就不是数字，那么直接返回NaN
认识一次小数点
4.除了加法以外的数学运算
运算符两边都是可运算数字才行
如果运算符任何一遍不是一个可运算数字，那么就会返回(NaN
加法不可以用

//非加号-0/1·*1
var a = "100"
var b = a-0
console. log(b)

结果

结果

12 其他数据类型转成字符串

1．变量.tostring
有一些数据类型不能使用tostring)方法，比如undefined和null
2. string(变量)
所有数据类型都可以
3.使用加法运算
在JS里面，+有两个含义
字符串拼接:只要+任意一边是字符串，就会进行字符串拼接
加法运算:只有+两边都是数字的时候，才会进行数学运算

var a = 100
var b = a+""
console.log(b)

13其他数据类型转成布尔

1.Boolean(变量)
在js中，只有""(不能有空格）、0、null、undefined、NaN，这些是false
其余都是true

var a = NaN
var b = Boolean(a)
console.log(a,b)

14数学运算符

取余，可以制作分钟转小时

var a = 1000//分钟
var b = parseInt(a/60)// 10:20
var c = a%60
console.log(b"："+c)

tip

console.log("1"+"2"*3+4)
//结果为164

console.log(1+"2"*3+4)
//结果为11

15-赋值运算符

//交换两个数
var m = 5
var n = 6
var c
c = m
m = n
n = c
console.log(m,n)

16比较运算符

1. ==
   比符号两边的值是否相等，不管数据类
   1 == ‘1’
   两个的值是一样的，所以得到true

2. ===
   比较符号两边的值和数据类型 是否都相等
   1 === ‘1’
   两个值虽然—样，但是因为数据类型不—样，所以得到false

两个值虽然—样，但是因为数据类型不—样，所以得到false

var age ="22"
console.log(parseInt(age)===22)
//强制转换类型

---

console.log(true==1)
console.log(""===0)
console.log(undefined==o)

3. !=
   比较符号两边的值是否不等
   1 != ‘1’
   因为两边的值是相等的，所以比较他们不等的时候得到 false
   4.!==
   。比较符号两边的数据类型和值是否不等
   1 !== ‘1’
   因为两边的数据类型确实不一样，所以得到true

17逻辑运算符

1.&&
进行且的运算
符号左边必须为true并且右边也是true，才会返回true
只要有一边不是[true，那么就会返回false
2.||
进行或的运算
符号的左边为true或者右边为true，都会返回true
只有两边都是false的时候才会返回false
3.!
进行取反运算
本身是true的，会变成false本身是false的，会变成true! true结果是false
!false结果是true
特殊:

1. !!a==>转换成布尔值
2. &&||短路用法

var y = null
console.log(y && y.toString())
//如果y值有问题为空，会显示undefined,不会中断程序

var z ="赵钱孙李"
document.write(z || “这个家伙很赖，什么也没有留下")
//如果z值为空，则显示“这个家伙很赖，什么也没有留下”

18自增自减

var n = 10
var res = ++n + n++ + n++
// 11 11 13
console.log(n.res13)
//13 35

19三目运算符

案例：

var sum = 210
var youhuisum= sum>200? sum-10 : sum
console.log(sum, youhuisum)
// 优惠案例

//满20日 减10 满100减5
var sum = 210
var youhuisum = sum>200? sum-10 : (sum>100?sum-5:sum)
console.log(sum, youhuisum)

20if条件

if else if …语句
·可以通过if和e1se if 来设置多个条件进行判断
·语法:if（条件1){条件1为 true 的时候执行 } else if(条件2){条件2为 true 的时候执行〕
·会从头开始依次判断条件
.如果第一个条件为true了，那么就会执行后面的里面的内容。如果第一个条件为false，那么就会判断第二个条件，依次类推
·多个，只会有一个被执行，一旦有一个条件为true了，后面的就不在判断了

var sum = 190
var youhuisumif(sum>200){
youhuisum= sum-10
console.log(1111)
}else if (sum>100 ){
youhuisum= sum-5
}else if(sum >50 ){
youhuisum= sum-3
}else (sum<50){
youhuisum= sum
}
console.log(sum, youhuisum)

22SWITCH

注意:
1.===
2．不要比较运算符
3.break;必须写

24WHILE

26dowhile

dowhile可以执行一次
while不允许

do {
console.log ( "hello")
}while (false)

27-dowhile案例

do {
var res = prompt(“请输入你的名字")
console.log(res)
while (!res )
//输入名字循环

28循环分类语句

for(var n=1;n<=10;n++){
//console.log(n)
if (n<=3) {
console.log("广告商品",n)
}else {
console. log("普通商品",n)
}
}

29-for案例

判断闰年

var count = 4
for(var n=100e; n<=2000; n+=4){
if(n%400===0 l n%100!==) {
document.write(n+" ")
// document.write( "<br>")
count++
if ( count%4===0) {
document.write( "<br/>")
}
}

30 循环控制语句

BREAK终止循环
·在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环
要终止循环，就可以直接使用break 关键字

CONTINUE结束本次循环
·在循环中，把循环的本次跳过去，继续执行后续的循环
·比如:吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个
·跳过本次循环，就可以使用continue关键字

32乘法表

for (var m = 1; m<= 9; m++) {
for (var n = 1; n<= m; n+)r
//document.write(m+"*"+n+"="+m*n+" ")
document.write( "<span>"+m+"*"+n+"="+m*n+"</span>")

}
document. write( "<br>")
}

33 函数

//1.定义函数
//（1）声明式
function test1() {
console.log("我是test1套餐")
}
//(2）赋值式
var test3 =function(){
console.log("我是test3套餐")
}
//
//2.调用函数
test1()
test2()
//区别:（1）声明式 先调用再定义
//(2） 赋值式 先定义再调用
//外部 无法调用函数内部的变量值

35函数的参数

function test(a,b){
var yinliao = a===1?'可乐':'雪碧'
var xiaoshi = b===1?'薯条:'鸡米花'
var zhushi ="鸡腿堡"
console.log("我是套餐A" ,yinliao,xiaoshi,zhushi)
}
test(1,2)
test(2,1）
test()
//3.形参只能再函数内部去使用

37返回值

注意:1 return看需求
2. return后面无法执行了,

39预解析

预解析其实就是聊聊js 代码的编译和执行
·js 是一个解释型语言，就是在代码执行之前，先对代码进行通读和解泽，然后在执行代码也就足说，我们的js线码在运行的时候，会经历两个环节解释代码和 行代码

40重名问题

以第二个命名为准

42访问规则

·当我想获取一个变量的值的时候，我们管这个行为叫做访问●获取变量的规则:
do.一
○首先，在自己的作用域内部查找，如果有，就直接拿来使用。如果没有，就去上一级作用域查找，如果有，就拿来使用。如果没有，就继续去上一级作用域查找，依次类推
。如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量is not defined)

赋值规则
-当你想给一个变量赋值的时候，那么就先要找到这个变量，在给他赋值·变量赋值规则:
-先在自己作用域内部查找，有就直接赋值
-没有就去上一级作用域内部查找，有就直接赋值o还没有再去上一级作用域查找，有就直接赋值
-如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，再给他赋值

43-对象数据类型

44对象基本操作

//增
var obj =0}
console.log(obj)
obj.name = "kerwin"
obj.age = 100
obj.location = "dalian"
console.log(obj)
//查
document.write("姓名是"+obj.name)
//改
obj.age = 200
console.log(obj)
//删
//obj.name = ""
delete obj.name
console.log(obj)
 
// 2-增
var obj2 ={}
// var name = "aaa"
obj2[ "name"] = "tiechui"
console.log(obj2)

//2-查
console.log(obj2["name"])
//2-改
obj2["name"] = "tiechui2"
console.log(obj2)
//2-删
delete obj2["name" ]
console.log(objz5

针对不符合命名规则的用法2

45对象的遍历

for循环实现全部打印

for(var i in obj){
document.write(i+" : "+obj[i])
document.write( "<br>")
}

46不同数据类型的存储

var obj2={}
for(var i in obj){
//i obj[i]
obj2[i] = obj[i]
}
obj2.name = "tiechui"
console.log(obj,obj2)

复制对象

47-数组数据类型

14.数组
·字面理解就是数字的组合
·准确的来说数组是一个数据的集合
·也就是我们把一些数据放在一个盒子里面，按照顺序排好
[1,2,3,’ hello’, true，false]
·这东西就是一个数组，存储着一些数据的集合

//字面量
var ageArr = [ 12,14,15,16]
var nameArr = [ "kerwin" , "xiaoming" , "tiechui"]
var studentArr = [{
name : "kerwin" ,
age:100
},{
name : "xiaoming",
age: 18
}]
console.log(ageArr)
//2 Array
var arr1 = new Array (12,14,15,16)
var  arr2= new Array (10)
console.log(arr1, arr2)

48-数组的基本操作

console.log(arr1.length)
//获取长度

//清空数组。
arr1.length=0
console.log(arr1)
//索引0,1,2,3
var arr2 = [ "kerwin" , "xiaoming" , "tiechui"]
console.log(arr2[0],arr2[1],arr2[2])
//遍历
var arr3 =[3,4,5,6,7,8]
for(var i=0; i<arr3.length; i++){
console.log(arr3[i])
}
//复制
var arr4 =[]
for(var i=0; i<arr3. length; i++){
/ /console.log( arr3[i])
arr4[i] = arr3[i]
}

49 冒泡排序法

for (var m = o; m < arr.length - 1; m++){
for (var i = o; i < arr.length - 1 -m ; i++){
if ( arr[i] > arr[i + 1]){
var temp = arr[i]
arr[i] = arr[i +1]
arr[i +1] = temp
}
}
}

50选择排序法

for (var m = o; m<_arr.length - 1; m++) {
var minIndex = m
for (var i = m+1; i < arr.length; i++){
if (arr[i] < arr[minIndex]) {
minIndex = i
}
}
// console.log(minIndex)
var temp = arr[m]
arr[m] = arr[minIndex]
arr[minIndex ] = temp
}
console.log(arr)

51-数组常用方法-1

var arr =[1,2,3]
//push后面追加元素，
//返回值长度
var res = arr.push( "kerwin"')
console.log(arr)
console.log("返回值" ,res)
// pop后面删除元素
//返回值删除的元素
var respop = arr.pop()
console.log(arr)
console.log("返回值",respop)

// unshift前面追加元素
//返回值长度
var resunshift = arr.unshift( "tiechui")
console.log(arr)
console.log("返回值" , resunshift)
// shift 前面删除元素
//返回值删除的这个元素
var resshift = arr.shift()
console.log(arr)
console.log("返回值" ,resshift)

// splice删除
var arr2 =-[ "kerwin" , "xiaoming" , "tiechui"]
var ressplice = arr2.splice(1,2)
console.log(arr2)
console.log("返回值" , ressplice)
// splice增加
var arr2 =[ "kerwin" , "xiaoming", "tiechui"]
var ressplice = arr2.splice(1,2,"gangdaner")
console.log(arr2)]
console.log("返回值" , ressplice)

arr2.splice(0,0, "aaaaaa")
console.log(arr2)
arr2.splice(6,0, "bbbbbbb")
console.log(arr2)

// resver倒序
var arr3 = [2,1,3,4]
arr3.reverse()
console.log(arr3)
// sort 排序
var arr4 =[11,21,3,56,7]
arr4.sort()
console.log(arr4)

//sort接受一个回调函数
arr4.sort(function(a,b){
return b-a
//a-b正序
//b-a倒序
})
console.log(arr4)

sort

52-数组常用方法-2

//不影响原数组的方法

// concat拼接
var arr1= [1,2,3]
var arr2 = [4,5,6]
var arr3 = arr1.concat(arr2,7,[8,9])
console.log(arr1,arr2,arr3)

//join数组=>字符串
var arr =[1,2,3,4,5]
document.write(arr.join("-"))

// slice截取（开始索引，结束索引)
var arr = [ "aaa" , "bbbb" , "ccc" , "ddd" , "eeee"]
var arr2 = arr.slice(0,2)
console.log(arr,arr2)

53数组去重

//1 -方法
var arr = [1,2,3,4,3,5,6,2,1]
var arr2 = []
for(var i=0;i<arr.length;i++){
if( arr2.indexOf(arr[i])=== -1){
arr2.push(arr[i])
}
}
console.log(arr, arr2)


//2-方法-利用对象
var obj=0
for(var i=0;i<arr.length;i++){
obj[arr[i]]="随便"
}
console.log(obj)var arr2 =[]
for(var i in obj){
arr2.push(i-o)
}
console.log(arr2)
//3- new Set
var set1=new Set(arr)//去重
console.log( set1)
var arr1 =Array.from(set1)//变回数组
console.log(arr1)

54数组常用方法

// map映射
var arr = [1,2,3,4,5]
var arr2 = arr.map(function( item){/ /return item*item*item
 })
console.log(arr2)

var arr =[ "xiaoming" , "kerwin" , "tiechui"]
var arr2 = arr.map(function(item){
return "<li>"+item+"</li>"
})
console.log(arr,arr2)
document.write(arr2.join(""))

//filter过滤
var arr =[
if
name : "aaa",
price:100},
{
name : "bbb",
price: 200},
{
name : "ccc",
price: 300
}
]
var arr2 = arr.filter(function(item){
//console.log(item)
return item.price>200
})
console.log(arr2)

// every每一个
var arr =-[90, 90,2,94]
var arr2= arr.every(function( item)
return item>=90
})
console.log(arr2)
// some只要一个满足条件就是true

//var arr2= arr.find(function(item){
//find只有找到遇到的第一项，不能多个

// reduce 叠加
var arr = [1,2,3,4,5]
var arr2= arr.reduce(function(prev,item){
return prev+item
},"")
console.log(arr2)

55字符串的基本操作

定义字符串2种

var str1 ="hello"
console.log(str1+" world")
var str2 =new string( "hello")
console.log(str2+ " world" )

// length只读
//索引/下标只读
//遍历

57字符串常用方法

//chartAt(索引)返回索引对应的字符
//charCodeAt(索引）·返回索引对应的字符编码

//chartAt(索引)返回索引对应的字符
var str = "kerwin"
var str1 = str.charAt(10)
console.log(str,str1)
//charCodeAt(索引）·返回索引对应的字符编码
var str1 = str.charCodeAt(0)
console.log(str1)

//全部转化大写小写

console.log(str.toUppercase())
console.log(str.toLowerCase())

//截取substr(开始索引，长度) substring(开始索引，结束索引) slice(开始索引，结束索引)

var str = "kerwin"
var str1 = str.substr(1,2)
var str2 = str.substring(1,2)
var str3 = str.substring(1)
var str4 = str.slice(1,2)
var str5 = str.slice(1)
var str6 = str.slice(1,-1)
console.log(str1,str2,str3,str4,str5,str6)

er e erwin e erwin erwi

---

• replace替换-正则表达式

replace替换-正则表达式
var str ="abdwadwa"
var str1 = str.replace( "a" , "*"）
console.log(str1)

// split分割join

// split分割join
var str- = "a| b | c | d"
console.log (str.split(“|"))

从前面查，从后面查
// indexof lastIndexof

// indexof lastIndexof
var str = "abcda"
console.log(str.indexOf("a",1))
console.log(str.lastIndexof("a",3))

// concat连接字符串+

// concat连接字符串+
var str = "abcd"
// var str1 = str.concat( "ef")
var str1 = str+"ef"
console.log(str1)

---

//trim 去掉首尾空格
//trimStart() trimLeft()去掉首空格
//trimEnd() trimRight()去掉尾空格

59json格式字符串

JSON字符串规矩比较严格
parse解析JSON字符串转对象
stringify字符串转换JSON

// { "key" : 110, "key" : "123"}
// json字符串==》对象
var str = '{ "name" : "kerwin" , "age" : 100}'
console.log(str)
var obj =JSON.parse(str)
console.log(obj)
//前=》后
var obj1 = { "name" : "tiechui"}
var str1 = JSON.stringify(obj1)

60字符串模板

var myhtml = "<li>11111</li><li>2222</li><li>333/li>"
//如果想折行，加\.或者反引号
var myhtml = '<li>11111</li>\
<li>2222</li>\
<li>3333</li>'

反引号里面加${ }会默认为JS
加单引号认为普通字符串

61 -数字常用方法

/ / Number toFixed()返回是字符串，保留小数
//Math对象
// random //0-1-随机整数
console.log(Math.random())
//rond四舍五入取整
console.log(Math.round(4.46))
// ceil向上 floor向下取整
console.log(Math.floor(4.96))
//abs绝对值
console.log(Math.abs( -10.2))
// sqrt平方根9
console.log(Math.sqrt(8))
//pow(底数，指数)
console.log(Math.pow(3,3
// max(多个参数)
console.log(Math.max( 10,50,20,34))
//min(多个参数)
console.log(Math.min( 10,50,20,34))
//PI
console.log(Math.PI)

63时间对象

Date
·js 提供的内置构造函数，专门用来获取时间的

// new Date传参
//1个传参毫秒数
var date1= new Date(1000e)console.log(date1)
// 197011 0:0:1


//2个参数 3个参
var date2 = new Date(2023,0,3,10,10,10)console.log(date2)
//0代表1月



//字符串
var date3= new Date("2023-10-10 10:10:10")
console.log(date3)

64-时间对象常用方法

var date = new Date()
//getFullYear()
console.log(date.getFullYear())
//getMonth() 0-11===>1-12
console.log(date.getMonth())
//getDate()
console.log(date.getDate())
//getDay()周日e周一-周六1-6
console.log (date.getDay())

//getTime()时间戳

console.log(date.getTime())
//console.log(new Date(1653280060490)|T

//设置

console.log(date)

date.setFullYear(2025)
console.log(date)

date.setMonth(5)
console.log(date)

date.setDate(25)
console.log(date)
//不能设置周

65定时器

·在js 里面，有两种定时器，倒计时定时器和间隔定时器

//倒计时
// window.alert()
setTimeout(function(){
console.log( "kerwin")},2000)//注册定时器


// setInterval
setInteivafunction(){
})//注册间隔定时器

返回值是设置的第几个定时器

68-浏览器可视窗口的尺寸

console.log (window.innerHeight,innerHeight)
console.log(window.innerwidth,innerwidth)

69-浏览器的弹出层

1. // alert

//询问框
btn.onclick =function(){
var res = confirm("你确定删除吗?")
console.log(res)
if(res){
}else{
}
}

//输入框 prompt
btn.onclick= function(){
var res=·prompt("请输入你得用户名")
console.log(res)
]}

70-浏览器的地址栏

获取当前页面地址

console.log( location.href)//地址

---

跳转页面

<button id="btn">下一个页面</button>

btn.onclick = function(){
location.href = "http://www. baidu.com"
}

herf可读可写可赋值

重新加载

// reload
btn2.onclick = function(){
location.reload()
}

71浏览器的常见事件

window.onload = function(){
//页面所有得资源都加载完后执行(图片，视频，dom)
console.log(“加载完成")
console.log(btn)
}

可以使JS放在前面，可以在head里面写

---

监测横屏竖屏
窗口移动变化时打印

// resize
window.onresize = function({
console.log ( "resize")

滚动条触发时启动

window.onscroll =function(){
console. log("scroll","滚动距离达到指定距离了?")
}

72浏览器滚动距离

可以兼容高低版本

window.onscroll = function(){
console.log(document.documentElement.scrollTop ||
document.body. scrol1Top)}

console.log (document.documentElement.scrollLeft || 
document.body .scrollLeftb）
//横向打印

回到顶部

btn.onclick = function(){
// window.scrollTo(0, 0)
//1．两个数字
//2．对象
window.scrollTo({
left:0,
top:0
})
}

73-浏览器打开标签页

新页面打开百度

btn2.onclick = function(){
window.close()
}
//关闭本页面

74浏览器的历史记录

跳转到上一个页面

75浏览器本地存储

setItem存
//存，只能存字符串，不能存对象，

getItem取
removeItem删
clear全清

btn3.onclick = function(){
//console.log()
localstorage.removeItem( "name")
}
btn4.onclick = function(){
// console.log()
localstorage.clear()
}

//永久存储localStorage
//会话存储sessionStorage关闭页面就丢失

---

• setItem存,想存其他的用JSON转一下
  
• 取也改一下

---

78-获取元素的方式

/*
html, head , body非常规
常规=>id,class,tag, , ,,,*/
console.log(document.documentElement) // rem
console.log(document.head) //获取head
console.log(document.body)//获取body

//getElementById
console.log()
var obox = document.getElementById("box")
obox.innerHTML = "22222"
//只能选一个ID，获取ID并修改

//getElementsByClassName
//获取CLASS
var items = document.getElementsByClassName("newsitem")
console.log(items.filter）
//伪数组

// Set => Array .from
var newitems = Array.from(items)
console.log(newitems.filter)
//伪数组转真数组 

//找标签
//getElementsByTagName
var items = document.getElementsByTagName( "li")
console.log(items)

//找名字
// getElementsByName

// querySelector 返回一个对象，
var item = document.queryselector( "ul li")
console.log(item)
// queryselectorAll
var items = document.querySelector( "ul li.newsitem")
console.log(items)

79 操作元素属性

//自定义属性 setAttribute getAttibute removeAttibute

//自定义属性 setAttribute getAttibute removeAttibute

//成功设置自定义属性
box.setAttribute( "tiechui" , "222222")
//获取
console.log(box.getAttribute( "tiechui")
//成功删除
box.removeAttribute( "tiechui")

约定分别自定义和自带的
加data-

//h5 ===>约定 data-******.dataset
//删改
console.log( box2.dataset)
box2.dataset.xiaoming = "hello3"

82 操作元素文本内容

console.log (box.innerHTML)
box.innerHTML = "<h1>11111111</h1>"//可以解析html
//输出11111111

console.log(box.innerText)//获取只有文本
box.innerText = "<h1>1111111</h1>"//不解析html
//输出<h1>1111111</h1>

84-操作元素样式

//只能行内样式方法style---可读可写
console.log(box.style.width)
console.log(box.style[ "background-color"])
console.log(box.style.backgroundcolor)·//驼峰

box.style.width = "200px"
box.style.backgroundColor = "red"

//内部样式，外部样式，行内 getcomputedstyle获取，不能赋值写样式。
var obox = document.getElementById( "box")
//var res = getcomputedstyle(obox) [ "background-color"]
var res = getComputedstyle(obox).backgroundcolor
console.log(res)

85-操作元素类名

// classList属性
console.log(box.classList)
// box.classList.add ( "item2")
box.classList.remove( "item2")
box.classList.remove( "item1")


//切换toggle
btn. onclick = function()i
box.classList.toggle("item")
}

88DOM节点

89获取节点的方式

// childNodes属性vs children
console.log(box.childNodes)//所有节点
console.log(box.children)//所有元素

// firstChild firstElementChild
console.log(box.firstChild)//第一节点
console.log(box.firstElementChild)//第一元素

// lastChild -lastElementChild
console.log(box.lastchild)
console.log(box.lastElementchild)

// previoussibling previousElementsibling
console.log(box.previousSibling)
console.log(box.previousElementsibling)
//前一个兄弟节点/元素

// nextSibling nextElementsibling
//下一个兄弟节点/元素

// parentNode vs parentElement父元素
console.log(box.parentNode.parentNode.parentNode)
console.log(box.parentElement.parentElement.parentElement)

// console.log(box.getAttribute( "index" ))
console.log(box.attributes[1])

90操作DOM节点

我们所说的操作无非就是增删改查(CRUD)
·创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来)
向页面中增加一个节点
删除页面中的某一个节点
修改页面中的某一个节点
获取页面中的某一个节点

//插入节点
// box.appendchild(odiv)

//insertBefore(要插入的节点，谁的前面)
// box.insertBefore(odiv , child)

//删除节点(节点对象)
//box.removeChild(child)T

box.remove(//删除自己以及后代

//替换节点 replacechild(新的节点，老的节点)
var odiv2= document.createElement( "div")
odiv2.innerHTML = "2222222"
box.replaceChild(odiv2,child”)

//克隆节点()false 不克隆后代
// true克隆后代

var oCloneBox= box.cloneNode(true/*false*/  )
console.log(oCloneBox)

92-节点属性

93获取元素尺寸

·就是获取元素的"占地面积"
offsetWith和offsetHeight
. offsetwidth :获取的是元素内容+ padding + border的宽度
. offsetHeight:获取的是元素内容+ padding + border的高度
clientWidth和clientHeight
. clientwidth:获取的是元素内容+ padding 的宽度
. clientHeight :获取的是元素内容+ padding的高度
注意:
获取到的尺寸是没有单位的数字
当元素在页面中不占位置的时候，获取到的是0
display : none拿不到

94-获取元素偏移量

参考点:是定位父级
如果父级元素都没有定位reletive,偏移量相对于body
console.log (list.clientLeft,list.clientTop)

. clientLeft,clientTop 相对于边框偏移量

95获取可视窗口的尺寸

//计算滚动条
console.log("宽度",innerwidth)
console.log("高度",innerHeight)
//不计算滚动条
console.log("宽度", document.documentElement.clientWidth)
console.log("高度", document.documentElement.clientHeight)

97初识事件

一个事件由什么东西组成
触发谁的事件:事件源
触发什么事件:事件类型
触发以后做什么:事件处理函数

/ / dome类型–后面会覆盖前面的。

// dom2_绑定多个事件处理函数按照顺序执行
box2.addEventListener( "click" ,function(){
console.log( "1111111")
})

给box2添加了一个事件处理器，事件类型是click，点击触发函数

98事件解绑

第一种

//事件解绑-dom0
btn.onclick = function(){
console.log("谢谢惠顾")
this.onclick = null

第二种

//事件解绑dom2
function handler(){
console.log("谢谢惠顾")
this.removeEventListener( "click" , handler)
}
btn.addEventListener( "click" , handler)
//btn.removeEventListener("click " , handler)

99事件类型

.常见的事件
·我们在写页面的时候经常用到的一些事件
·大致分为几类，浏览器事件/鼠标事件/键盘事件/表单事件/触摸事件

鼠标事件

click单击触发
dblclick双击触发

btn.onclick = function(){
console.log("单击执行")
}
btn. ondblclick = function(){
console.log("双击执行")
}

contextmenu右键单击

document.oncontextmenu = function(){
console.log(“右键单击.自定义右键菜单")
}

/mousedown鼠标按下 mousemove鼠标移动 mouseup鼠标抬起/

box.onmousedown= function(){
console.log("鼠标按下")
}
box.onmousemove = function(){
console.log("鼠标移动")
}
box.onmouseup = function(){
console.log("鼠标抬起")
}

//移入移出 mouseover mouseout

//移入移出mouseenter mouseleave
(子元素没反应）

键盘事件window , document，输入框input

username.onkeydown = function(){
console.log("按下键盘","判读是不是回车键")
}
username.onkeyup =function(){
console.log("抬起键盘","判读是不是回车键")
}

表单事件

focus blur

username.onfocus = function(){
console.log("获取焦点")
}
username.onblur =function(){
console.log("失去焦点")
}

//change获取焦点失去焦点的对比
//里面内容不一样才会触发
username.onchange = function(){
console.log("失去焦点")
}
// input内容不一样
username.oninput= function(){
console.log( "input")
}

// submit ,reset
myform.onsubmit = function(){
console.log ( "submit")
//return false校验表单内容
}



myform.onreset = function(){
console.log("reset")
}

``
触摸事件
-

```javascript
box.ontouchstart=function(){
console.log( "touchstart")
}
box.ontouchmove =function(){
console.log( "touchmove")
}
box.ontouchend= function(){
console.log( "touchend"')
}

100事件对象

keyCode获取信息

username.onkeyup = function(evt){
console.log(evt.keyCode)
if(evt.keycode===13){
console.log("创建节点")
}
}

101-事件对象-鼠标事件

clientx clientY距离浏览器可视窗口的左上角的坐标值
pagex pageY 距离页面文档流的左上角的坐标值工
offsetx offsetY距离触发元素的左上角的坐标值

box.onclick =function(evt){
console.log(evt.clientx,evt.clientY)
console.log(evt.pagex,evt.pageY)
console.log(evt.offsetx,evt.offsetY)
}

104-DOM事件流

·当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件

标准的dom事件流:
捕获: window=>docuemtn=>body=>outer
目标:inner
冒泡:outer=>body=>docuemnt=>window
默认情况只在冒泡触发
按照dom2事件绑定，并进行配置才能看到捕获的回调函数被触发。

105阻止事件传播

阻止事件传播
evt.stopPropagation()
ie
evt.cancelBubble = true

106-阻止默认行为

//dom0 return false 阻止默认行为
document.oncontextmenu = function(){
console.log("右键单击.自定义右键菜单")
return false
}

// dom2 evt.preventDefault()
// dom2 ·ie evt.returnValue .= .false
document.addEventListener( "contextmenu" ,function(evt){
console.log("右键单击.自定义右键菜单")
//-return-false
evt.preventDefault(})