js基础-CSDN博客

本文链接：https://blog.csdn.net/baidu_41772421/article/details/103345324

今日内容

JavaScript

1. ECMAScript：
2. BOM：
3. DOM：
	1. 事件：某些组件被执行某些操作后触发了某些代码的执行。

DOM简单学习：为了满足案例要求

* 控制html文档的内容
* 代码：获取页面标签（元素）对象 Element
	1. document.getElimentById（“id对象”）：通过元素的id获取对象	
*操作Element对象：
	1. 修改属性值：
		1. 明确获取对象是哪一个
		2. 查看API文档，找其中有哪些属性可以设置
	2. 修改标签体内容：
		**属性： innerHTML

事件简单学习

*功能：某些组件被执行某些操作后，出发某些代码的执行
*如何绑定事件
	1. 直接在HTML标签上，指定事件的属性（操作），属性值就是js代码
		1. 事件：onclick--- 单击事件
		2. 通过js获取元素对象，指定事件属性，设置一个函数。

BOM

1.概念：Browser Object Model 浏览器对象模型

	*将浏览器的各个组成部分封装成对象

2.组成	
	//*浏览器对象 Navigtor 
	*window窗口对象 Window
	*地址栏对象  Location
	*历史记录对象 History
	//*显示器对象 Screen

	*document对象	

3.Window ：窗口对象
	* 创建
	* 方法
	  1.与弹出框有关的方法：
		alert（）显示待有一段信息和一个确认按钮的警告框
		confirm（） 显示带有一段消息以及确认按钮和取消按钮的对话框：*如果点击确认，返回true
		prompt（）显示可提示用户输入的对话框
	2.与打开关闭有关的方法
		 close（）关闭浏览器窗口。
		 	*谁调用我，我关谁。
		 open（）打开一个新的浏览器窗口
		 	*返回一个新的window对象。
	3.与定时器有关的方法
		setTimeout（）在指定的毫秒数后调用函数或计算表达式
			*参数：
				1.js代码或者方法对象
				2.毫秒值
			*返回值：唯一标识，用于取消定时器
		clearTimeout（）取消由setTimeout（）方法设置的timeout

		setInterval（）按照指定的周期（以毫秒计）来调用函数或计算表达式
		clearInterval（）取消由setInterval（）设置的timeout
	* 属性
		* 特点：Window对象不需要创建可以直接使用，window使用。window.方法名（）
		* window引用可省略。方法名（）

4. Location：地址栏对象
	1.创建（获取）：
		1.window.location
		2.location
	2.方法：
		*reload（） 重新加载当前文档。刷新
	3.属性：
		*href 设置或返回完整的URL
	
5. History：历史记录对象
	1.创建（获取）：
		1.window.history
		2.history
	2.方法：	
		*back（） 加载history列表中的前一个URL
		*forwar（）加载history列表中的下一个URL
		*go（）加载history中的某一个具体页面
	3.属性：
		*length 返回当前窗口历史列表中的URL数量

DOM

*概念：Document Object Model 文档对象模型
	*将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
*W3C DOM 标准被分为3个不同的部分

*核心 DOM - 针对任何结构化文档的标准模型
	*Document：文档对象
	*Element：元素对象
	*Attribute：属性对象
	*Text：文本对象
	*Comment：注释对象
	
	*Node：节点对象，其他5个的父对象
*XML DOM - 针对XML文档的标准模型
*HTML DOM - 针对HTML文档的标准模型

*核心DOM模型：
	*Document：文档对象
		1. 创建（获取）：在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法：
			1. 获取Element对象：
				1.getElementById（）：根据id属性值获取元素对象。id属性值一般唯一。	 
				2.getElementByTagName（）:根据元素名获取元素对象，返回数组
				3.getElementByClassName（）:根据class属性获取对象，返回数组
				4.getElementByName（）:根据name属性值获取对象，返回数组
			2.创建其他DOM对象：
				1.createAttribute（name）
				2.createComment（）
				3.createElement（）
				4.createTextNode（）
		3. 属性
	*Element：元素对象
		1. 创建/获取：通过document来获取和创建
		2. 方法：
			1.removeAttribute():删除属性
			2. setAttribute():设置属性
	*Node：节点对象，其他5个的父对象
		*特点：所有dom对象都可以被认为是一个节点
		*方法：
			*CRUD dom树：
				*appendChild（）：向节点的子节点列表的结尾添加新的子节点。
				*removeChild（）：删除（并返回）当前节点的指定子节点。
				*replaceChild（）：用新节点替换原节点。
		*属性：
			*parentNode：返回节点的父节点

*HTML DOM
	1.标签体的设置于获取：innerHTML
	2.使用html元素对象的属性
	3.控制元素样式
		1.使用元素的style属性来设置
			如：
				//修改样式方式
				div1.style.border="1px solid red";
				div1.style.width="200px"
				//font-size-->fontsize
				div1.style.fontsize="20px";
		2.提前定义好类选择器的样式，通过元素的className属性来设置器class属性值

事件监听机制

*概念：某些组件被执行了某些操作后，触发了某些代码的执行。
	*事件：某些操作，	如：单击，双击，键盘按下，鼠标移动
	*事件源： 组件  如：按钮 文本输入框。。
	*监听器：代码。
	*注册监听：将事件，事件源，监听器结合一起。当事件源上发生了某个事件，则触发执行某个监听代码。

*常见事件（event）：
	1.点击事件：
		1.onclick：单击事件
		2.ondblcliclk：双击事件
	2.焦点事件：
		1.onblur：失去焦点
			*一般用于表单校验
		2.onfocus：获得焦点
	3.加载事件：
		1.onload：一张页面或一幅图像完成加载。
			*加载完后触发js代码
	4.鼠标事件：
		1.onmousedowm：鼠标按钮被按下
			*定义方法时，定义一个形参，接受event对象。
			*event对象的button属性可以获取鼠标按钮被点击了
		2.onmouseup：鼠标按键被松开
		3.onmousemove：鼠标被移动
		4.onmouseover：鼠标移到某元素之上
		5.onmouseout：鼠标从某元素移开
	5.键盘事件：
		1.onkeydown：某个键盘按键被按下。
		2.onkeyup：某个键盘按钮被松开
		3.onkeypress：某个键盘按键被按下并松开
	6.选择和改变：
		1.onchange 域的内容被改变
		2.onselect 文本被选中
	7.表单事件：
		1.onsubmit 确认按钮被点击
		2.onreset 重置