2022/3/7
1.DOM简单学习

	
		
		
		
	
	
		
		
你好啊
		
	
	

2.事件简单学习
功能:某些组件被执行了某些操作后，触发某些代码的执行
如何绑定事件：
        1.直接在html标签上，指定事件的属性（操作），属性值就是js代码
                事件：onclink--- 单击事件
        2.通过js获取元素队形，指定事件属性，设置一个函数
案例：开关灯

BOM
1.概念：浏览器对象模型
        将浏览器的各个组成部分封装成对象。
2.组成：
        window：窗口对象

 练习：轮播图

        Location：地址栏对象

练习：自动跳转页面

	
		
		
		
		
			p{
				text-align: center;
			}
			span{
				color: red;
			}
		
	
	
		
		

			5秒之后，自动跳转首页...
		
	
	

        Navigator：浏览器对象
        Screen：显示器屏幕对象
        History：历史记录对象
                1.创建（获取）;
                        1.window.history
                        2.history
                2.方法：
                        1.back()   加载history列表中的前一个URL
                        2.forward()   加载history列表中的下一个URL
                        3.go(参数)    加载history列表中的某个具体页面
                                参数：
                                         正数：前进几个历史记录
                                         负数：后退几个历史记录
                3.属性：length  返回当前窗口历史列表中的URL数量

DOM：文档对象模型
1.概念：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作
2.W3C DOM标准被分为3个不同的部分
        1.核心DOM - 针对任何结构化文档的标准模型
                1.1document：文档对象
                1.2Element：元素对象
                1.3Attribute：属性对象
                1.4Text：文本对象
                1.5Comment：注释对象
                1.6Node：节点对象，其他五个对象的父对象
        2.XML DOM - 针对XML文档的标准模型
        3.HTML DOM - 针对HTML文档的标准模型

核心DOM - 针对任何结构化文档的标准模型
                1.1document：文档对象

	
		
		
		
	
	
		div1
		div2
		div3
		div4
		div5
		
		
	
	

                1.2Element：元素对象

	
		
		
		
	
	
		点我试一试
		
		
	
	

                1.3Node：节点对象，其他五个对象的父对象

	
		
		
		
		
			div{
				border: 1px solid red;
			}
			#div1{
				width:200px;
				height:200px;
			}
			#div2{
				width:100px;
				height:100px;
			}
		
	
	
		
		
			div2
					div1
		
		删除子节点
		添加子节点
		
	
	

HTML DOM - 针对HTML文档的标准模型
        1.标签体的设置和获取：innerHTML

	
		
		
	
	
		
			div
		
	
	

        2.使用html元素对象的属性
        3.控制样式
                1）使用元素的style属性来设置
                2）提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

	
		
		
		
			.d1{
				border:1px solid red;
				width:100px;
				height:100px ;
			}
			.d2{
				border:1px solid blue;
				width:200px;
				height:200px ;
			}
		
	
	
		
			div1
		
		
			div2
		
	
	

事件：
1.概念：某些组件被执行了某些操作后，触发了某些代码的执行。
        事件：某些操作，如：单击，双击，键盘按动，鼠标移动
        事件源：组件，如：按钮 文本输入框...
        监听器：代码
        注册监听：将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码。
2.常见事件
        1）点击事件：
                1.1 onclick：单击事件
                1.2 ondblclick：双击事件
        2.焦点事件：
                1.1 onblur：失去焦点
                        一般用于表单验证
                1.2 onfocus：元素获得焦点
        3.加载事件：
                1.1 onload：一张页面或一幅图像完成加载
        4.鼠标事件：
                1.1 onmousedown：鼠标按钮被按下
                        定义方法时，定义一个形参接受event对象。
                        event对象的button属性可以获取鼠标按钮键被点击了
                1.2 onmousemove：鼠标被移动
                1.3 onmouseout：鼠标从某元素移开
                1.4 onmouseover：鼠标移动到某元素之上
                1.5 onmouseup：鼠标按键被松开
        5.键盘事件：
                 1.1 onkeydown：某个键盘按键被按下
                 1.2 onkeyup：某个键盘按键被松开
                 1.3 onkeypress：某个键盘按键被按下并松开
        6.选择和改变：
                  1.1 onchange：域的内容被改变
                  1.2 onselect：文本被选中
        7.表单事件：
                   1.1 onsubmit：确认按钮被点击
                        可以进行校验，阻止表单提交
                        方法返回false则表单被阻止提交
                   1.2 onreset：重置按钮被点击

	
		
		
	
	
		

		
		
			--请选择--
			北京
			上海