JavaScript语言之webAPIs篇

DOM 页面文档对象模型

认识DOM

DOM树

含义：

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

DOM对象

1. 含义：浏览器根据html标签生成的 JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

2. DOM的核心思想

把网页内容当做对象来处理

3.document 对象

是 DOM 里提供的一个对象
它提供的属性和方法都是用来访问和操作网页内容的
- 例如：document.write()
网页所有内容都在document 里面

获取DOM元素

使用CSS选择器

`1. 选择匹配的第一个元素`

语法：

      document.querySelector('css选择器')
    //  例：
      document.querySelector('div')

参数：

括号里可以写一个或者多个有效的CSS选择器字符串

// 多个有效的有效的CSS选择器字符串的示例
<body>
    <div>
       <p>你好</p>
   </div>    
    <script>
        // 获取元素
        let divDom = document.querySelector('div p')
        //console.log(divDom)  //在控制台输出的是一个标签
        console.dir(divDom)  //在控制台输出的是一个对象
    </script>
</body>

返回值：

CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。

`2.选择匹配的多个元素`

语法：

     document.querySelectorAll('css选择器')
    //  例：
     document.querySelectorAll('div')

参数:

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的NodeList 对象集合

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        let lis = document.querySelectorAll('ul li')
        //console.log(lis);
       //获取里面的每个对
        for(let i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>  
</body>

我们发现返回的是一个数组，但又不是数组，因为它不具备pop() push() 等数组方法

所以可以得到如下结论

1. querySelectorAll得到的是一个伪数组

2. 有长度有索引号的伪数组

3. 没有 pop() push() 等数组方法

由此得知，想要得到里面的每一个对象，则需要遍历（如 for）的方式获得

注意：

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
获取元素的时候，获取父元素之后，可以直接获取它的子元素

其他方法

id选择

   //根据id获得一个元素
   document.getElementById('nav')

标签选择

   //根据标签获取一类元素  获取页面所有的div
    document.getElementByTagName('div')

类选择

   //根据类名获取元素  获取页面所有类名为one的元素
    document.getElementByClassname('one')

修改DOM元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象

document.write ( )

只能将文本内容追加到 body结束标签前面的位置

文本中包含的标签会被解析

//永远都只能追加操作，且只能在位置</bod>前
document.write('Hello World!')
document.write('<h1>你好，世界！</h1>')

元素innerText属性

将文本内容添加/更新到任意标签位置

<body>
    <div></div>
    <script>
        let divDom = document.querySelector('div')
        divDom.innerText = '你好'
    </script>
</body>

文本中包含的标签不会被解析

<body>
    <div></div>
    <script>
        let divDom = document.querySelector('div')
        divDom.innerText = '<strong>你好</strong>'
    </script>
</body>

元素innerHTML属性

将文本内容添加/更新到任意标签位置

<body>
    <div></div>
    <script>
        let divDom = document.querySelector('div')
        divDom.innerHTML = '你好'
    </script>
</body>

文本中包含的标签会被解析

<body>
    <div></div>
    <script>
        let divDom = document.querySelector('div')
        divDom.innerHTML = '<strong>你好</strong>'
    </script>
</body>

注意：

innerHTML和innerText属性是针对双标签的

修改DOM元素属性

设置修改元素常用属性

1. 常见的元素属性:

href title src type alt等等

2.语法：

     对象.属性 = 值

3.举例

<body>
    <img src="./images/1.webp" alt="">
    <script>
        //获取元素
       let pic = document.querySelector('img')
       //操作元素
       pic.src = './images/b02.jpg'
       pic.title = '这是一个图片'
    </script>
</body>

设置修改元素`样式`属性

通过 style 属性操作CSS

     对象.style.样式属性 = 值

注意：

1. 修改样式通过style属性引出

2. 如果属性有-连接符，需要转换为小驼峰命名法

3. 赋值的时候，需要的时候不要忘记加css单位

<body>
    <div>你是谁</div>
    <script>
       let div = document.querySelector('div')
       div.style.color = 'red'
       div.style.fontSize = '50px' //记得加像素
    </script>
</body>

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：

    元素.className = 'active'

注意：

1. 由于class是关键字, 所以使用className去代替

2. className是使用新值换旧值，直接使用 className 赋值会覆盖以前的类名

     <style>
        .box {
            height: 200px;
            width: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>你好</div>
    <script>
        let div =  document.querySelector('div')    <!-- 此时是没有写类名，div没有一点样式 -->
        div.className = 'box' //给div添加上一个.box类
    </script>
</body>

由运行的结果可知， box类的样式生效了，并且在控制台中能看到box类被添加到了div标签中

通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

追加一个类

语法：

元素.classList.add('类名')

 <style>
    .d1 {
      background-color: aqua;
    }
    .d2 {
      height: 300px;
    }
    .d3 {
      width: 400px;
    }
    .d4 {
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="d1">123</div>
  <script>
    // 添加一个class
    let div = document.querySelector('div');
    div.classList.add("d2","d3","d4");
  </script>
</body>

删除一个类

语法：

元素.classList.ramove('类名')

<body>
  <div class="d1 d2">123</div>
  <script>
    let div = document.querySelector('div');
    // 单独来指定移除一个class
    div.classList.remove("d2")
  </script>

切换一个类

语法：

元素.classList.toggle('类名')

<body>
  <div class="d1">123</div>
  <script>
    let div = document.querySelector('div');  
    // 切换 （如果本来有，那我就移除，如果本来没有，那我就添加）
     div.classList.toggle("d4")
  </script>

区别

1.使用 className 和classList的区别？

修改大量样式的更方便
修改不多样式的时候方便
classList 是追加和删除不影响以前类名

设置修改表单元素

获取表单元素

DOM对象.属性名

表单.value = '用户名'

设置表单元素

DOM对象.属性名 = 新值

表单.type = 'password'

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性

比如:disabled,checked,selected

定时器--间歇函数

开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

function repeat() {
   conaole.log('我是定时器')
}
//每隔一秒调用repeat函数
setInterval(repeat,1000)

注意：

函数名字不需要加括号
定时器返回的是一个id数字

关闭定时器

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

一般不会刚创建就停止，而是满足一定条件再停止

注意：

1.函数名字不需要加括号

2.定时器返回的是一个id数字

延时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

setTimeout(回调函数，等待的毫秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数：

let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能

let index=0;
      function func() {
        console.log(++index);
        setTimeout(func,1000);
      };
      func();

两种定时器对比：
1. setInterval 的特征是重复执行，首次执行会延时
2. setTimeout 的特征是延时执行，只执行 1 次
3. setTimeout 结合递归函数，能模拟 setInterval 重复执行
4. clearTimeout 清除由 setTimeout 创建的定时任务
  - 创建的定时器应该由clearInterval来清除
  - 创建的延迟器应该由clrearTimeout来清除

事件

事件监听

事件

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

事件监听绑定

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法

元素.addEventListener('事件',要执行的函数)

事件监听三要素

事件源：那个dom元素被事件触发了，要获取dom元素
事件：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事

//1.获取元素
let btn = document.querySelector('button')
//2.事件监听（注册事件）
btn.addEventListener('click',function() {
    alert('被点击了')
})

注意

事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次
addEventListener 可以绑定多个同名事件

 addEventListener 可以绑定多个同名事件
  btn.addEventListener('click', func2);

事件解绑

removeEventListener 可以取消对应的事件类型和事件处理函数
无法取消 addEventListener 事件对应的匿名函数

 const btn = document.querySelector('button');
      //  普通函数
       function func() {
       console.log('2022-04-15 14:32:26');
       }

       // 绑定事件
      btn.addEventListener('click', func);

      //  取消这个事件绑定
      btn.removeEventListener('click', func);

事件监听版本

DOM L0

事件源.on事件 = function() { }
DOM L2

事件源.addEventListener(事件，事件处理函数)
发展史：
- DOM L0 ：是 DOM 的发展的第一个版本； L：level
- DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
- DOM L2：使用addEventListener注册事件
- DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

事件类型

鼠标事件（鼠标触发）

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

焦点事件 (表单获得光标)

focus 获得焦点
blur 失去焦点

键盘事件 (键盘触发)

Keydown 键盘按下触发
Keyup 键盘抬起触发

文本事件 (表单输入触发)

input 用户输入事件

this

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

作用：(弄清楚this的指向，可以让我们代码更简洁)

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

在前端的js中，我们的全局变量可以理解为是window的一个属性

排他思想

当前元素为A状态,其他元素为B状态

使用：

干掉所有人

使用for循环

复活他自己

通过this或者下标找到自己或者对应的元素

<ul>
        <li class="active">动画片</li>
        <li>动画片</li>
        <li>动画片</li>
        <li>动画片</li>
        <li>动画片</li>
    </ul>

    <script>
        let lis = document.querySelectorAll('li')
        // 第一个循环是给每个li添加绑定事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click',function(){
                //第二个循环是把所有li的颜色样式类去除
                for (let index = 0; index < lis.length; index++) {
                    lis[index].classList.remove('active')                 
                }   
                // 给当前的点击li添加颜色样式类     
                this.classList.add('active')           
            })                    
}          
    </script>

节点

DOM节点

查找节点

DOM树里每一个内容都称之为节点
节点类型
- 元素节点（重点）
• 所有的标签比如 body、 div

• html 是根节点
- 属性节点
• 所有的属性比如 href
- 文本节点
• 所有的文本
- 其他

父节点查找

parentNode 属性
返回最近一级的父节点找不到返回为null

子元素.parentNode

<body>
    <div>
       <span>X</span>
       <img src="./images/456.png" alt="">
    </div>

    <script>
        let span = document.querySelector('span')
        span.addEventListener('click',function(){
            // 隐藏当前元素的父元素
           this.parentNode.style.display = 'none'
        })
    </script>
</body>

子节点查找

childNodes
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
children （重点）
- 仅获得所有元素节点
- 返回的还是一个伪数组

父元素.children 数组

<body>
    <ul>
      <li>a1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ul>
      <li>b1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      let uls = document.querySelectorAll("ul")
     // 遍历ul数组 挨个绑定点击事件
      for (let index = 0; index < uls.length; index++) {
          // 3 点击事件触发了
        uls[index].addEventListener('click',function() {
            // 对被点击的ul的children 做遍历
            for (let j = 0; j < this.children.length; j++) {
               this.children[j].style.display = 'none'          
            }
        })    
      } 
    </script>
  </body>

兄弟关系查找

下一个兄弟节点

nextElementSibling 属性

document.nextElementSibling

上一个兄弟节点

previousElementSibling 属性

document.previousElementSibling

<body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      /* 
     1 获取所有的li标签 数组
     2 遍历 绑定点击事件
     3 事件触发了
       this.next
       this.previou 获取到对应的元素 设置他们的样式
      */

      //  1 获取所有的li标签 数组
      let lis = document.querySelectorAll('li');

      // 2 遍历 绑定点击事件
      for (let index = 0; index < lis.length; index++) {
        // 3 事件触发了
        lis[index].addEventListener('click', function () {
          // 上一个兄弟 设置 蓝色
          this.previousElementSibling.style.backgroundColor = 'blue';
          // 下一个兄弟 设置 绿色
          this.nextElementSibling.style.backgroundColor = 'green';
        });
      }
    </script>
  </body>

增加节点

1.`创建节点`

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

1.创建元素节点方法：

//创造一个新的元素节点
document.createElement('标签名')

<body>
    <ul>
        <li>我是1</li>
        <li>我是2</li>
    </ul>
    <script>
          // 1 创建一个 li标签 节点
       let li = document.createElement('li')
       //给li添加内容样式
       li.innerText = '我是后来的'
       li.style.backgroundColor = 'pink'

        // 1 创建一个 ul标签 节点
       let ul = document.querySelector('ul')
       // 把li标签插入到ul中 父元素的底部 插入子元素
       ul.appendChild(li)
    </script>
</body>

2. 创建文本节点

 //创建一个文本节点
 document.createTtextNode('')

2.`追加节点`

要想在界面看到，还得插入到某个父元素中
1. appendChild
只能插入一个标签，插入到父元素的**最后一个子元素:*
```
       2. `append`
```
可以同时插入多个标签

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

 //将left第三个li插入到right第二个li前面
<body>
    <ul class="left">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
    </ul>
    <ul class="right">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <script>
        //获取左边ult第三个li插入到右边ul
      let c = document.querySelector('.left li:nth-child(3)');
       //获取右边ul第二个li
      let two = document.querySelector('.right li:nth-child(2)');
      //获取右边的ul
      let right = document.querySelector('.right');
      // 父元素.insertBefore(要插入的元素,哪个元素的上面);
      right.insertBefore(c,two);

    </script>

2. insertBefore

插入到父元素的某个子元素的前面
如果要插入的元素是已经存在的那么insertBefore作用移动
如果要插入的元素是新创建的 insertBefore作用仅仅插入
如果插入的标签没有子元素，第二个参数可以设置为null,，没有想好放在那个位置，设置为null就会添加到标签末尾

//插入到某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)

//增加一个li到right第二个li前面
<body>
    <ul class="left">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
    </ul>
    <ul class="right">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <script>
        //获取左边ult第三个li插入到右边ul
      let c = document.querySelector('.left li:nth-child(3)');
       //获取右边ul第二个li
      let two = document.querySelector('.right li:nth-child(2)');
      //获取右边的ul
      let right = document.querySelector('.right');
       //创建li标签
      let li = document.createElement('li');
      li.innerText = '新创建的';
    // 父元素.insertBefore(要插入的元素,哪个元素的上面);
      right.insertBefore(li, two);

  
    </script>

3. 克隆节点

复制一个原有的节点
把复制的节点放入到指定的元素内部

元素.cloneNode(布尔值)

 <div class="box"></div>
    <script>
        let box = document.querySelector('.box')
        //克隆节点
        let newBox = box.cloneNode(true)
        //只有body可以这样写，获取然后插入新的box
        document.body.appendChild(newBox)
    </script>

删除节点

若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过**父元素**删除

父元素.removeChild(要删除的元素)

删除自己

自己.remove()

<body>
    <button>删除ul中某一个li标签</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      let button = document.querySelector('button');
      let ul = document.querySelector('ul');
      // 要删除的子元素
      let li = document.querySelector('li:nth-child(1)'); // 1 
      button.addEventListener('click', function () {
        // 删除指定的元素
        ul.removeChild(li); 
        // 删除自己 
        ul.remove();
      });
    </script>
  </body>

注意点：

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

实例化

获得当前时间

let date = new Date()

时间对象方法

方法	作用	说明
getFullYear()	获取年份	获取四位年份
getMonth()	获取月份	取值为0~11
getDate()	获取月份中的每一天	不同月份取值也不同
getDay()	获取星期	取值为0~6
getHours()	获取小时	取值为0~23
getMinutes()	获取分钟	取值为0~59
getSeconds()	获取秒	取值为0~59

时间戳

什么是时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
1. getTime() 返回指定时间的时间戳
```
//实例化
let date = new Date()
//第一种  获得时间戳
console.log(date.getTime());
```
2. +new Date() 返回指定时间的时间戳
```
//第二种  获得时间戳  简写
console.log(+newDate());
```
3. Date.now() 返回当前时间的时间戳
```
console.log(Date.now());
```

事件高级

事件对象

事件对象是什么
- 也是个对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
获取事件对象
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e

元素.addEventListener('click',function(e){})

事件常用的属性

部分常用属性
- type
  - 获取当前的事件类型
- clientX/clientY
  - 获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY
  - 获取光标相对于当前DOM元素左上角的位置
- key
  - 用户按下的键盘键的值
  - 现在不提倡使用keyCode

事件流

事件流指的是事件完整执行过程中的流动路径

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是从父到子冒泡阶段是从子到父

事件捕获和事件冒泡

事件捕获

从DOM的根元素开始去执行对应的事件 (从外到里)

DOM.addEventListrner(事件类型，事件处理函数，是否使用捕获)

说明：
- addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
从里到外
事件冒泡是默认存在的

目标阶段

点击了最底层的标签，就处在目标阶段

注意点：

最底层的元素点击事件，会冒泡给最外层的元素并由它来捕获和处理。
利用事件冒泡（或者说事件委托）的优势在于可以只用一个事件处理过程就能捕获所有子元素的事件，这对于动态添加的子元素好处更大，因为他们不需要动态绑定事件了。

阻止事件冒泡

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止事件流动需要拿到事件对象
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
```
事件对象.stopPropagation
event.stopPropagation();
```
鼠标经过事件：
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果(推荐)

阻止标签的默认行为

阻止默认行为，比如链接点击不跳转，表单域的不提交
a标签的点击跳转
form中button点击刷新行为
阻止默认行为 - form表单有一个 submit 事件理解提交表单的触发-点击按钮的时候触发
给button按钮绑定点击事件
给button按钮添加一个 type="button" 属性
换成 input标签 type="button"
把button 移出form表单的区域

 event.preventDefault();

<body>
    <a href="http://www.baidu.com">百度</a>

    <form >
      <!-- <button type="button">点击我 就会自动刷新</button> -->
      <!-- <input type="button" value="点击我"> -->
    </form>
    <button>刷新</button>
    <script>
      const a=document.querySelector("a");
      const form=document.querySelector("form");
      const button=document.querySelector("button");
      a.addEventListener("click",function (event) {
        console.log("a标签的点击触发啦");
        // 阻止a标签的默认行为，让他不要跳转
        event.preventDefault();
      })

      // form.addEventListener("submit",function (event) {
      //   // 不要让页面再刷新
      //   event.preventDefault();
      // })

      // button.addEventListener("click",function (event) {
      //   event.preventDefault();  // 不要让页面再刷新
      // })
    </script>
  </body>

两种注册事件的区别

传统on注册（L0）
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
事件监听注册（L2）
- 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

<body>
    <ul>
      <li><a href="#">1</a></li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      const ul = document.querySelector('ul');
      ul.addEventListener('click', function (event) {
        // event.target.style.backgroundColor="red";
        // console.log(event.target);

        // 只有点击了li标签才触发
        // console.log(event.target.nodeName);// 当前点击的元素的标签名 大写
        if (event.target.nodeName === 'LI') {
          console.log('改变颜色');
          event.target.style.backgroundColor = 'red';
        }
      });
    </script>
  </body>

总结：
- **优点：**给父级元素加事件（可以提高性能）
- **原理：**事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
- **实现：**事件对象.target 可以获得真正触发事件的元素

网页特效

滚动事件

事件名：scroll
监听整个页面滚动

//页面滚动的事件
window.addEventListener('scroll',function() {
//执行的操作
})

给window或者document添加scroll事件
监听某个元素的内部滚动直接给某个元素加即可

 const div=document.querySelector("div");
      div.addEventListener("scroll",function () {
        console.log("div又开始滚啦");
      })

加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

事件名：load

监听页面所有资源加载完毕：

给 window 添加 load 事件

//页面加载事件
window.addEventListener('load',function() {
//执行的操作
})

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

事件名：DOMContentLoaded

监听页面DOM加载完毕：

给 document 添加 DOMContentLoaded 事件

document.addEventListener('DOMContentLoaded',function() {
//执行的操作
})

元素的大小和位置

scroll

1.获取宽高：

获取元素的内容总宽高（不包含滚动条）返回值不带单位
scrollWidth和scrollHeigth
- scrollWidth 整个可以滚动的区间的宽度
- scrollHeight 整个可以滚动的区域的高度*

注意：

scrollWidth 不包含滚动条大小等于容器可以滚动的大小

页面的滚动距离

document.documentElement.scrollTop

document.documentElement HTML 文档返回对象为HTML元素

2.获取位置:

获取元素内容往左、往上滚出去看不到的距离
scrollLeft和scrollTop 获取元素滚动的距离
```
document.scrollLeft
document.scrollTop
```
这两个属性可以读取，也可以修改（赋值）

offset

获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border还有滚动条
offsetWidth和offsetHeight

document.offsetWidth
document.offsetHeigth

获取位置：

获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性
```
document.offsetLeft
document.offsetTop
```

注意：offsetTop和offsetLeft 确定的位置

带有定位的父级
如果都没有则以文档左上角为准

client

1.获取宽高：

获取元素的可见部分宽高（不包含边框，滚动条等）

clientWidth和clientHeight

document.clientWidth
document.clientWidth

2.获取位置：

获取左边框和上边框宽度
clientLeft和clientTop 注意是只读属性

总结处：

    scollWidth     获取容器的宽度（包含滚动的区域）
    offsetWidth    获取可视区域的宽度（包含滚动条）
    clientWidth    获取可视区域的宽度（不包含滚动条）

    scrollLeft    获取左侧滚动的距离
    
    offsetLeft    获取和已经定位了的父级元素的左距离
    
    clientLeft    获取左边框的大小

window对象

BOM(浏览器对象模型)

window 是默认就存的一个全局变量，是js中的一个大大的全局变量内置就有的不需要我们创建

console.log(window);

window比较特殊，我们想要使用window的一些功能的时候是可以省略 window

很多的代码其实都是window的方法、属性

console
document
setInterval....

为了我们方便编写代码，允许我们在使用window的一些属性或者方法的时候省略了window关键字而已（这个省略其他对象做不到的）

3.window 对象下包含了 navigator、location、 document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）

4. document 是实现 DOM 的基础，它其实是依附于 window 的属性

location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

常用属性和方法：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

<button>跳转到百度</button>
    <script>
      const button = document.querySelector('button');
      button.addEventListener('click', function () {
         location.href="http://www.baidu.com";
      });
      //延时器实现页面跳转
      setTimeout(function () {
        location.href="http://www.baidu.com";
      }, 5000);
    </script>

location.href 也可以实现刷新
```
location.href = location.href;
```
search 属性获取地址中携带的参数，符号？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分

reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

<button>跳转到百度</button>
    <script>
      const button = document.querySelector('button');
      button.addEventListener('click', function () {
         location.reload(true)
      });
 
    </script>

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
直接复制别人写好的的代码

通过 userAgent 检测安卓和ipone


              !(function () {
        const userAgent = navigator.userAgent;
        // 验证是否为Android或iPhone
        const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
        const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
        // 如果是Android或iPhone，则跳转至移动站点
        // if (android || iphone) {
        //   location.href = 'http://m.itcast.cn';
        // }
        console.log(android);
        console.log(iphone);
      })();

检测当前浏览器的版本和型号


validBrowser()
      function validBrowser() {
        var u_agent = navigator.userAgent;
        var browser_name = 'Failed to identify the browser';
        if (u_agent.indexOf('Firefox') > -1) {
          browser_name = 'Firefox';
        } else if (u_agent.indexOf('Chrome') > -1) {
          browser_name = 'Chrome';
        } else if (
          u_agent.indexOf('Trident') > -1 &&
          u_agent.indexOf('rv:11') > -1
        ) {
          browser_name = 'IE11';
        } else if (
          u_agent.indexOf('MSIE') > -1 &&
          u_agent.indexOf('Trident') > -1
        ) {
          browser_name = 'IE(8-10)';
        } else if (u_agent.indexOf('MSIE') > -1) {
          browser_name = 'IE(6-7)';
        } else if (u_agent.indexOf('Opera') > -1) {
          browser_name = 'Opera';
        } else {
          browser_name += ',info:' + u_agent;
        }
        document.write('browser_name:' + browser_name + '<br>');
        document.write('u_agent:' + u_agent + '<br>');
      }

histroy对象

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后腿功能参数如果是1 前进一个页面如果是-1 后退一个页面

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage和localStorage约 5M 左右

localStorage

介绍

生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

存储数据

//localStorage.setItem("自定义",值-必须是字符串的格式)
localStorage.setItem(key,value)

//例：
localStorage.setItem("date","二〇二二年四月十五日 09:06:48")
      // 获取日期
 const date=localStorage.getItem("date");
 console.log(date);

获取数据

localStorage.getItem(key)

//例：
localStorage.setItem("date","二〇二二年四月十五日 09:06:48")
      // 获取数据
 const date=localStorage.getItem("date");
 console.log(date);

删除数据
```
localStorage.removeItem(key)
```
清空数据
```
 localStorage.clear();
```

存储复数据类型存储

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

**JSON.stringify(复杂数据类型)**

将复杂数据转换成JSON字符串
存储本地存储中

**JSON.parse(JSON字符串)**

将JSON字符串转换成对象
取出时候使用

sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3.以键值对的形式存储使用

4.用法跟localStorage 基本相同

区别

sessionStorage 关闭页面后数据就丢失
localStorage 除非是用户主动删除否则一直存在直到天荒地老

回流和重绘

浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)
同时解析（Parser） CSS，生成样式规则 (Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上

回流

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
会导致回流（重排）的操作：
- 页面的首次刷新
- 浏览器的窗口大小发生改变
- 元素的大小或位置发生改变
- 改变字体的大小
- 内容的变化（如：input框的输入，图片的大小）
- 激活css伪类（如：:hover）
- 脚本操作DOM（添加或者删除可见的DOM元素）
  
  简单理解影响到布局了，就会有回流
损耗浏览器的性能

重绘

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
性能损耗比较低

理想情况

出现重绘不要出现重排
不要出现重绘重排

注意：

重绘不一定引起回流，而回流一定会引起重绘。

字符串方法

toUpperCase() 转换大写

let  msg = 'kfc'
console.log(msg.toUpperCase())

toLowerCase() 转换小写

let  msg = 'KFC'
console.log(msg.toLowerCase()())

spilt() 转换数组

 const str = 'abcdef'
 console.log(str.split(' '))

 const str = 'a-b-c-d-e-f-g'; 
 console.log(str.split('-'));    // ["a","b","c","d","e","f","g"]

数组方法

join() 数组转字符串

const  arr = ['a','b','c','d']
console.log(arr.join(''))
console.log(arr.join('-'))  //a-b-c-d

数组连接

const arr1 = ['1','2','3','4']
const arr2 = ['a','b','c','d']
console.log(arr1.concat(arr2))

元素属性

固有属性

获取 dom元素的固有属性通过点语法来获取

  const a = document.querySelector('a');
// 获取固有属性
   console.log(a.href);
   console.log(a.id);
  // 直接修改
   a.href="http://www.qq.com";
   a.id="top";

自定义属性

随机自己命名
自定义属性不能直接通过点语法来获取和设置

getAttribute("属性名") 获得属性名

 const a = document.querySelector('a');
 console.log( a.getAttribute("hello") );
 console.log( a.getAttribute("aa") );

setAttribute(key,value) 设置属性和值

 const a = document.querySelector('a');
 a.setAttribute("hello","123");

removeAttribute(key) 删除掉属性

 const a = document.querySelector('a');
 a.removeAttribute("hello");

H5建议的自定义属性

属性以 data-xxx 开头
获取属性的时候 a.dataset.xxx

<a href="#">标签</a>
    <div msg="你好" data-index="123"></div>
    <ul>
      <li data-index="0">0</li>
      <li data-index="1">1</li>
      <li data-index="2">2</li>
    </ul>

    <script>
      /* 

      允许开发者 自己往标签上填写一些属性 - 自定义属性
      h5建议 开发者如果想要在标签上 新增自定义属性的 
      data-xxx
      data-num="100" data-index="200"
      在可以js中通过dom元素
      dom.dataset.xxx
      dom.dataset.num  100 
      dom.dataset.index 200

      前端的案例中 
      点击li标签的获取到li标签的下标-位置 index
      数组删除元素  
      arr.splice(要删除的元素的位置 )
       */
       const ul=document.querySelector("ul");
       ul.addEventListener("click",function (event) {
         if(event.target.nodeName==="LI"){
           console.log(event.target.dataset.index);
         }
         
       })

正则表达式

正则表达式在 JavaScript中的使用场景：
- 例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)
- 比如用户名: /^[a-z0-9_-]{3,16}$/
- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

语法：

定义正则表达式语法

let  变量名 =  /表达式/

其中 / /是正则表达式字面量

let reg  =  /前端/

判断是否有符合规则的字符串

test() 方法用来查看正则表达式与指定的字符串是否匹配

regObj.test(被检测的字符串)

如果正则表达式与指定的字符串匹配，返回true，否则false

   const str = `金钱对你意味着什么？你有梦想吗？等等等等。一下子都让我陷入了沉思。真的需要好好的想想，然后写下来`;

      // 判断一下这个字符串中有没有 梦想 两个字

      // 定义规则
      const reg = /梦想/;

      // 规则和字符串 匹配  test
      console.log(reg.test(str)); // 有返回true 没有返回false  结果为true

检索（查找）符合规则的字符串
- exec() 方法在一个指定字符串中执行一个搜索匹配
- 如果匹配成功，exec() 方法返回一个数组，否则返回null

regObj.exec(被检测的字符串)

let str = '我是一个盖世英雄，我希望快点成为全家人的大英雄'
let reg = /英雄/
let re = reg.exec(str)
console.log(re);
//  [ '英雄', index: 6, input: '我是一个盖世英雄，我希望快点成为全家人的大英雄', groups: undefined ]

元字符

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

如果 ^ 和 $ 在一起，表示必须是精确匹配。

        const str = `金来123`;
        // const reg = /^金来$/; //  只能匹配 "金来"
        const reg = /^金来/;     //  金来开头的为true
        // const reg = /金来$/;  //  金来结尾的为true
        // console.log(reg.test(str));

量词

量词用来设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
？	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

注意：逗号左右两侧千万不要出现空格

* 表示放在它前面那一个字符可以出现0次或者多次

      console.log(/^路*$/.test('')); // true
      console.log(/^路*$/.test('路')); // true
      console.log(/^路*$/.test('路路')); // true
      console.log(/^路*$/.test('路路路')); // true

\+ 表示放在它前面那一个字符可以出现1次或者多次

      console.log(/^路+$/.test(''));  // false
      console.log(/^路+$/.test('路')); // true
      console.log(/^路+$/.test('路路'));  // true
      console.log(/^路+$/.test('路路路')); // true

？表示出现0次或者1次

      console.log(/^路?$/.test(''));// true
      console.log(/^路?$/.test('路')); // true
      console.log(/^路?$/.test('路路')); // false
      console.log(/^路?$/.test('路路路')); // false

{n} 放在它前面的那一个字符出现n次

      console.log(/^路{2}$/.test('')); // false
      console.log(/^路{2}$/.test('路')); // false
      console.log(/^路{2}$/.test('路路')); // true
      console.log(/^路{2}$/.test('路路路')); // false

{n,} 放在它前面的字符最少出现n次

      console.log(/^路{2,}$/.test('')); // false
      console.log(/^路{2,}$/.test('路')); // false
      console.log(/^路{2,}$/.test('路路'));// true
      console.log(/^路{2,}$/.test('路路路')); // true

{n,m} 放在它前面的字符最少出现n次，最大是m次

      console.log(/^路{0,2}$/.test('')); // true
      console.log(/^路{0,2}$/.test('路'));  // true
      console.log(/^路{0,2}$/.test('路路')); // true
      console.log(/^路{0,2}$/.test('路路路'));  // false

字符类

里面加上 - 连字符

使用连字符 - 表示一个范围
[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写都可以
[0-9] 表示 0~9 的数字都可以
里面加上 ^ 取反符号
- [ ^a-z ]匹配除了小写字母以外的字符
- 注意要写到中括号里面

字符类 [] 的含义

[ab] 可以匹配 a 或者 b

      console.log(/[ab]/.test('a'));// true
      console.log(/[ab]/.test('b'));// true
      console.log(/[abc]/.test('c'));// true

表示 [ a-z] 任意的一个字母

      console.log(/[a-z]/.test('c'));// true
      console.log(/[a-z]/.test('d'));// true
      console.log(/[a-z]/.test('123'));// false

[0-9] 任意的一个数字

      console.log( /[0-9]/.test("1") );// true
      console.log( /[0-9]/.test("2") );// true
      console.log( /[0-9]/.test("0") );// true

[A-Z] 任意的一个字母

      console.log(/[A-Z]/.test("a"));// false
      console.log(/[A-Z]/.test("B"));// true

同时满足 0-9a-zA-Z

      console.log(/[0-9a-zA-Z]/.test('1'));// true
      console.log(/[0-9a-zA-Z]/.test('a'));// true
      console.log(/[0-9a-zA-Z]/.test('A'));// true
      console.log(/[0-9a-zA-Z]/.test(' '));// false

预定义

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[ ^ 0-9 ]
\w	匹配任意的字母，数字和下划线，相当于[A-Za-z0-9]
\W	除所有字母，数字和下划线以外的字符，相当于[ ^ A-Za-z0-9 ]
\s	匹配空格（包括换行符，制表符，空格符等），相当于[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[ ^ \t\r\n\v\f]

. 表示除了（换行符之外）任意字符

      console.log(/路/.test('飞')); // false
      console.log(/./.test('飞')); // true
      console.log(/路.飞/.test('路大飞')); // true
      console.log(/路.飞/.test('路小飞')); // true
      console.log(/路.飞/.test('路中飞')); // true
      console.log(/路.飞/.test('路不飞')); // true
      console.log(/路.飞/.test('路飞')); // false
      console.log(/路.飞/.test('路.飞')); // true

\d 表示数字

      console.log(/\d/.test("路飞"));// false
      console.log(/\d/.test("1路飞"));// true
      console.log(/\d/.test("路3飞"));// true

\D 不是数字之外的任意1个字符

      console.log(/\D/.test("123"));// false
      console.log(/\D/.test("12a3"));// true
      console.log(/\D/.test("12a3"));// true

\w 匹配任意的字母，数字和下划线

       console.log(/\w/.test("123"));//  true
      console.log(/\w/.test("%%"));//  false
      console.log(/\w/.test("%1%"));//  true
      console.log(/\w/.test("%a%"));//  true
      console.log(/\w/.test("%_%"));//  true

\W 除去了字母、数字、下划线之外字符

      console.log(/\W/.test("123"));// false
      console.log(/\W/.test("1%23"));// true

\s 匹配空格

      console.log(/\s/.test("123"));// false
      console.log(/\s/.test("1 23"));// true

\S 除了空格之外的字符

      console.log(/\S/.test('123'));// true
      console.log(/\S/.test(' '));// false
      console.log(/\S/.test('   '));// false

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

语法

/表达式/修饰符

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

替换

replace 替换

语法:

字符串.replace(/正则表达式/, '替换的文本')

JavaScript语言之webAPIs篇

JavaScript语言之webAPIs篇

DOM 页面文档对象模型

认识DOM

DOM树

DOM对象

获取DOM元素

使用CSS选择器

1. 选择匹配的第一个元素

2.选择匹配的多个元素

其他方法

id选择

标签选择

类选择

修改DOM元素内容

document.write ( )

元素innerText属性

元素innerHTML属性

修改DOM元素属性

设置修改元素常用属性

设置修改元素样式属性

通过 style 属性操作CSS

操作类名(className) 操作CSS

通过 classList 操作类控制CSS

追加一个类

删除一个类

区别

设置修改表单元素

定时器--间歇函数

开启定时器

关闭定时器

延时器-延时函数

事件

事件监听

事件

事件监听绑定

事件监听三要素

注意

事件解绑

事件监听版本

事件类型

鼠标事件 （鼠标触发）

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

焦点事件 (表单获得光标)

focus 获得焦点

blur 失去焦点

键盘事件 (键盘触发)

文本事件 (表单输入触发)

this

排他思想

节点

DOM节点

查找节点

父节点查找

子节点查找

兄弟关系查找

增加节点

1.创建节点

2.追加节点

3. 克隆节点

删除节点

时间对象

实例化

时间对象方法

时间戳

事件高级

事件对象

事件流

事件捕获和事件冒泡

事件捕获

事件冒泡

目标阶段

阻止事件冒泡

阻止标签的默认行为

两种注册事件的区别

事件委托

网页特效

滚动事件

`1. 选择匹配的第一个元素`

`2.选择匹配的多个元素`

设置修改元素`样式`属性

鼠标事件（鼠标触发）

1.`创建节点`

2.`追加节点`