DOM对象与事件系统

1)DOM: Document Object Model 文档对象模型
	解释: 将标记语言文档的各个组成部分,封装为对象. 可以使用这些对象,对标记语言文档进行CRUD的动态操作.

	文档模型:
		html文档-->dom树

	DOM定义了HTML和XML文档的标准.

	DOM标准: 
		基本核心DOM:
			Document: 文档对象
			Element: 元素对象
			Attribute: 属性对象
			Text: 文本对象
			Comment: 注释对象

			Node: 节点对象,其它5个对象的父对象

		XML DOM

		HTML DOM:

2)核心DOM模型:
  	(1)创建:
  		打开一个页面-->首先是包含了Window对象-->Window对象中又包含了DOM对象;

	(2)获取:
		在HTML DOM中可以用 window.document 来获取, DOM对象是window对象的一部分;
		在XML DOM中就不能这样获取了;

	(3)方法(2类方法):
		1.获取Element对象:
			getElementById(xxx): 根据id属性值获取元素对象, id属性值一般唯一;
			getElementsByTagName(): 根据元素名称获取元素对象列表; 如: 通过div标签;
			getElementsByClassName(): 根据Class属性获取元素对象列表;
			getElementsByName(): 根据name属性值获取元素列表.

		2.创建其它DOM对象: 
			createAttribute():
			createComment():
			createElement() 重点:
			createNode():

	(4)属性:

3)Element元素对象:
	1.获取: 通过document获取和创建
	2.方法:
		removeAttribute():删除属性
		setAttribute(): 设置属性

		笔记:动态对DOM的元素的属性进行增删改查

	3.属性:

4)Node: 节点对象,其它5个的父对象
	特点: 素哟偶逇dom对象都可以被认为是一个节点;

	方法:
		CURD dom树:
			appendChild(): 向节点的子节点列表的结尾添加新的子节点
			removeChild(): 删除(并返回)当前节点的指定子节点
			replaceChild(): 用新节点替换一个子节点

	属性: parentNode
		
5)HTML DOM:
	(1)是关于如何获取、修改、添加、或 删除 HTML元素的标准;
		标签体的设置和获取: innerHTML

	(2)使用html元素对象的属性

	(3)控制元素样式:
		1.使用元素的style属性来设置
		2.提前定义好选择器的样式

6)事件监听机制:
    (1)概念
		事件: 某些操作. 如: 单机、双击、键盘按下了、鼠标移动了.
		事件源: 组件. 如: 按钮、文本输入框
		监听器: 代码.
		注册监听: 将事件、事件源、监听器结合在一起. 当事件源上发生了事件,则触发执行某个监听器代码.

	(2)事件分类:
		1.单击事件:
			onclick: 单击
			ondblclick: 双击
     
        2.焦点事件:
        	onblur: 失去焦点
        	onfocus: 元素获得焦点 

        3.加载事件
        	1.onload: 一张页面或一副图像完成加载完毕后调用.

        4.鼠标事件
        	1.onmousedown 鼠标按钮被按下
        	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 重置按钮被点击
发布了1620 篇原创文章 · 获赞 144 · 访问量 179万+

猜你喜欢

转载自blog.csdn.net/themagickeyjianan/article/details/104909973