JavaScript之DOM笔记

原创 2012年03月28日 23:07:26
DOM:(Document Object Model)文档对象模型
DHTML:CSS、脚步编程语言和DOM三种技术的单一称谓叫DHTML(Dynamic HTML,动态HTML)


DOM对象的层次关系
window
location
frames
history
navigator
event
document
links
anchors
images
filters
forms
applets
embeds
plugIns
frames
scripts
all
selection
styleSheets
body




禁止使用鼠标右键的方法
<html>
<head>
<script>
<!--
function hideContextmenu(){
window.event.returnValue=false;
}
//-->
</script>
</head>
<body oncontextmenu="hideContextmenu()">
</body>
</html>




怎样排除JavaScript中的程序错误?
1、分段加入alert语句,确定错误的范围
2、单击浏览器状态栏的警告,查看提示信息


如果要想取消页面的事件,可以通过return false来设定,如:
<a href="http://www.baidu.com/" onclick="return false">百度</a>
执行的结果为:当你点击百度时,页面将不会打开百度的主页


第二种事件处理:
让事件属性值等于处理改时间的函数名或程序代码,如:
<script>
document.oncontextmenu=hideContextmenu;
function hideContextmenu(){
return false;
}
</script>


第三种事件处理
在一个专门的<script>标签对中编写某个元素对象的某种事件处理程序代码,并用for属性指定事件源和用event属性指定事件名。如:
<script for="document" event="oncontextmenu">
window.event.returnValue=false;
</script>


window对象代表浏览器的整个窗口,可以利用此对象控制浏览器窗口的各个方面,如改变状态栏上的显示文字、弹出对话框等


navigate方法:通过指定URL,浏览器可以自动在一个网页中导航到该页面


setInterval方法:设置每隔多少时间去执行此方法中的参数内容,该方法可以多次执行它的内容


setTimeout方法:设置隔多少时间去执行此方法中的参数内容,此方法与上面那个方法的区别在于,此方法只执行一次。


clearInterval方法:取消setInterval方法中所要执行的参数内容,此方法的参数值为setInterval所要执行的内容的返回值


clearTimeout方法:功能与上面的方法相似


moveTo方法:将浏览器窗口移动到屏幕上的某个位置,即改变顶点的坐标位置


resizeTo方法:改变浏览器窗口的大小


open方法:可以产生一个全屏幕的窗口


showModelessDialog方法:产生非模态对话框窗口,与模块窗口的区别在于它不需要关闭窗口就可以操作其他的窗口


resizeBy方法:改变窗口大小


window属性:
opener属性:打开当前窗口的那个window对象,即父窗口对象
defaultstatus属性:设置状态栏的默认值
status属性:状态栏的值
screenTop属性:左上角顶点在屏幕的垂直位置
screenLeft属性:左上角顶点在屏幕的水平位置


onunload事件:当页面被卸载的时候调用


属性实例:
使状态栏上的内容左右移动(思路:通过空格的增加实现效果):
<html>
<script>
var space_num=0;
var dir=1;
setInterval("scroll()",100);
function scroll(){
var str_space="";
space_num=space_num+1*dir;
if(space_num>40 || space_num<=0){
dir=-1*dir;
}
for(var i=0;i<space_num;i++){
str_space+=" ";
}
window.status=str_space+"www.baidu.com";
}
</script>
<body onload='setInterval("scroll()",100)'>
</body>
</html>


}


window事件:
onbeforeunload事件,此事件会弹出一个确认对话框,如:
onbeforeunload="window.event.returnValue='请小心'"


比较onload事件中的代码与直接嵌套在<script>中的代码的先后顺序:
嵌套在<script>中的代码按从上往下的顺序,onload事件在页面加载完毕之后执行




window对象——对象属性
location对象:设置和返回当前显示的网页文档的URL信息
location.href="http://www.baidu.com"等效于
navigate("http://www.baidu.com")
此对象的replace方法也可用于载入一个新的网页
此对象的reload方法用于重新载入(刷新)当前网页


event对象:获取和设置当前事件所发生的有关信息
altKey属性:检测alt键是否被按下
ctrlKey属性:检测ctrl键
shiftKey属性:检测shift键
clientX、clientY:返回可用区域鼠标X、Y坐标
screenX、screenY:鼠标相对屏幕顶点的坐标
offsetX、offsetY:鼠标相对事件源按钮的顶点的XY坐标
x、y:鼠标相对事件源的父元素的坐标
returnValue:事件返回值
cancelBubble:当前事件是否继续向下传递
srcElement:当前事件的事件源对象
keyCode:键盘按下与弹起的键盘unicode码值
实例:
按下ESC键关闭窗口:
<script>
function window_onkeypress(){
if(window.event.keycode==27){
window.close();
}
}
</script>
<body onkeypress="window_onkeypress()">
</body>
button属性:检索鼠标移动、按下、弹起时是哪个按键(1、左键;2、右键;3、左右同按)


实例2:
<script>
function checkCancel(){
if(window.event.shiftKey){
window.event.cancelBubble=true;
}
}
function showSrc(){
//注意默认的标签值为大写
if(window.event.srcElement.tagName=="IMG"){
alert(window.event.srcElement.src);
}
}
</script>
<body onclick="showSrc()">
<img onclick="checkCancel()" src="sample.gif">
</body>




frames数组对象:表示某个窗口当中所有子窗口的集合
是一个数组,它与window对象的parent、top等对象属性都是用于对HTML的帧标签进行编程
对象的属性可以用中括号引用,如:
parent.frames[1].location.reload()与
parent.frames.bottom.location.reload()与
parent.frames['bottom'].location.reload的效果都是一样的。
对象像frames这种集合对象,都有item方法,如:
parent.frames.tem(1).location.reload()与
parent.frames.item('bottom').location.reload()和上面的三种情况都是一样的
对于每个帧窗口的名称也可以作为父窗口的属性来引用,如:
parent.bottom.location.reload()或
parent['bottom'].location.reload()
top属性,最顶层窗口的对象,也就是整个窗口的对象






screen对象:显示器的分辨率和色彩度等信息
clipboardData对象:提供读写剪贴板内容的方法
history对象:提供浏览器曾经访问过的URL
navigator对象:获取浏览器的名称、版本号,操作系统,CPU等信息


document对象,代表整个网页文档
方法:
write:向页面动态写入内容
writeln:同上,然后多个换行符
open:打开一个新的文档,与window的open方法相似
close:关闭文档流
clear:清楚文档中的所有内容,现在不适用,可用以下两句代替:
document.write("");document.close();
createElement:创建元素
属性:
charset属性:当前编码字符集
fileCreatedDate:网页文档创建时间
fileModifiedDate:网页文档修改时间
fileSize:网页文档大小
referrer属性,例如:
a.html:<a href="b.html">
b.html:<script>document.referrer</script>
通过上面两句,在a和b两个页面当中进行互相跳转
对象属性:
anchors数组:存储标签a的ID与NAME
links数组:存储标签a的href
script数组:存储script标签
styleSheets数组:存储style属性
all数组:所有标签集合
images数组:存储img标签
获取数组的对象:
var objImg = document.images.item("imgs");
该句不能写成document.images["sample"],这样的话只能获取最后一个对象。但是,可以按照如下的格式进行书写:
document.images["imgs",0]或者document.images.item("imgs",0)




文档加密:
第一种方法:
unescape和escape
第二种方法:
使用微软的Script Encoder软件:
它只加密页面中嵌入的脚本代码,其他部分,如HTML的TAG仍然保持原样不变,此工具也可以通过AcriveX在网页中进行调用。创建此对象的方法为:enc=new AcriveXObject(Scription.Encoder);
第三种方法:
使用JSP程序动态产生的JavaScript脚本文件来隐藏网页文档内容


<script>标签的属性
defer属性:此属性不用赋值,此属性表示处理完页面代码之后再执行此标签中的代码,这样可以提高网页加载的性能


language属性:指定脚步的语言类型


type属性:代替language属性,W3C标准
指定默认的脚步语言类型:<meta http-equiv="Content-Script-Type" content="text/javascript">


src属性:
实例
1、web服务器借助<img>标签收集其他web站点的页面访问次数
2、将其他页面的jsp地址嵌入到<script>的src属性中来实现IP地址的查找

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015年12月14日 21:12
  • 3227

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 307

[学习笔记]JavaScript之DOM基础

DOM概述 DOM定义 DOM(文档对象模型,Document Object Model)是W3C组织开发的一套便于操作XML和HTML的JavaScript方法,其将XML和HTML抽象成文...
  • jacobvv
  • jacobvv
  • 2015年01月18日 22:20
  • 1301

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 766

读《JavaScript dom编程艺术(第2版)》笔记 9-10

style属性是一个对象,只能返回内嵌样式。 当需要引用一个中间带减号的css属性时,DOM要求用驼峰命名法,即CSS属性font-family变为DOM属性fontFamliy:  element...
  • lloyvhe
  • lloyvhe
  • 2015年06月12日 10:46
  • 421

什么是DOM?DOM和JavaScript的关系[web开发]

什么是DOM? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们...
  • hqf2009
  • hqf2009
  • 2015年12月18日 16:11
  • 1462

智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级

表格应用1. 获取tBodies、tHead、tFoot、rows、cells 注意: 一个表格可以有多个tbody (所以tBodies是复数,是一个数组),但是只能有一个thead,一个tfoo...
  • namei33
  • namei33
  • 2015年06月03日 03:45
  • 765

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014年08月11日 22:38
  • 1233

javascript dom编程艺术阅读笔记

第二章 1.程序设计语言分为:解释型和编译型两大类;java或C++等语言需要一个编译器,将源代码翻译为直接在计算机上执行的二进制可执行文件的程序,属于编译型 javascript语言不需要编译器,只...
  • hexon804
  • hexon804
  • 2016年02月16日 18:10
  • 909

《JavaScript DOM编程艺术》学习

JavaScript编程原则和使用习惯  在使用JavaScript之前需思考: 为这个网页增加这种额外的行为是否 确有必要“用户至上” , 这样做会对用户的浏览器产生怎样的影响?浏览器支持Jav...
  • qq_26437925
  • qq_26437925
  • 2016年02月01日 20:10
  • 1070
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript之DOM笔记
举报原因:
原因补充:

(最多只允许输入30个字)