2022-12-06 王嘉乐 前端

一、今日学习内容1.设计模式介绍

• 什么是设计模式
  设计模式就是程序员针对特定问题，给出的简洁而优化的处理方案。所以设计模式，只在特定的情况，特定的实际，针对特定的问题使用。
• 常用的设计模式
  单例模式：只允许存在一个实例的模式
  组合模式：把若干个启动方式一样的构造函数放在一起，准备一个总开关，总开关一启动，那么这些构造函数就都启动了
  观察者模式：又称发布订阅者模式，经典案例：事件监听
  代理模式：proxy，为其他对象提供一种代理以控制对这个对象的访问，为了不暴露执行对象的部分代码
  工厂模式：工厂函数就是做一个对象创建的封装，并将创建的对象return出去
  策略模式：定义一系列的算法，把他们一个个的封装起来，并且使他们可以相互替换，从而避免很多if语句
  
  

2.DOM和BOM概述2.1 DOM和BOM

DOM文档对象模型：是一个使程序和脚本能够动态的访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口

BOM浏览器对象模型：使javascript有能力与浏览器进行对话

API：应用程序编程接口，就是给程序员提供的一种工具，以便可以更加轻松实现某种功能

web API：是浏览器提供的一套浏览器功能和页面元素的API

2.2 DOM，DOM树结构分析

DOM分为三部分：

• 核心DOM：用于XML与HTML的共用接口（操作节点树，创建，删除，查找等）
• XML DOM：XML专用接口，其实就是DOM进行增强，加入一些适用于自己的接口
• HTML DOM：HTML专用接口，其实就是DOM进行增强，加入了一些适用于自己的接口H
  
  

DOM树：HTML节点树

HTML文档是一种树状的结构化文档，各标记之间是一种树状的层次关系

节点：整个文档就是文档节点--document

每一个HTML标签都是一个元素节点---element

标签中的文字是文本节点（回车，空格也是文本节点）---text

标签的属性就是属性节点---Attribute

所有的一切都是节点----Node

2.3 获取标签对象的主要方式1.获取HTML元素--H4
getElementById()
在文档中查找指定的id节点，如果找到则返回该节点

getElementsByTagName()
在文档中查找指定的标签名的对象的集合

getElementsByClassName()
class---类名--集合

getElementsByName()
name属性---集合
​
2.H5--选择器
单个--符合要求的第一个节点
document.querySelector(选择器);
​
集合--符合要求的所有节点
document.querySelectorAll(选择器);2.4 操作标签的内容1.文本标签的内容
innerHTML
innerText
textContent
​
2.表单标签
value2.5 操作标签的样式获取样式属性的值
dom.style.样式的属性名
​
设置
dom.style.样式的属性名="样式的属性值";2.6 操作标签的类名获取类名
dom.className
​
设置类名
dom.className="类名的值";