一、DOM
(一)概念
Document Object Model,文档对象模型,通过获取元素的对象,控制元素的属性及内容,是中立与平台和语言的接口。
W3C DOM标准被分为三个部分
1.Core DOM:针对All结构化文档的标准模型
- Node:节点对象( parentElement)
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Test:文本对象
- Comment:注释对象
2.XML DOM:针对XML文档的标准模型
3.HTML DOM:针对HTML文档的标准模型
(二)Core DOM
1.获取Document对象
window.document
document
2.获取Element对象
getElementById():通过ID获取对象
getElementsByName():通过name属性获取对象
getElementsByTagName():通过标签名获取对象
getElementsByClassName():通过类名获取对象
3.创建对象
createElement():创建元素对象
createAttribute():创建属性对象
createTextNode():创建文本对象
createComment():创建注释对象
备注:对象1.appendChild(对象2),可将对象2添加至对象1
4.设置&删除属性
setAttribute():设置属性
removeAttribute():移除属性
备注:可以通过“对象.属性 = “值””方式给属性赋值
5.DOM树
appendChild():增加子节点(尾部)
removeChild():移除子节点
parentNode()/parentElement():返回父节点,后者仅IE支持
.innerHTML:对象包含的内容(标签解析)
.innerText:对象包含的内容(标签不解析)
二、BOM
(一)概念
Browser Object Model,浏览器对象模型,将浏览器的组成部分封装为对象。
- Window:窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史对象
- Location:地址栏对象
(二)常用的BOM
1.Window对象
history对象:获取History对象引用,包含历史URL信息
location对象:包含当前URL信息
alert():弹出提示窗口,包含“确认”
confirm():弹出提示窗口,包含“确认”、“取消”按钮
prompt():弹出提示窗口,包含“输入栏”
open():打开窗口
close():关闭窗口
setInterval():循环计时器
setTimeout():计时器
clearInterval():清除循环计时器,传参为循环计时器对象
clearTimeout():清除计时器,传参为计时器对象
2.Navigator对象
userAgent():返回浏览器相关信息(头部值)
3.Screen 对象(没有方法)
height属性:返回屏幕的高度
width属性:返回屏幕的宽度
4.History 对象
length属性
back():等价于浏览器后退按钮
forward():等价于浏览器前进按钮
go():访问URL列表的某个URL,参数为相对位置
5.Location 对象
href属性:可以设置或返回当前URL
reload():重新加载当前文档
三、事件
某些元素被执行操作后,会触发关联的代码(函数),这个触发过程被称为事件。常见的事件如下
1.点击事件
onclick:单击事件
ondblclick:双击事件
2.焦点事件
onfocus:获得焦点
onblur:失去焦点
注意,切勿将alert()与焦点事件并用,会陷入死循环
3.加载事件
onload:完成加载,通常用于页面或图像加载完成后触发行为
4.鼠标事件
onmousedown:鼠标按下
onmouseup:鼠标松开
onmousemove:鼠标移动
onmouseover:鼠标移入某元素
onmousedown:鼠标移出某元素
5.键盘事件
onkeydown:某个按键按下
onkeyup:某个按键松开
onkeypress:某个按键被点按
6.变更事件
onchange:内容被改变
7.表单事件
onsubmit:表单被提交
四、JavaScript面向对象
创建方法1(json格式):
var 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
方法名:function () {
方法体;
}
}
创建方法2(new方式):
var 对象名 = new Object();
对象名.属性名1 = 属性值1;
对象名.属性名2 = 属性值2;
对象名.方法名 = function () {
方法体;
}
创建方法3(构造方法):
function 对象名(属性名1,属性名2) {
this.属性名1 = 属性值1;
this.属性名2 = 属性值2;
this.方法名 = function () {
方法体;
}
}
var 实例名 = new 对象名(属性值1,属性值2);//实例化
【注意】
- 属性值需要调用函数时,务必在函数后面补上“;”符号,否则无效!
- document.getElementxxx方法时,括弧中的内容需要带上"",否则会作为变量处理!
- 表格(table)的边框由
<table>
的border属性和<td/th>
的border属性共同构成!