前端WebApiDOM操作总结1

最新推荐文章于 2022-07-30 18:58:27 发布

码少女壮士

最新推荐文章于 2022-07-30 18:58:27 发布

阅读量115

点赞数 1

文章标签：前端 javascript html web visual studio

本文链接：https://blog.csdn.net/weixin_40630195/article/details/122140956

版权

今日学习总结

1.获取页面元素
- 根据选择器selector获取元素
2.元素属性操作
- id
- className
- href
- src
- innerText
- value
- disabled
- checked
- selected
3.事件
- 能够说出组成事件的三要素
- 能够给页面元素注册事件
  - 鼠标单击onclick
  - 鼠标双击ondblclick
  - 鼠标移入onmouseover
  - 鼠标移出onmouseout
  - 成为焦点onfocus
  - 失去焦点onblur
4.网页案例
- 隔行变色：事件
- 开关灯:一个按钮实现两种功能
- 鼠标移入移出
- 微博输入案例

01-WebApi介绍

1.1-WebAPI概念介绍

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
- 任何开发语言都有自己的API
- API的特征输入和输出(I/O)
- API的使用方法(console.log())
WebAPI概念
- 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
- 此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

1.2-JavaScript组成三个部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6bravGab-1640402889594)(day01.assets/1553960341196.png)]

1.ECMAScript - JavaScript的核心
- 定义了javascript的语法规范
- JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准
2.DOM - 文档对象模型
- 一套操作页面元素的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
3.BOM - 浏览器对象模型
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.3-DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avkKcQc6-1640402889596)(day01.assets/1553960882008.png)]

Docuemnt Object Model（文档对象模型）
- 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- HTML DOM 模型被构造为对象的树。
HTML DOM 树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O04lMx7o-1640402889597)(day01.assets/1553960911524.png)]

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
DOM工作原理介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>

    <style>
        
    </style>
</head>
<body>
    <a href="#">链接</a>
    <p id="p1" class="one">文本</p>


    <script>
        /* 
        1. DOM ： js动态操作网页内容

        2. DOM工作原理 ：
            硬盘代码读取到内存 ->  浏览器渲染引擎生成DOM树（document） ->  开始渲染页面
         */

        //js为什么可以操作网页的html元素?
        //因为浏览器会将html代码读取到内存中，生成一颗dom树对象（document）
        //修改了dom树内容，最终页面也会变化
        console.log(document);

    </script>
</body>
</html>

1.4-BOM

browerser object model:浏览器对象模型
BOM定义了一套操作浏览器功能的API

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BnL25p9K-1640402889598)(day01.assets/1553960994226.png)]

02-获取页面元素

思考： css语言如何获取页面元素？
- 通过选择器
  - id选择器 : #id名
  - 类选择器: .类名
  - 标签选择器:标签名
  - 子代选择器:ul>li
  - 后代选择器:ul li
js语言如何获取元素页面元素？
- 也是通过选择器

语法	示例	描述	返回值
querySelector()	document.querySelector(‘选择器’)	根据选择器获取满足条件`第一个`元素	DOM对象 null
querySelectorAll()	document.querySelectorAll(‘选择器’)	根据选择器获取满足条件`所有`元素	伪数组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      p {
        color: red;
      }

      .one {
        width: 100px;
        height: 100px;
        background-color: green;
      }

      #box {
        border: 5px solid yellow;
      }
    </style>
  </head>
  <body>
    <div class="one">k</div>
    <div id="box" class="one">班长</div>
    <p class="one">小明</p>

    <script>
      /*学习目标：获取元素 
            1. 获取单个元素 ： document.querySelector('选择器')
                1.1 如果选择器不存在则获取null
                1.2 如果选择器存在，只会获取满足条件的第一个 "dom对象"
            2. 获取多个元素:   document.querySelectorAll('选择器')
                2.1 如果选择器不存在则获取空数组  []
                2.2 如果选择器存在，会获取满足所有条件的 “dom对象伪数组”
            3.querySelector与querySelectorAll区别
                3.1 querySelector获取的是dom对象，可以直接操作修改
                3.2 querySelector获取的是伪数组，不可以直接操作修改。必须要通过下标取出里面的dom对象才可以修改。
        */

      /**
        * @description: 1.根据选择器获取页面元素
        * @param {string}  选择器字符串
        * @return:  null | DOM元素对象
            特点： 只会获取满足选择器条件的第一个元素
        */
      let box = document.querySelector('#box')
      console.log(box)
      /* (1)如果选择器不存在则获取null （2）存在则获取满足条件的第一个元素 */
      let one = document.querySelector('.one')
      console.log(one)

      /**
        * @description: 2.根据选择器获取页面所有元素
        * @param {string}  选择器字符串 
        * @return: 一定是伪数组   [DOM元素对象，DOM元素对象,DOM元素对象]
            特点：（1）会获取满足选择器条件的所有元素，并且一定返回数组类型
            (2)如果选择器不存在，则返回空数组
            (3)如果选择器只能找到一个元素，也会返回数组
      */
      let oneList = document.querySelectorAll('p')
      console.log(oneList)

      //伪数组有数组三要素（下标，元素，长度），不能使用数组api
      // oneList.reverse()

      /* 3.两者使用注意点 */
      //3.1 querySelector获取的是dom对象，可以直接使用dom语法进行操作修改
      box.style.backgroundColor = 'pink'
      //3.2 querySelectorAll获取的是数组，不可以直接使用dom语法（数组是没有dom语法的）
      //必须要通过下标取出dom对象才可以进行操作修改
      oneList[0].style.backgroundColor = 'red'
    </script>
  </body>
</html>

03-操作元素属性

语法（普通元素）	示例	描述
元素.style.样式属性	box.style.width	获取元素`css样式`属性
className	box.className	获取元素`类名`
innerText	box.innerText	获取元素的文本
src	img.src	获取元素(图片img)的路径
href	a.href	获取元素（a标签）的超链接

语法（表单元素）	示例	描述
value	input.value	获取表单元素(单标签)的文本
disabled	input.disabled	是否禁用（`布尔类型`）
checked	input.checked	是否选中(`布尔类型`),radio单选框 checkbox多选框
selected	input.selected	是否选中(`布尔类型`),select下拉选择框

1.1-元素内容操作

作用完全不同（只是有些类似）
类似点：获取到的都是string类型字符串
- innerText:获取元素文本
- innerHTML:获取元素内容（文本+标签）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">
      武汉大前端
      <p>我是ikun</p>
    </div>

    <script>
      /*学习目标：元素内容操作 
            innerText :  操作元素文本
            innerHTML :  操作元素内容（文本+标签）
        */

      //获取元素
      let box = document.querySelector('#box')

      //1.innerText
      console.log(box.innerText) // 获取文本（包含子元素文本）

      //2.innerHTML
      console.log(box.innerHTML) // 获取内容 (文本+标签)

      //3.通过分别设置一个元素的innerText与innerHTML了解两者的区别

      //3.1 innerText:会把所有的内容都当成文本，无法解析标签
      // box.innerText = '<a href="#">我是链接</a><h2>我是标题</h2>'

      //3.2 innerHTML:可以解析字符串中的标签
      //作用：可以和document.write()一样动态给页面添加元素
      box.innerHTML = '<a href="#">我是链接</a><h2>我是标题</h2>'
    </script>
  </body>
</html>

1.2-元素常用属性

语法	作用
元素.id	获取id
元素.className	获取类名
元素.innerText	获取文本
元素.href	获取链接（常用于a标签）
元素.src	获取路径(常用于img标签)
元素.style	获取css样式对象(获取的是一个对象类型，包含所有css熟悉)
元素.style.backgroundColor	获取css样式的颜色（带`-`的css样式，需要使用驼峰命名来获取）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <a href="http://www.itheima.com">点我有惊喜</a>
    <br />
    <img src="./images/01.png" title="武汉李宗盛" />

    <script>
      /* 学习目标 ： 普通元素常用属性
            1.语法：  元素.属性 = 值
            2.常用属性
                href : 链接,一般用于a标签
                src  : 文件路径,一般用于img标签
                
        */

      //1.获取元素对象(DOM对象)
      let a = document.querySelector('a')
      let img = document.querySelector('img')

      //2.操作对象的常见属性

      //2.1 href : 一般用于a标签
      console.log(a.href) //http://www.itheima.com/
      a.href = 'http://www.itcast.cn'

      //2.2 src : 一般用于img标签
      console.log(img.src) //文件绝对路径
      img.src = './images/02.jpg'
      img.title = '武汉校区颜值担当'
    </script>
  </body>
</html>

1.3-元素样式属性

1.3.1-通过 style 操作样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div
      class="box"
      style="width: 100px;height: 100px;background-color: pink"
    ></div>
    <script>
      /*学习目标：元素样式操作
            1.语法：  元素.style.样式属性 = 值 
                * 注意点： 有-的样式属性需要转成驼峰命名（去掉-,后面第一个字母大写）
        
        */

      //获取元素
      let box = document.querySelector('.box')

      /* 设置样式需要注意的地方
       * 如果样式属性有 - ， 例如 border-  font- padding-等，则需要转成驼峰命名
       * 驼峰命名： 去掉-, -后面的第一个字母大写
       */
      box.style.width = '200px'
      box.style.backgroundColor = 'skyblue'
    </script>
  </body>
</html>

1.3.2-通过className操作样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        border: 10px solid red;
      }

      .one {
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div
      class="box"
      style="width: 100px;height: 100px;background-color: pink"
    ></div>
    <script>
      /*学习目标：元素样式操作
            1.style语法：  元素.style.样式属性 = 值 
                * 注意点： 有-的样式属性需要转成驼峰命名（去掉-,后面第一个字母大写）
            2.className语法:   元素.className = '类名'
                * 注意点： 会覆盖原本的类名
            3.classList语法: 
        
        */

      //获取元素
      let box = document.querySelector('.box')
      /* 通过className设置类名来设置样式注意点
       * 类名需要通过className来访问，而不是class，因为class是js中的关键字
       * 如果元素原本有类名,则会被覆盖
       */
      box.className = 'one' //原来的box被覆盖了，因为对象属性赋值会先把旧值销毁
    </script>
  </body>
</html>

1.3.3-通过classList操作样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        border: 10px solid red;
      }

      .one {
        margin: 20px;
      }

      .two {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div
      class="box"
      style="width: 100px;height: 100px;background-color: pink"
    ></div>
    <script>
      /*学习目标：元素样式操作
            1.style语法：  元素.style.样式属性 = 值 
                * 注意点： 有-的样式属性需要转成驼峰命名（去掉-,后面第一个字母大写）
            2.className语法:   元素.className = '类名'
                * 注意点： 会覆盖原本的类名
            3.classList语法: 
                3.1 追加类：  元素.classList.add('类名')
                3.1 移除类：  元素.classList.remove('类名')
                3.1 切换类：  元素.classList.toggle('类名')
                    切换意思： 如果有,则移除。 没有则追加。
        
        */

      //获取元素
      let box = document.querySelector('.box')

      //追加类 : 多个类名使用逗号隔开
      box.classList.add('one', 'two')
      //移除类
      box.classList.remove('one')
      //切换类 : 有则移除，无则追加
      box.classList.toggle('two')
    </script>
  </body>
</html>

1.4-表单元素常用属性

语法	作用
元素.value	获取文本
元素.disabled	获取禁用状态（布尔类型）
元素.checked	获取选中状态（用于radio/checkbox）
元素.selected	获取选中状态(用于option)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        1.在html中，表单元素有一类独有的属性，表示表单元素的两种状态 disabled selected checked
        2.在js中，这一类属性属于布尔类型 
        3.在html中，写了就是true，没写就是false
     -->
    <input type="button" value="我是按钮" disabled />
    <br />
    <input type="text" placeholder="请输入用户名" value="admin" disabled />
    <br />
    <input type="password" placeholder="请输入密码" />
    <br />
    <input type="radio" name="sex" checked />男
    <input type="radio" name="sex" />女
    <br />
    <input type="checkbox" name="good" checked />商品1
    <input type="checkbox" name="good" />商品2
    <input type="checkbox" name="good" />商品3
    <input type="checkbox" name="good" />商品4
    <br />
    <select name="" id="">
      <option value="">前端</option>
      <option value="">UI</option>
      <option value="" selected>Java</option>
    </select>

    <script>
      /* 学习目标： 表单元素属性 */

      //1.获取表单元素
      let inputList = document.querySelectorAll('input')
      console.log(inputList) //数组
      let optionList = document.querySelectorAll('option')
      console.log(optionList)

      //2.表单属性操作

      //2.1 表单文本   value
      /* *****注意： inputList是一个数组，不是DOM对象。 无法操作DOM对象属性的
            数组中的元素才是DOM对象 [DOM对象,DOM对象,DOM对象]
        解决方案： 利用数组下标来获取DOM对象，然后再操作属性
         */
      // console.log( inputList.value );//undefined
      console.log(inputList[1].value) //'admin'
      inputList[1].value = '欢迎来到武汉大前端'

      //2.2 表单布尔类型属性（表单状态）

      console.log(inputList[0].disabled) //true  禁用
      inputList[0].disabled = false

      inputList[4].checked = true

      optionList[1].selected = true
    </script>
  </body>
</html>

04-事件介绍及注册事件

1.事件：js处理用户交互的一种机制
- 交互：什么元素在什么时刻做什么事
2.事件的三要素：组成事件的三要素
- 事件源：什么元素（div p）
- 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
- 事件处理函数：做什么事（一段代码：函数）
3.注册事件:本质是给元素属性赋值
- 事件源.事件类型 = 事件处理函数
  - box.onclick = function(){}
4.事件工作原理
- a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
- b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
5.页面中 任何元素 都可以注册很多个事件(点击，移入等)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div
      id="box"
      class="one"
      style="width: 100px;height: 100px;background-color: green"
    ></div>

    <script>
      //获取页面元素
      let box = document.querySelector('#box')
      //动态操作元素属性(html属性，css样式属性)
      // box.style.backgroundColor = 'red';

      /* 
        1.交互(功能) ： 什么元素 在 什么时刻 做 什么事
        2.事件(技术) :  js实现交互功能的一种机制(技术)
        3.事件三要素
            事件源 ： 什么元素(对象)
            事件类型 ： 什么时刻(属性) （单击 双击 鼠标移入  鼠标移出）
                单击： onclick
                双击: ondblclick
                鼠标移入： onmouseover
                鼠标移出： onmouseout
            事件处理 ： 做什么事(函数)
        4.注册事件 : 给元素添加交互功能
            语法：  事件源.事件类型 = 事件处理函数  
                    box.onclick = function(){}

        5.事件原理
            5.1 注册事件本质 是 ： 对象的属性(方法)赋值
            5.2 注册事件的时候，事件处理函数不会执行 （函数在声明的时候不会执行）
            5.3 当用户触发事件(点击)的时候，浏览器会自动去调用事件处理函数
                * 点击box的时候，浏览器底层会执行一行代码：  box.onclick();
         */

      /* 
        任何元素都可以注册事件(添加交互功能)
        任何元素都可以注册很多个事件
         */
      box.onclick = function () {
        box.style.backgroundColor = 'red'
      }

      box.onmouseover = function () {
        box.style.backgroundColor = 'purple'
      }

      box.ondblclick = function () {
        alert('你双击我了')
      }
    </script>
  </body>
</html>

05-网页案例

1.1-实际开发思路介绍

1.实际开发中，我们做某一个功能的时候，通常遵循以下分析思路
- （1）明确需求
  - 我们代码的意义是完成需求，如果连需求是什么都不清楚，从何谈实现？
- （2）根据需求整理思路
  - 明确需求之后，应该根据需求理清代码思路
  - 磨刀不误砍柴工，如果敲代码想到一行写一行，思路很容易混乱，而且容易出现bug
- （3）根据思路敲代码
  - 思路一旦清晰，敲代码就是一个代码熟练度问题，如果忘记了某个api，可以查阅资料或者以前的笔记
2.如何来描述需求和整理思路
- 网页的交互需求，其实就是事件，通常都三个大步骤`点击了(事件类型)什么元素（事件源），发生了什么事（事件处理）
- 所以我们在整理思路的时候，应该从事件三要素触发

1.2-隔行变色

1.需求：点击按钮，让界面的li标签改变颜色，并且单数行为红色，双数行为绿色
2.思路
- 1.事件源：获取界面的button元素
- 2.事件类型：给button元素注册一个点击事件
- 3.事件处理：获取到界面的li标签并且设置颜色

[效果预览] (file:///C:/Users/%E5%BC%A0%E6%99%93%E5%9D%A4/Desktop/%E5%BC%A0%E6%99%93%E5%9D%A4%E5%89%8D%E7%AB%AF%E5%A4%87%E8%AF%BE%E8%B5%84%E6%96%99/AB%E6%A8%A1%E5%BC%8F/03-WebApi/2020%E7%89%88%E6%9C%AC/%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%96%99/%E5%A4%87%E8%AF%BE%E4%BB%A3%E7%A0%81/day01/02-%E7%BD%91%E9%A1%B5%E6%A1%88%E4%BE%8B/01-%E6%A1%88%E4%BE%8B%EF%BC%9A%E9%9A%94%E8%A1%8C%E5%8F%98%E8%89%B2.html)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我啊，给你点颜色看看</button>
    <ul id="ul1">
        <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>隔壁老王10</li>
    </ul>

    <script>
        /* 
        1.分析需求(交互)：点击按钮，页面li元素颜色变化（单数行绿色，双数行黄色）
        2.思路分析（事件三要素）
            获取元素：事件源：
            注册事件：事件类型
            事件处理：
        */
        
        //1.获取元素
        let btn = document.querySelector('#btn');
        let liList = document.querySelectorAll('li');
        
        //2.注册事件
        btn.onclick = function () {
            //3.事件处理:页面li元素颜色变化（单数行绿色，双数行粉色）
            for (let i = 0; i < liList.length; i++) {
                if (i % 2 == 0) {//单数行
                    liList[i].style.backgroundColor = 'green';
                } else {
                    liList[i].style.backgroundColor = 'yellow';
                };
            };
        };

    </script>
</body>

</html>

1.3-开关灯

[效果预览]
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="关灯" id="btn">

</body>

<script>
    /*本小节知识点：1.一个按钮实现两种功能用法
    *2.获取body元素的简洁方式：document.body
    * 3.细节：双标签使用innerText获取文本  单标签使用value获取文本
     */
    //1.获取元素
    let btn = document.getElementById('btn');
    //2.注册事件
    btn.onclick = function () {
        //如何获取body元素？
        //（1）我们学习过的通过标签获取元素
        //let body = document.getElementsByTagName('body')[0];
        //(2)最常用的简洁方式：body标签本身具有唯一性，可以直接点语法获取
        let body = document.body;

        if(this.value == '关灯'){

            body.style.background = 'black';//修改body的背景颜色为黑色
            this.value = '开灯';

        } else{

            body.style.background = '';//body默认背景颜色就是白色，不设置默认就是白色
            this.value = '关灯';
        }
    };
</script>
</html>

1.4-环境对象this

this : 环境对象，相当于中文的‘我’字。可以指向任何对象，具体的规则是：谁说出这个字，这个字就代表谁
- this指向：谁调用我，我就指向谁（在事件处理函数中，this一般指向事件源）

1.5-二维码显示和隐藏

[效果预览]
在这里插入图片描述

需求分析：
鼠标移入小盒子：显示大盒子，设置大盒子display属性为block
鼠标移出小盒子：隐藏大盒子，设置大盒子display属性为none
思路分析：事件三要素
1 获取元素：
2 注册事件：
3 事件处理：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        #small {

            width: 50px;
            height: 50px;
            background: url("images/bgs.png") no-repeat -159px -51px;

            position: fixed;
            top: 40%;
            right: 10px;
        }

        #big {

            width: 210px;
            height: 210px;
            position: absolute;
            left: -210px;
            display: none;
        }

        #big img {

            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

    <div id="small">
        <div id="big">
            <img src="images/hmewm.jpg" alt="" />
        </div>

    </div>
    <script>
        /*
        1.分析需求(交互)：
            a.鼠标移入small盒子：显示大盒子：设置大盒子big的display为block
            b.鼠标移出small盒子：隐藏大盒子：设置大盒子big的display为none
        2.思路分析（事件三要素）
            获取元素：事件源：
            注册事件：事件类型
            事件处理：
        */

        //1.获取元素
        let small = document.querySelector('#small');
        let big = document.querySelector('#big');
        //2.注册事件

        //2.1 鼠标移入small
        small.onmouseover = function () {
            //3.事件处理:
            big.style.display = 'block';
        };

        //2.2 鼠标移出small
        small.onmouseout = function(){
            //隐藏大盒子
            big.style.display = 'none';
        };
    </script>
</body>

</html>

1.6-微博输入案例

需求：监听输入框的输入，实时获取文本长度并显示
知识点： oninput事件：只要输入框输入了内容就会触发

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lx3XhziY-1640402889601)(day01.assets/1636625631015.png)]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .userCount {
        color: red;
      }
    </style>
  </head>

  <body>
    <div class="controls">
      <textarea
        placeholder="说点什么吧..."
        id="area"
        cols="30"
        rows="10"
        maxlength="200"
      ></textarea>
      <div>
        <span class="userCount">0</span>
        <span>/</span>
        <span>200</span>
      </div>
    </div>

    <script>
      /*本小节知识点 
        1.事件源： textarea
        2.事件类型： oninput 
            * 表单输入独有的事件，只要用户输入了就会触发
        3.事件处理： 获取文本域的文本长度， 赋值给 span标签
        */

      // 1. 获取元素 文本域  count
      let area = document.querySelector('#area')
      let useCount = document.querySelector('.userCount')
      // 2. 绑定事件  用户输入事件 onInput
      area.oninput = function () {
        //area.value : 获取的是输入框的文本（字符串）
        //area.value.length : 获取的是字符串长度
        useCount.innerText = area.value.length
      }
    </script>
  </body>
</html>

06-获取元素语法补充(了解即可)

重点掌握选择器获取,其他仅做了解

语法	示例	描述
getElementById()	document.getElementById(‘box’)	根据`id`获取元素
getElementsByTagName()	document.getElementsByTagName(‘li’)	根据`标签名`获取元素
getElementsByClassName()	document.getElementsByClassName(‘one’)	根据`类名`获取元素
getElementsByName()	document.getElementsByName(‘sex’)	根据`name属性值`获取`表单元素`
`querySelector()`	document.querySelector(‘选择器’)	根据选择器获取满足条件`第一个`元素
`querySelectorAll()`	document.querySelectorAll(‘选择器’)	根据选择器获取满足条件`所有`元素

1.1-根据id获取页面元素

语法:document.getElementById('id名');
- 如果没有这个id，那么会得到一个null
由于在html的标签元素中id具有唯一性，所以我们可以直接使用id来表示这个元素
- 这种用法不推荐，有些浏览器不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div1">我是div1</div>
<div id="div2">我是div2</div>

</body>

<script>

    /**1.getElementById:通过id获取元素
     * 参数：元素id字符串
     * 返回值：元素对象（又称为dom对象）/null
     */
    let div1 = document.getElementById('div1');
    console.log ( div1 );
    console.log ( typeof  div1 );//object

    //2.如果没有这个id，那么会得到一个null
    let box = document.getElementById('box');
    console.log ( box );//null

    //3.由于在html的标签元素中id具有唯一性，所以我们可以直接使用id来表示这个元素
    //这种用法不推荐，有些浏览器不支持
    console.log ( div2 );
</script>
</html>

1.2-根据标签名tagName获取页面元素

语法:document.getElementsByTagName('标签名')
细节：
- （1）id具有唯一性所以获取到的要么是null要么是单个元素
- （2）标签名可以在页面存在多个，所以获取到的一定是一个伪数组，如果没有则是空数组
总结
- 1.如果使用document调用getElementsByTagName得到的就是整个html文档中所有的标签名元素
- 2.如果使用某一个元素对象调用getElementsByTagName得到的就是该元素下所有的标签名元素
- 3.getElementById只能由document来调用，否则会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="oldWang">
    <li id="id1">隔壁老王1</li>
    <li>隔壁老王2</li>
    <li>隔壁老王3</li>
    <li>隔壁老王4</li>
    <li>隔壁老王5</li>
</ul>

<ul>
    <li>隔壁老张1</li>
    <li>隔壁老张2</li>
    <li>隔壁老张3</li>
    <li>隔壁老张4</li>
    <li>隔壁老张5</li>
</ul>

</body>

<script>
    /**1.getElementsByTagName通过标签名获取元素
     *参数：标签名字符串
     * 返回值：标签数组(伪数组)
     *      * 细节：（1）id具有唯一性所以获取到的要么是null要么是单个元素
     *                  （2）标签名可以在页面存在多个，所以获取到的一定是一个数组，如果没有则是空数组
     *
     */
    let liList = document.getElementsByTagName('li');
    console.log ( liList );//一定是一个数组，所以找不到则是空数组

    //console.log ( liList.slice () );//程序会报错，伪数组没有数组的API

    //2.假如我只想获取某一个元素下所有标签名的元素，可以先获取父元素对象，然后调用父元素对象的getElementsByTagName方法
    //2.1 先通过id获取ul标签
    let oldWang = document.getElementById('oldWang');
    //2.2 调用oldWang的getElementsByTagName方法
    let wangList = oldWang.getElementsByTagName('li');
    console.log ( wangList );

    /*总结
    1.如果使用document调用getElementsByTagName得到的就是整个html文档中所有的标签名元素
    2.如果使用某一个元素对象调用getElementsByTagName得到的就是该元素下所有的标签名元素
    3.getElementById只能由document来调用，否则会报错
     */
    //console.log ( wangList.getElementById ( "id1" ) );//这样写会报错，id只能通过document来获取

</script>
</html>

1.3-根据类名className获取元素

语法：document.getElementsByClassName ( "类名" )
- 返回的就是一个伪数组
小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名类名）都是伪数组
注意点:根据类名获取元素存在浏览器兼容问题，IE8及以下不支持，一般很少使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="ul1">
    <li class="li1">隔壁老王1</li>
    <li class="li1">隔壁老王2</li>
    <li class="li1">隔壁老王3</li>
    <li class="li1">隔壁老王4</li>
    <li class="li1">隔壁老王5</li>
</ul>

<ul id="ul2">
    <li class="li1">隔壁老张1</li>
    <li class="li1">隔壁老张2</li>
    <li class="li1">隔壁老张3</li>
    <li class="li1">隔壁老张4</li>
    <li class="li1">隔壁老张5</li>
</ul>

</body>

<script>
    /*本小节知识点：根据类名classNmae获取元素
    1.小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组
    否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名 类名）都是伪数组

    2.根据类名获取元素存在浏览器兼容问题，IE8及以下不支持，一般很少使用

     */

    //1.获取ul1
    let ul1 = document.getElementById('ul1');
    //2.根据类名获取标签  返回的是一个伪数组
    console.log ( ul1.getElementsByClassName ( "li1" ) )//获取ul1元素下的所有类名为li1的标签
    console.log ( document.getElementsByClassName ( "li1" ) )//获取整个文档中类名为li1的标签
    //3.根据类型获取标签getElementsByClassName，尽量少用，改用其他方式代替
    //原因：存在浏览器兼容性问题，IE8及之前不支持
</script>
</html>

1.4-根据name属性值获取表单元素

语法:document.getElementsByName('表单元素name属性的值');
- name属性是表单元素特有的默认属性，返回值也是一个伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" name="one">
<input type="password" name="one">
<input type="radio" name="one">
<input type="checkbox" name="one">


</body>

<script>
    /*使用name属性来获取元素，返回值也是一个伪数组
        * name属性是表单元素特有的默认属性
     */
    let nameList = document.getElementsByName('one');
    console.log ( nameList );
</script>
</html>