目录
-----前言
之前我们已经介绍一部分DHTML 应用的知识点,详细可见:web快速入门之基础篇-js:3_1、DHTML 应用:DHTML对象_window_document 这篇我们继续介绍它的一些知识点 DHTML 应用:HTML DOM、screen、history、location、navigator、event 对象
-----知识点简介
四:DHTML 应用
4、HTML DOM对象
将html中的每个元素均封装为对象,使用对象,比如 Option、Select、Table、Tr---了解用法
组合对象_第一个常用:Select、Option相关
var obj = document.createElement("option");
obj.innerHTML = "dd";
----封装为
var obj = new Option("aaa");
组合对象_第二个常用:表格相关
var row = table.insertRow(index);
var cell = row.insertCell(index);
cell.innerHTML = "";
table.rows.length
5、screen 对象
提供了属性,以获取屏幕的相关信息
--width/height(只读的)
var n = screen.width;//ok
screen.width = 400;//error
6、history 对象
表示历史访问记录
history.back();
history.forward();
---有效,前提条件是:确实有历史访问记录
7、location 对象
表示地址栏***
location.href = "url";---保留历史记录
location.replace("url");---不会保留
问:多少种从页面 a 去往页面 b 的方式?
a---静态的,写死url
window.open---一定会在新窗口中
history.xxx---历史记录
location.href---留下记录
location.replace()—不需要
8、navigator对象
表示与浏览器软件以及操作系统相关的信息---封装了很多属性
---遍历某个对象的所有属性
for(var r in XXX)
{
//r表示属性的名称
XXX[r]//表示属性的值
}
var r1 = location.href ;
var r2 = location["href"];
9、event 对象
a、事件的类别
鼠标事件
onclick/ondoubleclick
onmouseover/onmouseout
键盘事件
onkeydown
onkeyup
状态事件
onblur
onfocus
onchange
onload
onunload
b、事件的定义
html:onxxx="ff();"---静态的为元素定义事件
code:obj.onxxx = function;---动态的定义
c、事件被取消
onxxxx = "return false;"---取消当前事件
d、事件的冒泡机制
当为层次包含的元素定义了相同的事件,触发事件时,从底层开始,层层向上,逐一触发----当大量相同事件时,为其父元素定义事件,简化代码
e、event对象
当页面发生任何一个事件,将事件相关的信息写入 event 对象
event.x/y
event.srcElement---引发事件的对象
f、浏览器兼容问题
其它浏览器:js和html页面都可以认识event,通过 srcElement 属性得到源对象
firefox:js中不认识 event 对象,html 页面上认识,target属性得到源对象
五:后续知识点
面向对象基础:封装数据,传递给服务器端,JSP