蓝旭前端第四周预习

一.BOM模型

BOM模型的核心是浏览器对象模型，它用于描述浏览器对象层次结构的接口，以Window对象为顶层，提供与浏览器窗口交互的功能。

结构图

核心特点：

1.对象结构

（1）顶层对象为window,包含子对象如Document对象，Location对象，Navigator对象，History对象等。

（2）通过window.document可访问DOM模型，实现文档操作。

1.1window对象的方法

1.2 navigator对象

常见属性：

appCodeName : 内部代码

appName : 浏览器名称

appVersion : 版本号

platform : 操作系统

onLine : 是否在线

cookieEnabled : 是否支持cookie

1.3 location对象

location.href //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm 
 
location.portocol //URL中使用的协议，即双斜杠之前的部分，如http 
 
location.host //服务器的名字，如www.wrox.com 
 
location.hostname //通常等于host，有时会省略前面的www 
 
location.port //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080 
 
location.pathname //URL中主机名后的部分，如/pictures/index.htm 
 
location.search //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx 
 
location.hash //如果URL包含#，返回该符号之后的内容，如#anchor1 
 
location.assign("http:www.baidu.com"); //同location.href，新地址都会被加到浏览器的历史栈中 
 
location.replace("http:www.baidu.com"); //同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问 
 
location.reload(true | false); //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false 

1.4 history对象

history.back() : 加载历史列表中前一个URL。等同于在浏览器中点击后退按钮。

function goBack() {
    window.history.back()
 }

history.forward() : 加载历史列表中下一个URL。等同于在浏览器中点击前进按钮。

function goForward() {
    window.history.forward()
 }

2.核心功能

（1）弹出/关闭窗口，调整窗口大小。

（2)获取浏览器信息（如版本，屏幕分辨率）。

（3）管理导航（跳转页面，历史记录）。

（4）支持Cookie存储。

3.标准化问题

BOM缺乏统一标准，不同浏览器（如IE浏览器）可能扩展特定功能（如ActiveX对象），导致实现差异。

与DOM模型的关系：BOM包含DOM，window.document是DOM的根节点，BOM提供浏览器操作能力，DOM专注于文档内容操作。

二.DOM模型

1.DOM简介：当网页被加载时，浏览器会创建页面的文档对象模型。

2.对象的HTML DOM树

3.获取DOM对象

const one = document.querySelector('css选择器')//选择匹配的第一个元素
const two = document.querySelectorAll('css选择器')//选择匹配的多个元素
const three = document.getElementById('one')//通过id
const four = document.getElementsByTagName('div')//通过标签名
const five = document.getElementsByClassName('three')//通过类名

4.操作元素内容

4.1元素inner Text 属性：将文本内容添加/更新到任意标签位置；显示纯文本，不解析标签。

4.2元素inner HTML属性：将文本内容添加/更新到任意标签位置；会解析标签，多标签建议使用模板字符。

5.操作元素属性

5.1操作元素常用属性

        还可以通过JS设置/修改标签元素属性，比如通过src更换图片

        最常见的属性比如：href.title.src等

        语法：对象 . 属性 = 值

document.getElementById("myImage").src = "landscape.jpg";


 

5.2操作元素样式属性

        还可以通过JS设置/修改标签元素的样式属性

（1）通过style属性操作CSS

（2）操作类名（className）操作CSS

（3）通过classList操作类控制CSS

5.3操作表单元素属性

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

（2）例如：disabled，checked，selected

6.事件监听

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

6.2事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数作出反应，也称为绑定事件或者注册事件

6.3语法 ： 元素对象.addEventListener('事件类型'，要执行的函数)

6.4 事件监听三要素

        事件源：哪个dom元素被事件触发了，要获取dom元素

        事件类型：用什么方式触发，比如鼠标单击（click)，鼠标经过(mouseover)等

        事件调用的函数：要做什么事

6.5 事件监听版本

（1）DOM L0：事件源.on事件 = function(){}

（2）DOM L2：事件源.addEventListener(事件，事件处理函数）

（3）区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多性，推荐使用

常见事件类型：

鼠标事件

• click - 点击

• dblclick - 双击

• mousedown - 鼠标按下

• mouseup - 鼠标释放

• mousemove - 鼠标移动

• mouseenter - 鼠标进入元素

• mouseleave - 鼠标离开元素

  键盘事件

  • keydown - 按键按下

  • keyup - 按键释放

  • keypress - 按键按下并产生字符（已废弃）

    表单事件

    • submit - 表单提交

    • change - 表单元素值改变

    • focus - 获取焦点

    • blur - 失去焦点

    • input - 输入值变化（实时触发）

      其他常用事件

      • load - 资源加载完成

      • scroll - 滚动事件

      • resize - 窗口大小改变

        三.常用Web API介绍 

        1.DOM操作API

        （1）选择元素

        document.getElementById('id')
        document.querySelector('.class') // 返回第一个匹配元素
        document.querySelectorAll('div') // 返回NodeList

        （2）元素操作

        element.textContent = '文本' // 安全设置文本
        element.innerHTML = 'HTML' // 解析HTML字符串
        element.setAttribute('data-id', '123')
        element.classList.add('active')
        element.style.backgroundColor = 'red'

        （3）节点操作

        parent.appendChild(child)
        parent.removeChild(child)
        document.createElement('div')
        element.cloneNode(true) // 深拷贝

        2.网络请求API

        （1）Fetch API

        fetch('/api/data', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ key: 'value' })
        })
        .then(res => res.json())

        （2）Axios

        axios.get('https://api.example.com/data')
          .then(response => console.log(response.data))
          .catch(error => console.error(error));

        3.JavaScript内置API

        （1）数组方法

        array.map(item => item * 2)
        array.filter(item => item > 5)
        array.find(item => item.id === 1)
        array.reduce((sum, cur) => sum + cur, 0)

        （2）对象方法

        Object.keys(obj)
        Object.values(obj)
        Object.entries(obj)
        Object.assign({}, target, source)

        （3）字符串方法

        string.includes()
        string.repalce()
        string.split()