JavaScript 网页编程（二）——Web API（DOM）

目录

一.Web API 介绍

二.DOM 介绍

三.获取元素

四.事件基础

五.操作元素

六.排他操作

七.节点操作

八.事件高级

九.常用鼠标事件

十.常用键盘事件

---

一.Web API 介绍

• API：某些工具（函数）由编程语言提供，已封装好内部实现，使用接口，无需关注内部实现
• Web API：浏览器提供的接口，用于操作 浏览器功能（BOM） 和 页面元素（DOM），作出浏览器交互效果

二.DOM 介绍

• DOM 文档对象模型（Document Object Model）：​编程接口，可以改变网页内容、结构、样式
• 获取的 DOM元素 是一个对象（object），所以称为 文档对象模型
• DOM 树（文档树模型）：把 文档 映射成树形结构，通过 节点对象 对其处理，处理的结果 加入当前页面
• DOM 使 HTML形成一棵 DOM树，包含文档、元素、节点，解释如下：

1. 文档（document）：一个页面 = 一个文档，是对象
2. 节点（node）：网页中所有内容，如：标签、属性、文本、注释等，是对象
3. 标签节点（element）：网页中所有标签，简称为“元素”，是对象

三.获取元素

• 想要操作页面内容，需要先获取到对应的元素

1.根据 ID 获取

• 文档页面 从上往下 加载，先有标签，所以

  3.表单元素属性操作

  • 表单中，这些属性的值是布尔型：disabled、checked、selected
  • 表单里的值通过 value 修改，可以看下面的显示隐藏文本框内容分析
  • this 指向：事件函数的调用者
  • 仿京东显示密码分析：
  1. 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
  2. 一个按钮两个状态，点击一次，切换为文本框，继续点击一次，切换为密码框
  3. flag ：用于确定 现在输入的密码是否可见，每次更换完图片 和 密码框显示方式 之后，都要 重置 flag

   

十.常用键盘事件

1.键盘事件

• keyup 按键 弹起的时候 触发 不区分大小写
• keydown 按键 按下的时候 触发  能识别功能键，不区分大小写 比如 ctrl shift 左右箭头
• keypress 按键 按下的时候 触发  不能识别功能键，区分大小写 比如 ctrl shift 左右箭头
• 三个事件的执行顺序：  keydown（能识别功能键） -- keypress（不能识别功能键） -- keyup（弹起）

2.键盘事件对象

• 键盘事件对象中的 keyCode属性 得到相应键的 ASCII码值 进而判断按键
• keyup 和 keydown 不区分字母大小写  a 和 A 得到的都是65
• keypress 区分字母大小写  a 97  A 65

• 模拟京东按键输入内容分析：检测用户是否按下了 s 键，如果按下 s 键，就把光标定位到搜索框里面
• 搜索框获得焦点：focus() 方法

• 模拟京东快递单号查询分析：

1. 输入框输入内容时， 上面的大号字体盒子（con）显示的字号更大
2. 表单检测输入： 给表单添加 键盘keyup 事件，若输入内容，大字体盒子显示，同时把输入框的值赋值给 con 盒子，如果输入框内容为空，则隐藏大号字体盒子
3. 若输入框失去焦点，则大字体盒子不会显示，若输入框获得焦点且内容不为空，则大字体盒子显示

    

        
 这里显示更大的字号 
        
    
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd'); 
        jd_input.addEventListener('blur', function() {    // 失去焦点，就隐藏 con 盒子
                con.style.display = 'none';    })

        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {    // 获得焦点，且输入框内容不为空时，就显示 con 盒子
                con.style.display = 'block';     }})

        jd_input.addEventListener('keyup', function() {    // 当键盘弹起 表示输入完成 
                if (this.value == '') {
                    con.style.display = 'none';    // 如果没有输入内容 大盒子就不会出现
                } else {
                    con.style.display = 'block';    // 如果输入了内容 大盒子出现 并被赋值
                    con.innerText = this.value;     }})