DOM:
(Document Object Model 文档对象模型)
概念:
将 标记语言文档 的 各个组成部分 封装为对象
组成:
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象
Document(文档对象):
获取:
window.document
方法:
- 获取Element对象:
- getElementById(id属性值):
通过id属性值获取唯一的元素- getElementsByTagName(标签名称):
通过标签名称获取元素对象数组- getElementsByName(name属性值):
通过name属性值获取元素对象数组- getElementsByClassName(class属性值):
通过class属性值获取元素对象数组
- 创建其他对象:
- createElement():
创建元素对象- createAttribute():
创建属性对象- createComment():
创建注释对象- createTextNode():
创建文本对象
- 给属性对象设置值:
setAttribute('属性名','设置的属性值');- 删除:
- remove():
删除自己- removeChild(要移除的子元素的Document对象):
移除指定子元素- removeAttribute("要移除的属性名"):
根据属性名,移除指定属性- removeAttributeNode(要移除的属性对象):
根据属性对象,移除指定属性
Element(元素对象):
属性:
- innerHTML属性:
获取或设置 元素的 子内容(设置html标签)- innerTEXT属性:
获取标签之间的文本内容(只能设置标签间的文本内容)
事件:
概念:
事件:一件事
事件源:事件发生的组件
监听器:一个对象(当事件源上发生了事件,就执行对象中的某些方法)
注册监听:将监听器绑定到事件源上,监听事件的发生
注册监听的方式:
- 在定义标签时,添加 事件名称属性。属性值是js代码
js代码会被自动封装到一个function函数的方法体中
例子:
< div id="div_id" onclick="fun();">hehe< /div >- 通过js获取元素对象,再添加事件
例子:
input.onclick = function(){
//alert("hehe");
}
事件的种类:
- 焦点事件:针对表单
- onfocus:
元素获得焦点- onblur:
元素失去焦点
- 点击事件:
- onclick:
当用户点击某个对象时调用的事件- ondblclick:
当用户双击某个对象时调用的事件
- 键盘事件:
- onkeydown:
某个键盘按键被 按下- onkeyup:
某个键盘按键被 松开- onkeypress:
某个键盘按键被 按下并松开- e.keyCode属性:
获取键盘某个键的键码,其实就是该按键的ASCII编码
- 鼠标事件:
- onmousedown:
鼠标按钮被按下- onmouseup:
鼠标按键 被松开- onmouseover:
鼠标 移到某元素之上- onmouseout:
鼠标 从某元素移开- onmousemove:
鼠标 被移动- 鼠标按下时,通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号
e.button属性:
事件对象中的 button属性可以获取鼠标按键的编号
e.which属性:
也可以获取鼠标的按键编号 0 左键 1滚轮 2右键
- 表单事件:
- onsubmit :
确认 按钮被点击- onreset:
重置 按钮被点击- oninput:
当你往表单中输入内容时就触发
- 加载 与 卸载 事件:
- onload:
一张页面或一幅图像完成加载- onunload:
用户退出页面(仅IE支持,其他浏览器不支持)
- 其他事件:
针对表单
- onchange:
域的内容被改变(比如下拉框)- onselect:
文本被选中
event 的 属性和功能:
属性:
- currentTarget:
获取 绑定了该事件的元素对象- target :
获取 触发了该事件的元素对象- type:
获取 事件类型- keyCode:
当绑定了键盘事件,可以从事件对象中获取按键的键码(ASCII码)- which/button:
当绑定了鼠标事件,可以从事件对象中获取鼠标按键的键码
0 左键 1滚轮 2右键
方法:
e.stopPropagation():
阻止事件冒泡
e.preventDefault():
阻止元素的默认行为
那么,本篇博文的知识点在这里就讲解完毕了。
(请观看本人博文 —— 《Java Script 专栏总集篇》)