dom4

首页 > 代码库 > dom4

2024-09-22 05:32:02 217人阅读

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(){ }

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

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>

(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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > dom4

dom4

看完仍有疑问？有类似问题直接问程序猿