循序渐进学 JavaScript ＜二＞

发布时间：2024年01月20日

续 <一>

在这里插入图片描述

九、JavaScript常见内置类

9.1 原始类型的包装类

基本数据类型也可以调用属性
- 在理论上来说它们是没有办法获取属性或者调用方法的
原始类型是简单的值，默认并不能调用属性和方法
js 为了可以使其获取属性和调用方法，对其封装了对应的包装类型
- 普通字符串==》包装类型
常见的包装类型
- String、Number、Boolean、Symbol、BigInt

9.2 包装类型的使用过程

根据初始值，创建一个原始类型对应的包装类型对象
调用对应的属性或者方法，返回一个新的值
创建的包装类对象被销毁
但是通常 js 引擎会进行优化，跳过包装类的过程在内部直接完成属性的获取或者方法的调用

9.3 Number 类补充

具有自己的属性
- 类属性
具有实例方法
- 实例方法：通过对象来调用
- toFixed()
- toString()

<script>
    var num = 19//new Number(num)
    // integer:整数
    // 类属性
    console.log(Number.MAX_SAFE_INTEGER);
    // 对象方法
    var num1 = 3.333454
    // 转化成字符串类型
    console.log(num1.toString());
    // 转换为二进制
    console.log(num1.toString(2));
    console.log(123..toString());
    // 保留三位小数
    console.log(num1.toFixed(2));
    // 类方法
    // 字符串转数字类型
    var str = "123.24"
    Number(str)//不做区分浮点数和整数
    Number.parseInt(str)
    Number.parseFloat(str)
    // window对象上面
    console.log(parseInt(str));


  </script>

9.4 Math 对象

是一个对象类型，不是构造函数

<body>
  <script>
    console.log(typeof Math);


  // Math对象的属性
  console.log(Math.PI);
  var num = 3.13
  console.log(Math.floor(num));
  console.log(Math.ceil(num));
  console.log(Math.round(num));
  // random：[0,1)
  console.log(Math.random());
  // 需求5~50的随机数
  // [5,20）
  var randomNum = Math.floor(Math.random()*45)+5
  
  </script>
</body>

9.5 Number、Math 的常见操作

9.5.1 Number 类的操作

类属性
- Number.MAX_SAFE_INTEGER 最大安全整数
- Number.MIN_SAFE_INTEGER 最小安全整数
实例方法
- toString(base)，将数字转成字符串，并且按照base进制进行转化
- toFixed(digits)，格式化一个数字，保留digits位的小数,会四舍五入
类方法
- Number.parseInt(string[, radix])，将字符串解析成整数，也有对应的全局方法parseInt；
- Number. parseFloat(string)，将字符串解析成浮点数，也有对应的全局方法parseFloat；

9.5.2 Math 的常见操作

属性
- Math.PI：圆周率
常见的方法
- Math.floor：向下舍入取整
- Math.ceil：向上舍入取整
- Math.round：四舍五入取整
- Math.random：生成0~1的随机数（包含0，不包含1）
- Math.pow(x, y)：返回x的y次幂
公式: [a,b)的随机数
- y=a,x=b-a, Math.floor(Math.random() * x) + y

9.6 String 类的补充

属性
- length:获取字符串长度
访问某一个位置对应的字符
遍历

<script>
    // 属性
    var message = "lili"
    console.log(message.length);
    // 访问某一个位置对应的字符
    console.log(message[3]);//超出范围：undefined
    console.log(message.charAt(3));//超出范围：空字符串
    // 3. 字符串的遍历
    // 3.1 for普通遍历
    for(let i =0;i<message.length;i++){
      console.log(message[i]);
    }
    // 3.2 for..of遍历 -> 迭代器:目前就字符串和数组
    // 对象不支持for...of
    // string对象内部将字符串变成了一个可迭代对象
    for(var char of message){
      console.log(char);
    }
  </script>

字符串不能修改

// 4. 修改字符串
// 创建新的字符串，让变量指向了一个新的值
message = "加加加"
// 严格的修改字符串：修改之前的字符串内部
message[1] = "0"
// 所有字符变成大写:生成新的字符串
var message1 = message.toUpperCase()
console.log(message1);
// 变成小写
var message2 = message.toLowerCase()

查找字符串
- indexOf
- includes
- startWith
- endWith
- replace

// 判断一个字符串中是否有另外一个字符串
// 5.1 indexOf(searchString,fromIndex)
/*
      index:搜索到，返回搜索字符串所在的索引位置
            没有搜索到，返回-1
    */
var index = message2.indexOf(name)
console.log(index);
// 存在
if (message2.indexOf(name) !== -1) {
  console.log("message2中包含name");
} else {
  console.log("message2中不包含name");
}


// 5.2 includesES6新增语法，用来判断包含关系
if (message2.includes(name)) {
  console.log("哈哈哈哈好好照顾自己~~");
}
// 5.3 startWith：是否以xxx开头
if (message2.startsWith("my")) {
  console.log("messages以my开头");
}
   // 5.4 endWith：是否以xxx开头
    // 5.5 replace：替换字符串("替换谁",正则表达式、代替值、函数)
    var newMessage = message2.replace("lili", "涵涵")
    console.log(newMessage);
   var newMessage2 = message2.replace("lili", function () {
      // 使用函数返回的值去替代字符串
      return "kobe"
    })
    console.log(newMessage2);
  // 6. 获取子字符串：slice、substring、substr
    // slice
    var clothes = "衣服包包鞋子"
    console.log(clothes.slice(3));//截到最后
    console.log(clothes.slice(1, 3));
    // substr:浏览器是否支持

获取子字符串：slice

// 6. 获取子字符串：slice、substring、substr
// slice
var clothes = "衣服包包鞋子"
console.log(clothes.slice(3));//截到最后
console.log(clothes.slice(1, 3));
// substr:浏览器是否支持

字符串拼接

// 7. 字符串的拼接
// 7.1 +
var str1 = "lili"
var str2 = "哈啰"
var newStr = str1 + str2
// 7.2 concat:支持链式调用,参数是可变参数...
var newStr2 = str1.concat(str2, newStr)

删除首尾的空格

// 8. 删除首尾空格
console.log("           lili   ".trim());

字符串的切割

// 9. 字符串的切割split：返回值是一个string类型的数组
var infos = "aaa-bbb-ccc-ddd"
// 传入一个分隔符
var items = infos.split("-")
console.log(items);
// join:把数组转为字符串,参数为以什么连接
var str3 = items.join("*")
console.log(str3);

补齐字符串：str.padStart(4, “0”)

9.7 数组 Array

一系列的商品，使用键值对访问并不方便，需要一个有序的集合，里面的元素是按照某一个顺序来排列的，可以通过索引来获取到它----编程语言提供了一种数据结构：数组[]

<body>
  <script>
    // 1. 创建数组的方式一：字面量的方式
    var names = ["aaa", "bbb", "ccc"]//字符串类型
    var products = [
      { name: "iphone", price: 99, desc: "九块九" },
      { name: "鼠标", price: 199, desc: "哈哈" },
      { name: "键盘", price: 989, desc: "六点多" },
    ]//对象类型
    // 2. 创建数组方式二：类Array
    var arr1 = new Array()
    console.log(arr1);
    var arr2 = new Array("abc", "cba", "nba")//["abc","cba","nba"]
    console.log(arr2);
    // 传入一个数字，会默认当成常见一个对应长度的数组
    var arr3 = new Array(5)//[empty * 5]
  </script>
</body>

数组的基本操作

 <script>
    var names = ["aaa", "bbbb", "ccccc"]
    // 1. 访问数组中的元素
    console.log(names[0]);
    console.log(names.at(-1));
    // 2. 修改数组中的元素
    names[0] = "why"
    // 3. 新增数组中的元素
    names[3] = "kobe"//没有人这么做
    // 4. 删除数组中的元素
    delete names[1]//empty,没有人这么做
    
  </script>

<script>
    var names = ["lili", "dameinb", "jiao"]
    // 在数组的尾部添加和删除元素
    // push方法
    names.push("aaaa", "dddd")
    // pop方法
    names.pop()
    // 在数组的头部添加和删除元素:效率非常低
    // unshift方法
    names.unshift("sss", "hhh")
    // shift方法
    names.shift()
    // splice方法：处理数组的利器，修改的是原数组
    // 能够在任意位置添加/删除/替换元素
    // 参数一：start，从什么位置开始操作函数
    // 参数二：deleteCount，删除元素的个数
    // 1. 删除元素
    names.splice(1,2)
    // 2. 新增元素:deleteCount=0,后面可以添加新的元素
    names.splice(1,0,"why","kebe")
    // 3. 替换元素:先移除，再新增
    names.splice(1,2,"lisssss","yejie")
  </script>

length 属性
- length属性是可写的，可以扩容，但是一般不需要扩容
- 清空数组：arr.length = 0

<script>
    var names = ["lilio", "xiaoming", "xiaohong"]
    // 获取数组的长度
    console.log(names.length);
    // length属性可写的
    names.length=10
    // 会自动对数组进行扩容
    // 设置的length小于原来的元素个数
    names.length = 2//会将后面的内容截取掉
  </script>

数组的遍历

// 数组的遍历
    // 1. 普通的for循环
    for (var i = 0; i < names.length; i++) {
      console.log(names[i]);
    }
    // 2. for in:适用于需要获取对应的索引
    for (var index in names) {
      console.log(index, names[index]);
    }
    // 3. for of
    for (var item of names) {
      console.log(item);
    }

数组方法
- slice：对数组进行截取

var names = ["abc","ddd","ggg","ytyt"]
    // 1. slice 方法：不会修改原数组
    // 与splice 区别：splice修改原有的数组
    var newNames = names.slice(1)
    console.log(newNames);

concat:将多个数组拼接在一起

   // 2. concat :将多个数组拼接在一起
    var name1 = "lili"
    var name2 = "jiao"
    var name3 = "dandan"
    // 使用展开运算符
    const newNames = []
    newNames.push(...name1,...name2,...name3)
    const newNamess=name1.concat(name2,name3)
    console.log(newNamess);

join：将数组转成字符串，split：将字符串转化成数组

 // 3. join:将数组变成字符串
    console.log(names.join("-"));

查找元素
- indexOf：针对原始类型

 // 1. 数组中存放的是原始类型
    var names=["abc","cba","dddd"]
    // 1.1 indexOf
    // 找到返回索引
    // 没找到返回-1
    console.log(names.indexOf('abc'));

    // 2. 数组中存放的是对象类型
    var student = [
      {id:1002,name:"hey2",age:14},
      {id:1004,name:"hey3",age:15},
      {id:1005,name:"hey5",age:64},
      {id:1006,name:"hey4",age:34},
    ]
    // 查找id为1004的学生信息
    // 2.1 自己写一个for循环
    // var stu = {}
    // 因此初始化为null
    var stu =null
    // 赋值为空的缺点：1. 转为布尔值都是真值 2. 空对象会占用内存
    for(var i =0;i<student.length;i++){
      if(student[i].id === 1004){
        console.log(student[i]);
        stu = student[i]
        break
      }
    }
    // 判断有没有找到对应的学生
    if(stu){
      console.log("找到了");
    }

find 方法

    // 2.2 find方法:高阶函数:数组中有几个元素就会调用多少次传入的函数
    var stu = student.find(function (item) {
      // console.log(item);
      if (item.id === 1004) return true
    })
    // 简写：
    var stu = student.find(item => item.id === 1004)
  </script>

//手动实现高阶函数forEach
    var names = ["dd", "ddd", "gggg"]
    // forEach 函数：可以帮助遍历数组
    // names.forEach(function (item, index, err) {
    //   console.log(item, index, err);
    // })
    // //版本一：回调函数
    // // 自己实现上述函数
    // function liliForEach(fn) {
    //   for (var i = 0; i < names.length; i++) {
    //     fn(names[i], i, names)
    //   }
    // }
    // liliForEach(function (item, index, names) {
    //   console.log(item, index, names);
    // })

    // //版本二

    // function liliForEach(fn, arr) {
    //   for (var i = 0; i < arr.length; i++) {
    //     fn(names[i], i, arr)
    //   }
    // }
    // liliForEach(function (item, index, names) {
    //   console.log(item, index, names);
    // }, names)

    // // 版本三:往对象里面加属性
    // names.liliForEach = function liliForEach(fn) {
    //   for (var i = 0; i < this.length; i++) {
    //     fn(this[i], i, this)
    //   }
    // }
    // names.liliForEach(function (item, index, names) {
    //   console.log(item, index, names);
    // })

    // 版本四:放在原型链上
    Array.prototype.liliForEach = function liliForEach(fn) {
      for (var i = 0; i < this.length; i++) {
        fn(this[i], i, this)
      }
    }
    names.liliForEach(function (item, index, names) {
      console.log(item, index, names);
    })

//手动实现高阶函数forEach
   // 原始类型
    var names = ["abc", "vvv", "ooo1"]
    // 内部函数返回true，意味着找到了，后边就不需要遍历了，后面的不会继续执行
    // 没有返回值意味着返回undefined，布尔值为false
    names.find(function (item, index, arr) {
      console.log(item, index, arr);
      // return true//返回了第一个元素而不是true
    })

    // 数组中对象类型
    var students = [
      { id: 1002, name: "hey2", age: 14 },
      { id: 1004, name: "hey3", age: 15 },
      { id: 1005, name: "hey5", age: 64 },
      { id: 1006, name: "hey4", age: 34 },
    ]

    students.find(function (item) {
      console.log(item);
      return item.id === 1002
    })

    // 自己实现
    Array.prototype.liliFind = function (fn) {
      var item //可以不设定，默认为undefined
      for (var i = 0; i < this.length; i++) {
        var isFlag = fn(this[i], i, this)
        if (isFlag) {
          // item = this[i]
          // break
          return this[i]
        }
      }
      // return item
    }
    students.liliFind(function (item, index, arr) {
      return item.id === 101
    })

includes：返回 true / false
findIndex：查找元素的索引，找不到返回 -1

   // 查找元素
    // indexOf/lastIndexOf
    // includes
    console.log(names.includes('abc'));
    // findIndex：查找元素索引
    var findIndex = names.findIndex(function(item,index,arr){
      return item === 'nba'
    })
    console.log(findIndex);

数组的排序：sort修改原数组
数组的反转：reserve生成一个新的数组
其他高阶函数
- reduce
- filter
- map

    // 1.forEach函数
    var names = ["abc", "cba", "nba", "mba"]
    // 三种方式, 新增一种方式
    names.forEach(function (item) {
      console.log(item)
    })
    names.forEach(item => console.log(item))


    // 2.filter函数: 过滤
    var nums = [11, 20, 55, 100, 88, 32]
    // 2.1. for循环实现
    var newNums = []
    // for of方法
    for (var item of nums) {
      if (item % 2 === 0) {
        newNums.push(item)
      }
    }
    // 2.2. filter实现：形成新数组
    //  只筛选出满足条件的
    // var newNums = nums.filter(function(item) {
    //   return item % 2 === 0
    // })
    // console.log(newNums)

    // 3.map函数: 映射：对原来的数组元素进行变化，映射形成新数组
    var nums = [11, 20, 55, 100, 88, 32]
    var newNums = nums.map(function (item) {
      return item * item
    })
    console.log(newNums)


    // 4.reduce
    var numbers = [11, 20, 55, 100, 88, 32]
    var result = 0
    for (var item of numbers) {
      result += item
    }
    console.log(result)

    // initialValue: 初始化值, 第一次执行的时候, 对应的preValue
    // 如果initialValue没有传呢?
    var result = nums.reduce(function(preValue, item) {
      console.log(`preValue:${preValue} item:${item}`)
      return preValue + item
    }, 0)
    console.log(result)
   // reduce练习
    var products = [
      { name: "鼠标", price: 88, count: 3 },
      { name: "键盘", price: 200, count: 2 },
      { name: "耳机", price: 9.9, count: 10 },
    ]
    var totalPrice = products.reduce(function(preValue, item) {
      return preValue + item.price * item.count
    }, 0)
    console.log(totalPrice)
    // 综合练习: 
    var nums = [11, 20, 55, 100, 88, 32]

 //   过滤所有的偶数, 映射所有偶数的平方, 并且计算他们的和
    var total = nums.filter(function (item) {
      return item % 2 === 0
    }).map(function (item) {
      return item * item
    }).reduce(function (preValue, item) {
      return preValue + item
    }, 0)
    console.log(total)

    var total = nums.filter(item => item % 2 === 0)
      .map(item => item * item)
      .reduce((preValue, item) => preValue + item, 0)
    console.log(total)

9.8 String 和 Array 常见操作

9.8.1 String 的常见操作

创建方式 new String()
属性
- length —获取字符串的长度
访问其中元素
- [0]
- charAt(0)
遍历
- 普通的for循环
- for…of方式
  - 可迭代对象
  - 字符串/数组
字符串不可变性
实例方法:
- toUpperCase() 将所有的字符转成大写；
- toLowerCase() 将所有的字符转成小写；
- indexOf 查找字符串位置
- includes 是否包含字符串
- startsWith 判断是否以xxx开头
- endsWith 判断是否以xxx结尾
- repace 替换字符串
- slice/substring/substr 获取子字符串
- concat 字符串拼接
- trim 去除首尾空格
- split 字符串分割,字符串—>数组
  - join 数组–>字符串

9.8.2 Array 的常见操作

创建数组
- [] 数组字面量
- new Array()
  - 传1个数组,表示数组的长度
数组基本操作
- 获取元素
  - [0]
  - at(0)
- 修改元素
  - arr[1] = "fff"
- 新增
  - arr[5]="123"
- 删除
  - delete arr[0]
在数组的尾部:
- push 尾部添加
- pop 删除尾部的最后一个元素,返回被删除的元素
在数组首部
- unshift 首部添加
- shift 删除首部的第一个元素,返回被删除的元素
利器
- splice 在任何位置添加/删除/替换元素
  - start 从什么位置开始操作元素
  - deleteCount 删除元素的个数
    - 2 删除2个
    - 0 添加元素
  - item1/item2 添加或者替换的元素

9.9 时间的表示

UTC :标准的时间
创建 Date对象

   //创建Date对象的方式
    // 1. 没有传入任何的参数，获取到当前时间
    var date1 = new Date()
    console.log(date1);
    // 2. 传入参数：时间字符串
    var date2 = new Date("2022-09-09")
    console.log(date2);
    // 3. 传入具体的年月日时分秒
    var date3 = new Date(2023, 10, 10, 9, 8, 7, 333)
    console.log(date3);
    // 4. 传入一个 Unix 时间戳==》需要转成对应的时间
    // 1s ==> 1000ms
    var date4 = new Date(100000000000233)
    console.log(date4);

Date 对象的字符串形式：new Date().toISOSTring()---- 但其实也不经常用
获取时间信息

  // 获取想要的时间信息
    var date = new Date()
    console.log(date.toISOString());
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    // 一周中的第几天
    var weekday = data.getDay()

Date转变为时间戳：

 //  Date对象如何转成时间戳
    var date = new Date()
    console.log(date);
    // 方法一：当前时间的时间戳
    var timestamp = Date.now()
    console.log(timestamp);
    var timestamp1 = date.getTime()//获取时间戳一
    var timestamp2 = date.valueOf()//获取时间戳二
    //计算操作花费的时间
    var startTime = Date.now()
    for (var i = 0; i < 10000; i++) {
      console.log(i);
    }
    var endTime = Date.now()
    console.log("花费的时间：", endTime - startTime);

十、JavaScript 的 DOM 操作

10.1 DOM 、BOM

利用浏览器提供给开发者的DOM、BOM相关的API才能对页面、浏览器进行操作
API：application programming interface
DOM：文档对象模型
- 浏览器将其抽取为一个个文档对象模型
- 将网页里面的所有内容表示为可以修改的对象
- 通过 api 去获取
- 整个的文档为 document
- js 语法和浏览器之间的桥梁
- 这些对象都可以通过JavaScript来对其进行访问
BOM：浏览器对象模型
- 浏览器提供的用于处理文档之外的所有内容的其他对象
- navigator、location、history

10.2 DOM

DOM tree:抽象成DOM对象的时候，会形成一个树结构
学习顺序
- DOM元素之间的关系
- 获取DOM元素
- DOM节点的 type、tag、content
- DOM 节点的attributes、properies
- DOM 节点的创建、插入、克隆、删除
- DOM 节点的样式、类
- DOM 元素/window的大小、滚动、坐标
继承关系图

10.3 document 对象

document 节点表示的是整个载入的网页，它的实例是全局的 document 对象
- 是DOM的入口点，可以从document开始去访问任何节点元素
对于最顶层的 html、head、body 元素可以直接在 document 对象中获取到：
- html元素： = document.documentElement
- body元素： = document.body
- head元素： = document.head
- 文档声明： = document.doctype

10.4 DOM 和 document 对象

DOM:文档对象模型(Document Object Model)将页面所有的内容表示为可以修改的对象
- 浏览器将编写在HTML中的每一个元素(Element)都抽象成了一个个对象
- 所有这些对象都可以通过JavaScript来对其进行访问，可以通过 JavaScript来操作页面;
- 将这个抽象过程称之为文档对象模型(Document Object Model)
Document节点表示的整个载入的网页，它的实例是全局的document对象:
- 对DOM的所有操作都是从 document 对象开始的
- 它是DOM的入口点，可以从document开始去访问任何节点元素;

10.5 节点之间的导航

父节点：parentNode
前兄弟节点：previousSibling
后兄弟节点：nextSibling
子节点：childNodes
第一个子节点：firstChild
第二个子节点：lastChild

10.6 元素之间的导航

获取到一个元素后，根据这个元素去获取其他的元素
父元素：parentElement
前兄弟节点：previousElementSibling
后兄弟节点：nextElementSibling
子节点：children
第一个子节点：firstElementChild
第二个子节点：lastElementChild

10.7 表格元素的导航

元素独特属性：
- table.rows —
元素的集合；
table.caption/tHead/tFoot — 引用元素
，
table.tBodies —
元素的集合；
，
，，元素提供了 rows 属性：
- tbody.rows — 表格内部元素的集合
- tr.cells — 在给定中的和单元格的集合；
- tr.sectionRowIndex — 给定的在封闭的 // 中的位置（索引）；
- tr.rowIndex — 在整个表格中的编号（包括表格的所有行）
和
- td.cellIndex — 在封闭的中单元格的编号

10.8 表单元素的导航

通过document来获取：document.forms
获取form元素中的内容：form.elements
设置表单子元素的name来获取他们
- elements.accounts.value

10.9 获取元素

通过导航获取：一层一层拿某个单独的元素非常不方便，当元素彼此靠近豁这相邻时候，导航属性非常有用
直接获取：
- document.getElementsByClassName(“keyword”)
- document.getElementById(‘title’)
- querySelector 和 querySelectAll

  // 1. 元素之间的导航
    // 1. 拿到 body
    var bodyEl = document.body
    // 2. 拿到 box
    var boxEl = bodyEl.firstElementChild
    // 3. 拿到 container
    var containerEl = boxEl.children[1]
    // 4. 拿到 p
    var pEl = containerEl.children[0]
    // 5. 拿到 keyword
    var spanEl = pEl.children[0]
    spanEl.style.color = 'red'
    // 2 通过getElementBy直接获取
    // 2.1 通过classname获取火速
    var keyword = document.getElementsByClassName("keyword")
    // 2.2 通过id获取元素
    var titleEl = document.getElementById('title')
    // 3 通过选择器查询
    var keyWordEL = document.querySelector('.keyword')
    var keywordEls = document.querySelectorAll('.keyword')
    // 是类数组对象但是是可迭代的,支持for of，有一个索引属性，不是数组
    //可迭代对象：String，数组，节点列表

10.10 节点的属性-nodeType

nodeType：节点的类型
- 数值类型：
- 10：DocumentType 节
- 9：Document
- 8：注释
- 3：文字
- 1：元素
nodeName：针对于节点，节点的名称
tagName：针对于元素，元素的标签名称
data/nodeValue：针对非元素的节点获取数据
innerHTML：对应的html元素也会获取，会直接进行替换，能够识别标签
textContent：只会获取文本内容，不能够识别标签
outerHTML
hidden属性：也是一个全局属性，可以用于设置元素隐藏,display
总结
- nodeName:获取node节点的名字
- tagName:获取元素的标签名词
- innerHTML:将元素中的 HTML 获取为字符串形式;设置元素中的内容
- outerHTML:包含了元素的完整 HTML;innerHTML 加上元素本身
- textContent:仅仅获取元素中的文本内容
- nodeValue:用于获取非元素节点的文本内容
- hidden:可以用于设置元素隐藏

10.11 元素的特性 attribute

分类
- 标准：html标准中原有的
- 非标准：自定义的
操作
- elem**.hasAttribute(name) — 检查特性是否存在**。
- elem.getAttribute(name) — 获取这个特性值，拿到字符串。
- elem.setAttribute(name, value) — 设置这个特性值。
- elem.removeAttribute(name) — 移除这个特性。
- attributes：attr 对象的集合，具有name、value属性；

10.12 元素的属性 property

对于标准的 attribute，会在DOM对象上创建与其对应的 property 属性：标准的attribute都有对应的 property
在大多数情况下，它们是相互作用的
- 改变property，通过attribute获取的值，会随着改变；
- 通过attribute操作修改，property的值会随着改变；
- 如果不支持就使用 setAttribute （比较标准）

10.13 动态修改样式

选择一：在 CSS 中编写好对应的样式，动态的添加 class
- 比较固定的值

   boxEl.className = 'active'

选择二：动态的修改style属性；
- 精准的修改

 boxEl.style.color = 'red'
 boxEl.style.fontSize = '24px'

10.14 元素的 className 和 classList

在 attribute 中对应为 class，对应的 property 为 className
className 会进行覆盖
添加或者移除单个的class，那么可以使用classList属性，不会覆盖掉其他的
- elem.classList 是一个特殊的对象
  - elem.classList.add (class) ：添加一个类
  - elem.classList.remove(class)：添加/移除类
  - elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除
  - elem.classList.contains(class)：检查给定类，返回 true/false。
- classList是可迭代对象，可以通过for of进行遍历

##　10.15 元素的 style 属性

单独修改某一个 CSS 属性，那么可以通过 style 来操作：
对于多词（multi-word）属性，使用驼峰式 camelCase
将值设置为空字符串，那么会使用 CSS 的默认样式
多个样式需要使用 cssText 属性

10.16 元素 style 的读取 - getComputedStyle

对于内联样式，是可以通过style.*的方式读取到的
对于 style、css 文件中的样式，是读取不到的
getComputedStyle 的全局函数来实现：getComputedStyle(boxEl).fontSize

10.17 data-自定义属性

HTML5 新增
如果直接写的话就是 attributes 添加了一个 age 属性，不推荐这种写法
推荐使用 data-*自定义属性
标签中自定义：data-age = '19'
在 script 中获取：boxEl.dataset.age

10.18 创建元素

插入一个元素

早期使用 document.write 方法写入

后期

步骤一：创建一个元素：document.createElement(tag)

// 真实地创建一个 DOM 对象
    var h2El = document.createElement("h2")
    h2El.textContent = '我是标题'

步骤二：插入元素到DOM的某一个位置；

    // 将元素加入boxboxEl
    boxEl.append(h2El)

10.19 插入元素

node.append(…nodes or strings) —— 在 node 末尾插入节点或字符串
node.prepend(…nodes or strings) —— 在 node 开头插入节点或字符串
node.before(…nodes or strings) —— 在 node 前面插入节点或字符串
node.after(…nodes or strings) —— 在 node 后面插入节点或字符串
node.replaceWith(…nodes or strings) —— 将 node 替换为给定的节点或字符串

10.20 移除和克隆元素

调用元素本身的 remove 方法
复制一个现有的元素，可以通过 cloneNode 方法
- 可以传入一个Boolean类型的值，来决定是否是深度克隆
- 深度克隆会克隆对应元素的子元素，否则不会

10.21 元素的大小、滚动

clientWidth：contentWith+padding（不包含滚动条）内容的宽度加上 padding
clientHeight：contentHeight+padding
clientTop：border-top的宽度
clientLeft：border-left的宽度
offsetWidth：元素完整的宽度
offsetHeight：元素完整的高度
offsetLeft：距离父元素的x
offsetHeight：距离父元素的y
scrollHeight：整个可滚动的区域高度
scrollTop：滚动部分的高度

10.22 window 的大小、滚动

**window 的 width 和 height **
- innerWidth、innerHeight：获取window窗口的宽度和高度（包含滚动条）
- outerWidth、outerHeight：获取window窗口的整个宽度和高度（包括调试工具、工具栏）
- documentElement.clientHeight、documentElement.clientWidth：获取html的宽度和高度（不包含滚动条）
window 的滚动位置：
- scrollX：X轴滚动的位置（别名pageXOffset）
- scrollY：Y轴滚动的位置（别名pageYOffset）
也有提供对应的滚动方法：
- scrollBy(x,y) ：将页面滚动至相对于当前位置的 (x, y) 位置：scrollBy(0,100)
- 方法 scrollTo ( pageX,pageY ) 将页面滚动至绝对坐标；

10.23 动态创建列表

<body>
  <ul class="list">

  </ul>
  <script>
    var ulEl = document.querySelector('.list')
    var isFlag = true
    while (isFlag) {

      var message = prompt('请输入待处理事件')
      if (!message) {
        isFlag = false

      } else {
        var liEl = document.createElement('li')
        liEl.textContent = message
        ulEl.append(liEl)
      }

    }
  </script>
</body>

10.24 倒计时

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .countdown {

      color: red;
      font-size: 40px;
    }

    .countdown .time {
      background-color: rgb(187, 119, 31);
      color: azure;
      display: inline-block;
      padding: 50px;
      border-radius: 3px;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <span class="time hour">03</span>
    <span class="split">：</span>
    <span class="time minute">03</span>
    <span class="split">：</span>

    <span class="time second">03</span>

  </div>

  <script>
    // 1. 获取元素
    var hourElement = document.querySelector('.hour')
    var minuteElement = document.querySelector('.minute')
    var secondElement = document.querySelector('.second')

    setInterval(function(){
    // 2. 获取倒计时的时间
    var nowDate = new Date()
    var endDate = new Date()
    endDate.setHours(24)
    endDate.setMinutes(24)
    endDate.setSeconds(24)
    endDate.setMilliseconds(24)
    // 间隔时间
    var interValTime = Math.floor((endDate.getTime() - nowDate.getTime()) / 1000)
    // 秒 ==》 小时 分钟 秒钟  按照六十进制
    var hour = Math.floor(interValTime / 3600)
    var minute = Math.floor((interValTime / 60) % 60)
    var second = interValTime % 60

    // 3. 设置内容
    hourElement.textContent = padLeft(hour)
    minuteElement.textContent = padLeft(minute)
    secondElement.textContent = padLeft(second)
    },1000)


    function padLeft(content, count, padStr) {
      count = count | 2
      padStr = padStr | '0'
      content = String(content)
      return content.padStart(count, padStr)
    }
  </script>
</body>

</html>

十一、JavaScript的事件处理

11.1 事件（Event）

Web页面需要经常和用户之间进行交互，而交互的过程中可能想要捕捉这个交互的过程
- 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置
- 浏览器需要搭建一条JavaScript代码和事件之间的桥梁，浏览器进行调用
- 当某个事件发生时，让JavaScript可以相应（执行某个函数），所以需要针对事件编写处理程序（handler）
事件监听
- 事件监听方式一：在script中直接监听（很少使用）
  - js 代码和 html 代码混合
- 事件监听方式二：DOM 属性，通过元素的on来监听事件
  - 获取元素对象，onclick属性
  - 不能调用多个函数，只有最后的函数会生效
- 事件监听方式三：通过 EventTarget 中的 addEventListener 来监听
  - 获取元素对象
  - btnEl.addEventListener (“click”,fn1)

11.2 事件冒泡和事件捕获

事件冒泡：默认情况下事件是从最内层的span向外依次传递的顺序
事件捕获：从外层到内层（body -> span）
如果都监听，那么会按照如下顺序来执行：
- 捕获阶段（Capturing phase）：事件（从 Window）向下走近元素
- 目标阶段（Target phase）：事件到达目标元素
- 冒泡阶段（Bubbling phase）：事件从元素上开始冒泡
事实上，可以通过event对象来获取当前的阶段：
- eventPhase
开发中通常会使用事件冒泡

##　11.3 事件对象

当一个事件发生时，就会有和这个事件相关的很多信息
- 比如事件的类型是什么，点击的是哪一个元素，点击的位置是哪里等等相关的信息
- 那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象
该对象提供了想要的一些属性，以及可以通过该对象进行某些操作
获取这个 event 对象
- event 对象会在传入的事件处理（event handler）函数回调时，被系统传入
- 可以在回调函数中拿到这个event对象

##　11.4 event 常见的属性和方法

常见的属性
- type：事件的类型
- target：当前事件发生的元素
- currentTarget：当前处理事件的元素（父元素）
  - 事件冒泡会有区别
- eventPhase：事件所处的阶段
  - 捕获：1
  - 目标：2
  - 冒泡：3
- offsetX、offsetY：事件发生在元素内的位置
- clientX、clientY：事件发生在客户端内的位置（可见的视口）
- pageX、pageY：事件发生在客户端相对于document的位置（文档）
- screenX、screenY：事件发生相对于屏幕的位置
常见的方法
- preventDefault：取消事件的默认行为
```
  var aEl = document.querySelector("a")
    aEl.onclick = function(event){
      event.preventDefault()
    }
```
- stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）

11.5 事件处理中的this

this指向谁跟浏览器怎么调用有关
- 绑定到谁身上就是指向谁
- 绑定到处理的元素 currentTarget

11.6 EventTarget类

所有的节点、元素都继承自EventTarget
- Window也继承自EventTarget
EventTarget
- EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件
- 可以实现类似于事件总线的效果
EventTarget常见的方法
- addEventListener：注册某个事件类型以及事件处理函数
- removeEventListener：移除某个事件类型以及事件处理函数
  - 移除要移除之前对应加进去的函数
- dispatchEvent：派发某个事件类型到 EventTarget 上

11.7 事件委托

利用事件的冒泡机制，以及事件对象中可以准确获知触发事件的元素机制(e.target)，将子元素事件委托给父元素处理的现象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
  </ul>
  <script>
    // 1.每一个li都监听自己的点击，并且有自己的处理函数 
    var liEls = document.querySelectorAll("li")
    for (const liEl of liEls) {
      liEl.onclick = function (event) {
        event.currentTarget.classList.add('active')
        console.log("点击li");
      }
    }
    // 2. 统一在ul中进行监听
    var ulEl = document.querySelector("ul")
    ulEl.onclick = function (event) {
      event.target.classList.add('active')
      console.log("点击li");
    }
    // 3. 点击li变成active，其他取消active
    var ulEl = document.querySelector("ul")
    // 3.1 变量记录的方式
    var activeLiEl = null
    ulEl.onclick = function (event) {
        // 边界判断
       if (activeLiEl && event.target !== ulEl) {
        activeLiEl.classList.remove("active")
      }
      // 3.2 给点击的元素添加active
    if (event.target !== ulEl) {
        event.target.classList.add('active')
      }
      console.log("点击li");
      // 3.3 记录最新的active对应的li
      activeLiEl = event.target
    }
  </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>Document</title>
</head>

<body>
  <div class="box">
    <button data-action="remove">移除</button>
    <button data-action="new">新建</button>
    <button data-action="search">搜索</button>
  </div>
  <script>
    var boxEl = document.querySelector(".box")
    boxEl.onclick = function (event) {
      var btnEl = event.target
      var action = btnEl.dataset.action
      switch (action) {
        case "remove":
          console.log("click remove");
          break

        case "new":
          console.log("click new");
          break
        case "search":
          console.log("click search");
          break
      }

    }
  </script>
</body>

</html>

11.8 常见的鼠标事件

click：当用户点击某个对象时调用的事件
contextmenu：在用户点击鼠标右键打开上下文菜单时触发
dblclick：当用户双击某个对象时调用的事件
mousedown ：鼠标按钮被按下
mouseup：鼠标按键被松开
mousemove ：鼠标被移动
mouseover ：鼠标移到某元素之上（支持冒泡）
mouseout ：鼠标从某元素移开（支持冒泡）
mouseenter ：当鼠标指针移动到元素上时触发（不支持冒泡）
mouseleave ：当鼠标指针移出元素时触发（不支持冒泡）

11.9 mouseover 和 mouseenter 的区别

mouseenter 和 mouseleave
- 不支持冒泡
- 进入子元素依然属于在该元素内，没有任何反应
mouseover和mouseout
- 支持冒泡
- 进入元素的子元素时
  - 先调用父元素的mouseout
  - 再调用子元素的mouseover
  - 因为支持冒泡，所以会将mouseover传递到父元素中
应用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: flex;
      width: 300px;
      height: 300px;
      background-color: aquamarine;
    }

    button {
      flex: 1;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="box">
    <button>删除</button>
    <button>新增</button>
    <button>搜索</button>
  </div>
  <script>
    // 方案一：监听的本身就是button元素
    // var btnEls = document.querySelectorAll('button')
    // for (var i = 0; i < btnEls.length; i++) {
    //   btnEls[i].onmouseenter = function (event) {
    //     console.log(event.target.textContent);
    //   }
    // }

    // 方案二：事件委托(只给父元素绑定一个元素)
    var boxEl = document.querySelector(".box")
    boxEl.onmouseover = function (event) {
      if (event.target.tagName === 'BUTTON')
        console.log(event.target.textContent);
    }
  </script>
</body>

</html>

11.10 常见的键盘事件

onkeydown ：某个键盘按键被按下，down事件先发生
onkeypress ：某个键盘按键被按下，press 发生在文本被输入
onkeyup ：某个键盘按键被松开，up发生在文本输入完成
可以通过 key 和 code 来区分按下的键
- event.code：“按键代码”（
“KeyA”，“ArrowLeft” 等），特定于键盘上按键的物理位置，不区分大小写
- event.key：字符（“A”，“a” 等），对于非字符（non-character）的按键，通常具有与 code 相同的值
- keyCode 已经遗弃

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <button>button</button>
</body>
<script>
  const btnEl = document.querySelector('button')
  const inputEl = document.querySelector('input')
  btnEl.onclick = function () {
    console.log("sousuo");
  }
  btnEl.onkeyup = function (event) {
    if (event.code == 'Enter') {
      console.log("search");
    }
  }
  // 按下s，搜索自动获取焦点
  document.onkeyup = function (event) {
    console.log("document键盘事件", event.key, event.code);
    if (event.code === 'KeyS') {
      inputEl.focus()
    }
  }
</script>

</html>

11.11 常见的表单事件

onchange 该事件在表单元素的内容改变时触发( <input>, , , 和 )
oninput ：元素获取用户输入时触发
onfocus ：元素获取焦点时触发
onblur ：元素失去焦点时触发
onreset ：表单重置时触发
onsubmit ：表单提交时触发

11.12 文档加载事件

DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像和样式表之类的外部资源可能尚未加载完成
load：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等

十二、DOM 相关

12.1 window 定时器方法

计划调用：并不想立即执行一个函数，而是等待特定一段时间之后再执行
setTimeout 允许将函数推迟到一段时间间隔之后再执行
setInterval 允许重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数
clearTimeout：取消setTimeout的定时器
clearInterval：取消setInterval的定时器

12.2 setTimeout 的使用

setTimeout的语法如下
- func|code：想要执行的函数或代码字符串。
  - 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做
- delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0
- arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表
clearTimeout方法
- setTimeout 在调用时会返回一个“定时器标识符（timer identifier）”，可以使用它来取消执行

12.3 setInterval的使用

setInterval 方法和 setTimeout 的语法相同
- 所有参数的意义也是相同的
- 不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行
clearInterval方法
- etInterval也会返回一个“定时器标识符（timer identifier）”，可以通过clearInterval来取消这个定时器

十三、BOM

13.1 认识 BOM

BOM：浏览器对象模型
- 由浏览器提供的用于处理文档之外的所有内容的其他对象
- navigator、location、history
js 有一个非常重要的运行环境就是浏览器
- BOM是链接js脚本与浏览器窗口的桥梁
BOM 主要包括以下对象模型
- window
- location
- history
- navigator
- screen

13.2 window 对象

全局对象
- Node ：global
- 浏览器：window 对象
浏览器窗口对象
放在 window 对象上的所有属性都可以被访问
使用 var 定义的变量会被添加到window对象中
默认提供了全局的函数和类：setTimeout、Math、Date、Object
作用
- 包含大量的属性：console、location、history、localStorage（60+）
- 包含大量的方法：alert、close、scrollTo、open（40+）
- 包含大量的事件：focus、blur、load、hashchange（30+）
- 包含大量从EventTarget继承过来的方法

13.3 location 对象

用于表示 window 上当前链接到的 URL 信息
常见的属性

 // 完整的URL
    console.log(location.href);
    // 获取URL信息
    console.log(location.hostname);
    console.log(location.host);
    console.log(location.protocol);
    console.log(location.pathname);
    console.log(location.search);
    console.log(location.hash);

常见的方法
- assign：赋值一个新的URL，并且跳转到新的URL 上
- replace：替换，新的网页替换原来的网页
- reload：重新加载这个网页

13.4 URLSearchParams

get方法:获取参数的值
set方法：设置一个搜索参数和值
append：追加一个搜索参数和值
has：判断是否有某个搜索参数
中文会进行编码

13.5 history

前端路由的核心：修改 url ，但是页面不刷新
- 修改 hash 值
- 修改 history
属性
- history.length
- history.state
方法
- 添加新的历史：pushState(state,“,”/lili")
- 返回历史：back()
- 前进历史：forward（）
- 跳转层级：go（number）
- 替换历史：replaceState()

13.6 navigator

表示用户代理的状态和标识等信息
属性
- userAgent
- vendor

13.7 screen

获取屏幕对应的像素

十四、JSON

14.1 认识 Json

是一种非常重要的数据格式，并不是编程语言，可以在服务器和客户端之间传递
- 服务器基本上是以 json 格式给你数据
- 基本上传递都是 json
全称是 JavaScript Object Notation（ js 对象符号）
一种轻量级资料交换格式，算是 js 的一个子集
目前已经独立于编程呢个语言，可以在各个编程语言中使用
在 js 中可以直接使用
其他数据交换格式，使用什么数据格式是一种架构
- XML：在解析、传输等方面弱于 JSON
- Protobuf：有可能替换 json
  - 即时通信
应用场景
- 网络数据的传输JSON 数据
- 项目的某些配置文件
- 非关系型数据库 NoSQL 将 json 作为存储格式

14.2 JSON 基本语法

不能在 json 文件中写注释
数据格式（双引号，不支持单引号）
- 简单值
- 数组
- 对象

14.3 JSON 的序列化和反序列化

希望将一个对象保存在 localStorage 中，如果直接将对象塞到里面去只能看到 object
- 需要进行序列化JSON.stringify()：将 obj 对象转成字符串再塞进来
  - 在转换的过程当中改值:replacer
  - JSON.stringify(obj,function(key,value){if(key==="lili" return "miao")})
  - space:转换输出格式，前面留几个空格
  - 自定义toJSON方法
- 需要进行反序列化JSON.parse()：将字符串转成 obj 对象拿到结果
  - 在解析的过程中进行修改
  - JSON.parse(item，function(key,value){if(key==="age")return value+2})
```
  var obj = {
    name: "lili",
    age: 99
  }
  // 1. 将 obj 对象进行序列化
  var objJSONString = JSON.stringify(obj)
  // 2. 将对象存储到LocalStorage
  localStorage.setItem("info", objJSONString)
  console.log(localStorage.getItem("info"));
  var item = localStorage.getItem("info")
  // 3. 将字符串转回对象（反序列化）
  var newObj = JSON.parse(item)
```

文章来源:https://blog.csdn.net/m0_68076330/article/details/135721069
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！