038HTML-DOM对象.doc

学习进度
WEB基础

文 档
Document
经典案例
Classic Case
作 业
Homework
经典视频
Classic Video
Top
HTML DOM 对象
DHTML其他对象
事件
面向对象基础
1. HTML DOM 对象
1.1. Table 对象
1.1.1. Table 对象
Table 对象代表一个 HTML 表格，在 HTML 文档中， ws：返回包含表格中所有行的一个数组。
Table 对象的常用方法有：
deleteRow()：从表格删除一行；
insertRow()：在表格中插入一个新行。
1.1.2. TableRow 对象
TableRow 对象代表一个 HTML 表格行，在 HTML 文档中， 用方法有：
insertCell(index)：返回 TableCell 对象；
deleteCell(index)：删除行中的指定的单元格。
1.1.3. TableCell 对象
TableCell 对象代表一个 HTML 表格单元格，在 HTML 文档中，一个 格可横跨的行数。
2. DHTML其他对象
2.1. DHTML 其他对象
2.1.1. DHTML 对象模型回顾
DHTML 对象模型如图－1所示：

图－1
其中，widnow 对象、document 对象已经在前面的课程中学习过，下面将学习其他对象。
2.1.2. screen 对象
每个 Window 对象的 screen 属性都引用一个 Screen 对象，该对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。
screen 对象的常用属性有：
width：返回显示器屏幕的宽度；
height：返回显示屏幕的高度；
availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)；
availHeight：返回显示屏幕的高度 (除 Windows 任务栏之外)。
2.1.3. history 对象
history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。history 对象包含用户（在浏览器窗口中）访问过的 URL
history 对象的常用属性为 length属性，标识浏览器历史列表中的 URL 数量，其常用方法有：
back()：加载 history 列表中的前一个 URL;
forward()：加载 history 列表中的下一个 URL;
go(num)：加载 history 列表中的某个具体页面。
2.1.4. location 对象
Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。
除了设置 location.href 用完整的 URL 替换当前的 URL 之外，Location 对象的 reload() 方法可以重新装载当前文档；而replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。
2.1.5. navigator 对象
Navigator 对象包含的属性描述了正在使用的浏览器，可以使用这些属性进行平台专用的配置。Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。
Navigator 对象包含有关浏览器的信息，提供了各种属性以读取浏览器的信息，且因为浏览器的不同，属性也不尽相同。可以使用如下代码来遍历 navigator 对象的属性及值：
copytextpop-up
var showText = "Navigator对象属性列表：\n";
for (var propname in navigator)
{
showText += propname + ": " +
navigator[propname] + "\n";
}
alert(showText);

var showText = "Navigator对象属性列表：\n";
for (var propname in navigator)
{
showText += propname + ": " +
navigator[propname] + "\n";
}
alert(showText);
3. 事件
3.1. 事件概述
3.1.1. 事件概述
事件指 DHTML 对象在状态改变、操作鼠标或键盘时触发的动作。
事件分为三类：
鼠标事件：如 onclick、ondblclick、onmousevoer、onmouseout等；
键盘事件：如 onkeydown、onkeyup等；
状态改变事件：如 onblur、onfocus、onload、onchange 等。
事件触发后将会产生一个 event 对象，该对象用于记载事件相关的所有信息，如引发事件的节点对象、位置等信息。
3.1.2. 事件句柄
通过一个事件句柄，可以在某个事件发生时对某个元素进行某种操作，可用的事件句柄如图－2所示：

图－2
3.2. 事件处理
3.2.1. 事件定义
如果需要 HTML 元素能够响应某种动作，则需要为其相应的事件句柄定义 js 代码。这样，当事件发生时，将直接调用所定义的 js 代码。
为元素定义事件时，最常用的方式是，在 html 属性定义中直接处理事件，代码如下所示：
copytextpop-up

其中，method 为js 代码中所定义的方法。
另外，也可以在 js 代码中为元素动态的定义事件，常用于动态创建页面元素时。代码如下所示：
copytextpop-up
//btnObj 为一个按钮对象
btnObj.onclick = method;
//或
btnObj.onclick = function(){
alert(“hello”);
};
//btnObj 为一个按钮对象
btnObj.onclick = method;
//或
btnObj.onclick = function(){
alert(“hello”);
};
其中，method 为已经存在的一个方法。
如果希望取消某事件，则只需要将 false 返回给事件句柄即可，代码如下所示：
copytextpop-up
<元素 onXXX = “return false；”/>
<元素 onXXX = “return false；”/>
3.2.2. 事件的处理机制
当处于DHTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理，这种处理方式，我们称为冒泡处理机制。
查看如下代码：
copytextpop-up

ptext

ptext
nput type="button" value="button1"
onclick="alert('button');" />
生时的鼠标位置、键盘按键状态和触发对象等信息。该对象的常用属性有：clientX、clientY、cancelBubble 等。
3.3.2. 获取 event 对象
如果希望通过 event 对象获取事件的详细信息，首先需要获取 event 对象。在js代码中，获取 event 对象需要考虑浏览器兼容问题。
在IE、Chrome、Opera 这几种浏览器中，可以在 html 代码中直接使用 event 关键字获取 event 对象，代码如下所示：
copytextpop-up
onclick=“func();”>div text event.clientY);
}
而在 firefox 浏览器中，可以在 html 代码中直接使用 event 关键字获取 event 对象，但是如果在 js 代码中，使用 event 关键字，则会发生异常。因为，对于 firefox 浏览器而言，它不认可在 js 中使用 event 关键字。
因此，为解决各浏览器的兼容问题，可以在 HTML 代码中，在事件句柄定义时，使用 event 关键字将事件对象作为参数传入方法，代码如下所示：
copytextpop-up
func(event);”>div text
在IE、Chrome、Opera 这几种浏览器中，可以使用event.srcElement来获取；而在Firefox 浏览器中，需要使用event.target来获取。
因此，可以使用如下代码来兼顾各种浏览器：
copytextpop-up
//考虑浏览器兼容问题
function func(e) {
var obj = e.srcElement || e.target;
alert(obj.nodeName); //DIV
}
//考虑浏览器兼容问题
function func(e) {
var obj = e.srcElement e.target;
alert(obj.nodeName); //DIV
}
4. 面向对象基础
4.1. 对象概述
4.1.1. 对象概述
对象是一种特殊的数据类型，由属性和方法封装而成。其中，属性指与对象有关的值，调用方式为：对象名.属性名；方法指对象可以执行的行为或可以完成的功能，调用方式为：对象名.方法名()。
js 代码中，定义对象有三种方式：
创建对象的实例
创建对象的模板
使用 JSON
4.2. 创建对象
4.2.1. 创建通用对象
可以使用 Object 对象创建通用的对象，代码如下所示：
copytextpop-up
function TestObject(){
var personObj = new Object();
//添加属性
personObj.name = "John";
personObj.age = 50;
//添加方法
personObj.say =
new Function(“alert(‘hello!’);”);
//测试
personObj.say(); //hello!
alert(personObj.age); //50
}

function TestObject(){
var personObj = new Object();
//添加属性
personObj.name = "John";
personObj.age = 50;
//添加方法
personObj.say =
new Function(“alert(‘hello!’);”);
//测试
personObj.say(); //hello!
alert(personObj.age); //50
}
4.2.2. 创建对象的模板
可以定义构造函数，以创建自定义的对象，语法为：
copytextpop-up
function ObjName(参数1,参数2,…){}
function ObjName(参数1,参数2,…){}
查看如下代码：
copytextpop-up
function Person (n,a){
//定义 name 和 age 属性
this.name = n;
this.age = a;
//定义方法 showName
this.showName = function(){
alert(“My Name is ” + this.name);
};
//定义方法 introduceSelf
this.introduceSelf = introFunc();
}
function introFunc() {
alert(this.name + “:” + this.age);
}
function Person (n,a){
//定义 name 和 age 属性
this.name = n;
this.age = a;
//定义方法 showName
this.showName = function(){
alert(“My Name is ” + this.name);
};
//定义方法 introduceSelf
this.introduceSelf = introFunc();
}
function introFunc() {
alert(this.name + “:” + this.age);
}
上述代码，创建了名为 Person 的自定义对象的模板，并为其定义了属性和方法。可以基于此模板创建多个对象。代码如下所示：
copytextpop-up
//测试对象
function test(){
var o1 = new Person(“mary”,18);
alert(o1.age);
o1.showName();
o1.introduceSelf();
var o2 = new Person(“john”,20);
alert(o2.age);
o2.showName();
o2.introduceSelf();
}
//测试对象
function test(){
var o1 = new Person(“mary”,18);
alert(o1.age);
o1.showName();
o1.introduceSelf();
var o2 = new Person(“john”,20);
alert(o2.age);
o2.showName();
o2.introduceSelf();
}
4.2.3. JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它使用名 / 值对的方式定义对象。其中：
名称需要使用 “” 引起来
多对定义之间使用 ， 隔开
名称可以是属性
字符串类型的属性值，需要使用“”引起来
代码如下所示：
copytextpop-up
var obj = {
“name" : “jerry",
“age" : 29
} ;
//测试对象
alert(obj.name);
var obj = {
“name" : “jerry",
“age" : 29
} ;
//测试对象
alert(obj.name);
Top
WebBasic JavaScript Unit04
数据表格的操作
使用 location 对象
遍历 navigator 对象的属性
事件的冒泡处理机制
获取 event 对象的数据
简单计算器
使用 Object
自定义对象
使用 JSON
1 数据表格的操作
1.1 问题
界面上有数据表格，用于显示产品的名称和价格信息，并可以添加新产品，或者删除某条产品数据。页面效果如图－1所示：

图－1
图－1所示的界面上显示出已有的产品数据，如果在界面的文本框中录入新的名称和价格，并单击“增加”按钮，则将录入的数据加入表格，作为新行加入表格最后一行。页面效果如图－2所示：

图－2
单击表格中某行里的“删除”按钮，首先提示是否删除，页面效果如图－3所示：

图－3
如果用户选择“取消”，则放弃当前的删除操作；如果用户选择“确定”，则删除该行数据，界面效果如图－4所示：

图－4
1.2 方案
分析此案例可以看出，在“增加”按钮的单击事件中，需要通过 js 代码动态的为表格创建新行，并设置行中的内容。
其中，第三列中的按钮需要设置 onclick 事件，并使用 this 关键字将当前按钮节点对象传入，便于通过按钮节点找到当前的行节点，从而获取行中的信息，以及删除当前行。
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建页面
创建文件 js_demo4.html，并在 html 页面上添加代码以创建一个标准结构的 HTML 文档，并在文档中创建表单。html 代码如下所示：
copytextpop-up
xhtml1-transitional.dtd">

Javascript Day04

al//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Javascript Day04

>

步骤二：创建 js 文件和 css 文件
此案例中需要用到 CSS 样式和JavaScript 代码，因此，首先创建文件 js_demo4.js，用于书写 JavaScript 代码；然后创建文件 myStyle.css，用于书写 CSS 样式代码。并在上一步所创建的 HTML 文档中引入脚本文件和样式文件。修改后的html 代码如下所示：
copytextpop-up
xhtml1/DTD/xhtml1-transitional.dtd">

Javascript Day04

g/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Javascript Day04

"myStyle.css" type="text/css" rel="Stylesheet" />

>产品价格
html xmlns="http://www.w3.org/1999/xhtml">

Javascript Day04

ue="增加" />
#cold_bold
#cold_bold r>
#cold_bold r>
#cold_bold ddd;
}
td
{
border:1px solid gray;
width:100px;
height:30px;
text-align:center;
}
/*表格*/
table
{
border-collapse:collapse;
}
tr.header td
{
height:35px;
font-weight:bold;
background-color:#ddd;
}
td
{
border:1px solid gray;
width:100px;
height:30px;
text-align:center;
}
步骤五：为按钮定义 onclick 事件
修改 html 代码，首先为“增加”按钮定义onclick 事件，然后为“删除”按钮也定义 onclick 事件。
在“删除”按钮的onclick 事件中，需要使用 this 关键字传入当前对象。修改后的 html 代码如下所示：
copytextpop-up
ansitional.dtd">

Javascript Day04

关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2026 宁波自信网络信息技术有限公司  版权所有客服电话：[phone]  投诉电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：