DOM
DOM是什么
DOM(Document Object Model)文档对象模型。
当网页加载时,可以将结构化文档在内存中转换成对象的树。
为什么会有DOM?
DOM是一套对文档的内容进行抽象和概念化的方法。
在现实世界里,正是因为大家对抽象的世界对象模型有着基本的共识,人们才能用非常简单的话表达出复杂的含义并得到对方的理解。
就如具体的例子中,你可以有把握地断定,其他人对“第三”和“左边”的理解和我完全一样。
有了DOM,才便于描述和去操作HTML文档。
DOM图示:
DOM本质:
DOM并不是一种技术,而是一种访问结构化文档的一种思想。
借助DOM模型,我们可以对DOM树进行增删修改等操作,让结构化文档动态化。
掌握了DOM编程模型,就可以用js脚本动态修改HTML页面的能力。
DOM模型中的节点:
DOM模型中的节点——文档可以说是由节点构成的集合。
DOM对HTML元素访问操作:
为了动态地修改HTML元素,须**先访问**HTML元素。
DOM组要提供2种方式:id或tag
实例:通过id修改HTML元素
DOM1.HTML
实例:通过TAG修改HTML元素
DOM2.HTML
DOM访问表单控件的常用属性和方法
在elements返回的数组中访问具体的表单控件语法
实例:DOM3.html
DOM访问列表框、下拉菜单的常用属性:
使用options[index]返回具体选项所对应的常用属性:
实例:DOM4.html
DOM访问表格子元素的常用属性和方法:
通过rows[index]返回表格指定的行所对应的属性:
通过cells[index]返回表格指定的列所对应的属性:
对象:
对象是JavaScript的特性之一,它是一种非常重要的数据类型,是自我包含的数据集合。
常用的内置对象
- Date
- Math
对象的创建
使用object直接创建对象
使用new关键字调用构造器创建对象
- 使用json语法创建对象
BOM(brower object model):
JavaScript是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互,这些对象主要包括
- window
- document
- location
- navigator
- screen
等。
通常称为浏览器对象模型(brower object model)
浏览器结构:
BOM的层次结构:
window对象:
window对象是整个JavaScript脚本运行的顶层对象,它的常用属性如下:
Window对象的常用方法:
window对象的方法和属性可以分成4类:
- 创建新窗口、维护现有窗口的行为:
- 在窗口中创建带分区的文档(窗体和iframe)
- 定时器的创建和控制
- 用来控制浏览器窗口内特定元素的属性,如document、navigator、screen等
实例:BOM1.html
history对象:
实例:
history1.html
history2.html
history3.html
location对象:
screen对象:
navigator对象:
实例:loaction.html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
document.write("hostname:"+location.hostname+"<br/>");
document.write("href:"+location.href+"<br/>");
document.write("host address:"+location.host+"<br/>");
document.write("port:"+location.port+"<br/>");
document.write("protocol:"+location.protocol+"<br/>");
document.write("availHeight:"+screen.availHeight+"<br/>");
document.write("availWidth:"+screen.availWidth+"<br/>");
document.write("colorDepth:"+screen.hostname+"<br/>");
document.write("appCodeName:"+navigator.appCodeName+"<br/>");
document.write("appName:"+navigator.appName+"<br/>");
document.write("appVersion:"+navigator.appVersion+"<br/>");
document.write("platform:"+navigator.platform+"<br/>");
document.write("userAgent:"+navigator.userAgent+"<br/>");
document.write("cookieEnabled:"+navigator.cookieEnabled+"<br/>");
</script>
</head>
<body>
</body>
</html>
事件
事件的概念:
JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript函数的事件,我们可以认为事件是可以被JavaScript侦测到的一种行为。
事件流:
分为两类。
- 冒泡型事件 (IE支持)
- 捕获型事件 (Firefox、chrome均支持)
使用返回值改变HTML元素的默认行为
HTML元素大都包含了自己的默认行为。例如:超链接、提交按钮等。
我们可以通过在绑定事件中加入return false 来阻止它的默认行为。
通用性的事件监听方法:
绑定HTML元素属性:
<input type= "button" value = "clickMe" onclick = "check(this)" />
绑定DOM对象属性
document.getElementById("btn1").onclick = test ;
实例:jianting1.html
IE中的事件监听方法:
标准DOM中的事件监听方法:
实例:jianting2.html
常见的事件监听:
冒泡型事件:shijianliu1.html
捕获型事件:shijianliu2.html
访问事件对象:
事件对象封装了事件发生的详细信息,尤其是鼠标、键盘事件。如果鼠标事件发生的位置、键盘事件的键盘键等。
IE中的事件对象
IE中的事件对象是一个隐式可用的全局对象:event,它是window对象一个属性。
//IE中得到事件对象
op.onclick = function(){
var oEvent = window.event;
}
标准DOM中的事件对象
在标准DOM浏览器检测到发生了某个事件时,将自动创建一个event对象,并隐式地将该对象作为事件处理函数的第一个参数传入。
//标准DOM中得到事件对象
op.onclick = function(oEvent{
//作为参数传进来
}
为了兼容不同的浏览器,通常采用下面的方法得到事件对象
op.onclick = function(oEvent){
if(window.event){oEvent = window.event;}
}
Event事件对象常用属性:
实例:event.html
常见的事件类型:
常用的鼠标事件:
实例:shubiao.html
常用的键盘事件:
实例:jianpan.html