首页 > 代码库 > dom4

dom4


1. window常用子对象:
history: window对象中保存当前窗体访问过的url的历史记录栈
history.go(1): 前进1次
go(-1): 后退1次
go(0): 刷新当前页
go(n): 前进/后退n次

location:当前窗口正在打开的url地址对象
location.search:获得url中的查询字符串
如果进一步获得参数名和参数值?
先按&分隔,再按=分隔
location.replace("新url"): 在当前窗口打开新链接
不可后退
(history中旧url被新url替换了)

使用location在当前窗口打开新链接,可后退:2种:
location.href="http://www.mamicode.com/新url";
location.assign("新url");

刷新:location.reload();

screen: 封装当前屏幕的显示信息
screen.height/width: 完成屏幕宽高
availHeight/Width: 去掉任务栏后的剩余宽高
window7下任务栏透明

2. ***事件:
浏览器自动触发的或用户手动触发的对象状态的改变
DOM Level2 Event标准
IE8:自成体系!
事件处理函数:当事件触发时,自动执行的函数
比如:<button onclick="函数/js语句"></button>
//btn.onclick();

事件处理:
1. 事件定义(绑定事件处理函数):3种
html: <标签 on事件名="fun()">
d1.onclick=function(){
eval("fun()");
//[window.]fun();
}
强调:fun()中this-->window
如果获得当前目标元素对象:
html: onxxx="fun(this)"
js中定义函数时:fun(elem)


js: elem.on事件名=函数对象;
一个元素的一个事件处理函数,只能绑定一个函数对象
DOM标准:elem.addEventListener(
"事件名",函数对象,是否在捕获阶段触发)
true/false
一个元素的一个事件处理函数,可add多个不同函数对象IE8: elem.attachEvent("on事件名",函数对象)
实际执行的:elem.on事件名(); this-->elem
2. ***事件周期:从浏览器捕获到事件后,一直到最后一个事件触发完,经历的过程。
DOM标准:3个阶段:
1. (由外向内)捕获:从最外层html元素开始,向内逐层记录每层元素绑定的事件处理函数。到目标元素为止
2. 目标触发:自动执行目标元素上绑定的事件处理函数
3. (由内向外)事件冒泡:从目标元素的父元素开始,逐层向上执行每层的事件处理函数,到最外层html结束。
IE8的事件周期:2个阶段:没有捕获

3. event对象:
当事件发生时,自动创建,封装了事件信息
比如:keyCode
screenX/Y
获得event对象:
html: onclick="fun(event)"
实际调用时: event会自动获得当前事件对象
fun(e){
e中获得的就是事件对象
}

js:elem.onxxxx=fun;
fun(){
//DOM标准:自动创建event对象,默认以第一个参数传入!
//IE8:window全局的event属性,
当事件发生时,也会自动创建event对象,
但会保存在window.event中
}
event对象中包含:
1. 目标元素对象:var src=http://www.mamicode.com/e.srcElement||e.target
2. ***取消/利用冒泡:
取消:DOM标准:e.stopPropagation()
IE8:e.cancelBubble=true;
一般用在当前事件处理函数执行结尾
***优化:如果多个子元素中定义了相同的事件处理函数
其实,只需要在共同的父元素上定义一次即可!
3. *取消事件:
if(e.preventDefault){
e.preventDefault(); //--DOM
}else{
e.returnValue=http://www.mamicode.com/false; //--IE8
}
何时取消:比如:表单提交前,如果验证未通过,
则取消之后的自动提交

事件坐标:3种坐标系
1. 相对于显示器:
最大值: screen.availHeight/availWidth
鼠标位置: e.screenX/Y
2. 相对于文档显示区
最大值:window.innerHeight/Width
鼠标位置:e.clientX/x; e.clientY/y
3. 相对于父元素左上角
最大值:父元素的宽和高
鼠标位置:e.offsetX/Y

页面滚动

 

1.(继续)事件对象的生命周期

  第一阶段:捕获,event对象由父元素向下传递

  第二阶段:目标,event对象在事件源对象上触发

  第三阶段:冒泡,event对象由子元素向上传递

注意:(1)IE事件模型没有捕获阶段,element.attachEvent( ‘onxxx‘, fn )也没有第三个参数。

  (2)element.onxxx = fn  绑定的事件处理函数都是在“冒泡阶段”触发的。

  (3)DOM事件模型中有完整的三个阶段,使用第三个参数useCapture(boolean)来指定“是否绑定在捕获阶段”

element.addEventListener(‘xx‘, fn, false) —— 事件监听函数绑定在冒泡阶段

element.addEventListener(‘xx‘, fn, true) —— 事件监听函数绑定在捕获阶段

 

 

 

思考:DOM事件模型为什么添加一个捕获阶段??

 

2.如何获取event对象?

  IE:   HTML/JS中,可以直接使用event对象,把event看做是window.event属性。

  FF:   HTML中可以使用使用event对象,但JS中不能直接使用该对象。

  兼容性问题解决方法:

  绑定监听函数的方式1:

    HTML:   <a   onclick="f1( event )">

    JS:   function f1( e ){  console.log(e);   }

  绑定监听函数的方式2/3:

    JS:  element.onclick = function( event ){

 console.log( event );

          }

事件对象的常用属性和方法:

  (1)获取事件的源头对象

IE:  event.srcElement

FF:  event.target

兼容性解决方案:  var src = http://www.mamicode.com/event.srcElement || event.target;

练习:创建一个计算器应用,监听函数对象尽可能少

 

  (2)阻止事件的默认行为

事件的默认行为:一个事件触发后,默认要执行的动作。如submit按钮被单击,默认就要提交表单;网页中单击上下左右键,默认就要让内容发生滚动;输入框中击键后默认就会把键盘字符显示在输入框中.......

有些应用中,需要阻止事件的默认行为!

IE: event.returnValue = http://www.mamicode.com/false;

DOM:  event.preventDefault( );

保证兼容性的写法:

if( event.preventDefault ){

event.preventDefault(  ); //DOM

}else{

event.returnValue = http://www.mamicode.com/false; //IE

}

  (3)停止事件的继续传播

IE:  event.cancelBubble = true; //取消冒泡

DOM:  event.stopPropagation( ); //停止传递/传播

考虑兼容性的写法:

if( event.stopPropagation ){

event.stopPropagation();

}else{

event.cancelBubble = true;

}

  (4)获取事件的发生坐标

 

 

BOM: 七个对象,操作浏览器本身

DOM: N个对象,操作文档内容,分为三部分:

(1)核心DOM:用于操作任意的ML文档

(2)HTML DOM:用于操作HTML文档

(3)XML DOM:用于操作XML文档

 

4.HTML DOM

  面试题:核心DOM和HTML DOM的关系

 核心DOM只定义几种不同Node对象:属性Node、文本Node、元素Node,但没有定义元素Node又可以细分为哪些;

 HTML DOM定义了100种左右的元素Node——每个HTML标签都对应一个对象,且这些对象预定义了若干的属性,如:

var img = new Image( );

img.src = http://www.mamicode.com/‘1.jpg‘;

img.title = ‘‘;

img.width = ‘‘;

img.alt = ‘‘;

img.onclick = function(){   }

<img src="" width="" height="" title="" onclick="">

练习:使用HTML DOM属性访问方式来获取和修改下述超链接的所有属性值

<a class="title" href="javascript:void(0)" target="_blank" onclick="open()">标题1</a>

 

5.常用的HTML DOM对象

 (1)Image对象    <=>     <img>

 (2)Table对象     <=>     <table border="" width="">

特别的属性:  rows    类数组型属性

特别的方法:  

insertRow( )   为表格对象添加一个tr子对象

              deleteRow( )  从表格对象中删除一个tr子对象

 (3)TableRow对象 <=> <tr>

特别的属性:  

rowIndex : number,返回当前tr在table中序号

cells:类数组对象,返回当前tr中所有的td集合

特别的方法:

insertCell( ) tr中的插入一个新的td

deleteCell( ) tr中删除一个td元素

  (4)TableCell对象     <=>     <td>

  (5)Form对象   <=> <form action="" method="" enctype="">

特殊的方法:

submit( ) 提交表单中的内容

reset( ) 重置表单中的内容

<form id="form1" action="user.php">

    <input ...>

    <input type="button"    onclick="if(...){ form1.submit( );}" >

    <input type="button"    onclick="form1.reset( );" >

</form>

  (6)表单中的输入域对象:  Text  Password   Checkbox....

常用的属性:

name

value

常用的方法:

focus( ) 申请获取输入焦点

select( ) 选中输入框中的所有文本

  (7)Select对象 <=> <select multiple="true" size="3">

特别的属性:

multiple: boolean,是否允许多选,注意!与HTML中的类型不同!!!!

size:  number,显示出来的选项的数量

value:string,当前选中的option的值

selectedIndex:number,当前选中的option的下标

options:类数组对象,包含所有的option

特别的方法:

add(option) 添加一个新option

remove(index) 删除一个option

  (8)Option对象 <=> <option value="">

创建新的Option:   new Option(txt,  value)

new Option(‘北京‘, ‘110‘);  <=> <option value="http://www.mamicode.com/110">北京</option>

特别的属性:

index:

text: 开始标签和结束标签之间的文本

value:

selected:boolean     读取/设置当前option是否被选中

练习:有如下的数据:

var data = http://www.mamicode.com/[

{id: 110,  pname: ‘北京市‘},

{id: 210,  pname: ‘天津市‘},

{id: 310,  pname: ‘上海市‘}

];

把上述数据盛放到一个select中,并让最后一个选项默认选中

 

 

四个阶段的重点

(1)JS

(2)DOM操作

(3)jQuery

(4)AJAX

 

 

 

 

 

 

 

 

挑战性作业:

(1)完成计算器的加减乘除功能。

(2)无限级联下拉菜单

 

dom4