本文共 1560 字，大约阅读时间需要 5 分钟。

目录

-----前言

之前我们已经介绍一部分DHTML 应用的知识点，详细可见： 这篇我们继续介绍它的一些知识点 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

转载地址：https://blog.csdn.net/YuDBL/article/details/104357178 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！