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 重置按钮被点击
DOM对象与事件系统
猜你喜欢
转载自blog.csdn.net/themagickeyjianan/article/details/104909973
今日推荐
周排行