dom4

Posted 2020-09-18 钱钱钱啊

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="新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=e.srcElement||e.target
2. ***取消/利用冒泡:
取消：DOM标准：e.stopPropagation()
IE8：e.cancelBubble=true;
一般用在当前事件处理函数执行结尾
***优化：如果多个子元素中定义了相同的事件处理函数
其实，只需要在共同的父元素上定义一次即可！
3. *取消事件：
if(e.preventDefault){
e.preventDefault(); //--DOM
}else{
e.returnValue=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 = event.srcElement || event.target;

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

 

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

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

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

IE: event.returnValue = false;

DOM:  event.preventDefault( );

保证兼容性的写法：

if( event.preventDefault ){

event.preventDefault(  ); //DOM

}else{

event.returnValue = 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 = ‘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="110">北京</option>

特别的属性：

index：

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

value：

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

练习：有如下的数据：

var data = [

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

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

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

];

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

 

 

四个阶段的重点

(1)JS

(2)DOM操作

(3)jQuery

(4)AJAX

 

 

 

 

 

 

 

 

挑战性作业：

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

(2)无限级联下拉菜单