Heim >Web-Frontend >js-Tutorial >Javascript_7_DOM_Overview
Javascript_7_DOM_Overview
- 黄舟Original
- 2017-01-18 16:31:461219Durchsuche
Javascript_7_DOM_Overview
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DOM演示1_文档对象模型_概述</title>
</head>
<body>
<h1>DOM演示1_文档对象模型_概述</h1>
<script type="text/javascript" src="a.js"> </script>
<script type="text/javascript">
/*
* DOM演示1_文档对象模型
* Document object model
* 将标记型文档(如html、xml)封闭成对象
* 包括里面的标签、属性、属性值、标签中的数据等！
* 将标记型文档按标签层次关系，形成树状结构，即DOM树
* 标签、文本、属性都是结点（又称对象）
* 标签常称为元素！
* 目的是为了更好的操作它们
* DOM解析方式：
* 优点：可以对树中任意的结点进行增删改查
* 缺点：必须将整个文档加载进内存！
* 如果文档体积大，会浪费内存，甚至溢出！
* 标记型文档：民间还有另种解析方式：SAX解析
* SAX解析是事件驱动，标签开始标签结束事件
* 虽然不是w3c标准，但是获取数据速度快！
* 缺点：不能对数据增删改，只能查
* DOM模型有3种：
* DOM LEVEL 1:将html封装成对象
* DOM LEVEL 2:新增解析名称空间(如同Java中的包)
* DOM LEVEL 1:将xml封装成对象
* Java内置解析：dom4j,jaxp(这些以后javaweb会学到)
* DHTML概述：不是一门语言，而是多项技术结合
* 包括：html css javascript
* 角色分配：
* html:用标签对数据进行封装
* css:对标签中的数据定义样式
* javascript:对对象进行逻辑操作！
* 其实DHTML+XMLhttpRequest=AJAX
* BOM模型：brower object model
* 浏览器对象模型！其实就是window对象！
*/
</script>
<script type="text/javascript">
//演示窗口事件
onload=function(){
//alert("window onload");
window.status="加载完毕喽~"
//此事件可弹出广告！
open("ad.html","_blank","height=300,width=100,status=no,toolbar=no,menubar=no,location=no");
}
onbeforeunload=function(){
alert("window onbeforeunload");//窗口消失前（未消失）
}
onunload=function(){
alert("window onunload");//窗口已消失
}
</script>
<input type="button" value="Window_Demo" onclick="Window_Demo_2()"/>
<script type="text/javascript">
//setTimeout("close()",2000);
//2秒后自动关闭，只在新开窗口有效，如果是当前页面会提示是否关闭
function Window_Demo_2(){
//打开open广告
open("ad.html","_blank","height=300,width=100,status=no,toolbar=no,menubar=no,location=no");
}
//放到外面，即script标签之中，页面一加载，就直接弹出来了
//open("","_blank","height=300,width=100,status=yes,toolbar=yes,menubar=yes,location=yes");
</script>
<input type="button" value="Window_Demo" onclick="Window_Demo_2()"/>
<script type="text/javascript">
function Window_Demo_1(){
for (var i=0; i < 10; i++) {
//moveBy(10,10);//每次移动10（左边和顶边）
//moveTo(500,400);//移动到指定坐标位置
}
for (var i=0; i < 10; i++) {
//仿抖动
moveBy(10,0);
moveBy(0,10);
moveBy(-10,0);
moveBy(0,-10);
}
}
</script>
<input type="button" value="Window_Demo" onclick="Window_Demo_1()"/>
<script type="text/javascript">
function Window_stop(){
clearInterval(iIntervalID);
}
</script>
<input type="button" value="Window_stop" onclick="Window_stop()"/>
<script type="text/javascript">
function Window_onfirm(){
setTimeout("alert('hei hei !')",2000);
iIntervalID=setInterval("alert('again !')",2000);//这里面不能使用var，应该全局变量
window.alert("hello world");
alert("hello world");
var bRetrun=confirm("消息...");
alert("bRetrun="+bRetrun);//true and false
}
</script>
<input type="button" value="Window_onfirm" onclick="Window_onfirm()"/>
<script type="text/javascript">
function locationDemo_1(){
alert(location.protocol);//返回 file:
alert(location.href);
//返回 file:///E:/javase/html/DOM_demo_1.html
//下面给href赋值
location.href="http://www.baidu.com";
//触发后会自动跳转！
}
</script>
<input type="button" value="locationDemo_1" onclick="locationDemo_1()"/>
<input type="button" value="演示1_点击我" onclick="alert('响应点击事件！')"/>
<input type="button" value="演示2_点击我" onclick="windowDemo_1()"/>
<input type="button" value="演示3_前进" onclick="windowDemo_forward_2()"/>
<input type="button" value="演示4_后退" onclick="windowDemo_back_3()"/>
<input type="button" value="演示5_go" onclick="windowDemo_go_4()"/>
<a href="http://www.baidu.com">baidu.com</a>
如果JS代码是给某个组件使用的，放在它周围就OK了
如果JS代码是给整个页面使用的，放在HEAD里面，因为先加载！
<script type="text/javascript">
function windowDemo_go_4(){
//window.history.go(-1);//相当于back();
//window.history.go(1);//相当于forward();
window.history.go(1);
}
</script>
<script type="text/javascript">
function windowDemo_back_3(){
window.history.back();
}
</script>
<script type="text/javascript">
function windowDemo_forward_2(){
window.history.forward();
}
</script>
<script type="text/javascript">
function windowDemo_1(){
alert("响应点击事件！");
alert(window.navigator.appName);
alert(window.navigator.appVersion);
//window对象一开浏览器就存在，不需要写！
alert(navigator.appName);
alert(navigator.appVersion);
}
</script>
* window 对象
代表浏览器中一个打开的窗口。
成员表
下面的表格列出了 window 对象引出的成员。
属性
属性 描述
closed 获取引用窗口是否已关闭。
defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息。
dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组。
dialogHeight 设置或获取模式对话框的高度。
dialogLeft 设置或获取模式对话框的左坐标。
dialogTop 设置或获取模式对话框的顶坐标。
dialogWidth 设置或获取模式对话框的宽度。
frameElement 获取在父文档中生成 window 的 frame 或 iframe 对象。
length 设置或获取集合中对象的数目。
name 设置或获取表明窗口名称的值。
offscreenBuffering 设置或获取对象在对用户可见之前是否要先在屏幕外绘制。
opener 设置或获取创建当前窗口的窗口的引用。
parent 获取对象层次中的父窗口。
returnValue 设置或获取从模式对话框返回的值。
screenLeft 获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。
screenTop 获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。
self 获取对当前窗口或框架的引用。
status 设置或获取位于窗口底部状态栏的信息。
top 获取最顶层的祖先窗口。
属性
集合
集合 描述
frames 获取给定文档定义或与给定窗口关联的文档定义的所有 window 对象的集合。
事件
事件 描述
onactivate 当对象设置为活动元素时触发。
onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeprint 对象的关联文档打印或打印预览前在对象上触发。
onbeforeunload 在页面将要被卸载前触发。
onblur 在对象失去输入焦点时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
onerror 当对象装载过程中发生错误时触发。
onfocus 当对象获得焦点时触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onload 在浏览器完成对象的装载后立即触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onresize 当对象的大小将要改变时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onscroll 当用户滚动对象的滚动条时触发。
onunload 在对象卸载前立即触发。
方法
方法 描述
alert 显示包含由应用程序自定义消息的对话框。
attachEvent 将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
blur 使元素失去焦点并触发 onblur 事件。
clearInterval 使用 setInterval 方法取消先前开始的间隔事件。
clearTimeout 取消先前用 setTimeout 方法设置的超时事件。
close 关闭当前浏览器窗口或 HTML 应用程序(HTA)。
confirm 显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。
createPopup 创建弹出窗口。
detachEvent 从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
execScript 以给定语言执行指定的脚本。
focus 使得元素得到焦点并执行由 onfocus 事件指定的代码。
moveBy 将窗口的位置移动指定 x 和 y 偏移值。
moveTo 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
navigate 在当前窗口中装入指定 URL。
open 打开新窗口并装入给定 URL 的文档。
print 打印与窗口关联的文档。
prompt 显示一个提示对话框，其中带有一条消息和一个输入框。
resizeBy 更改窗口的当前位置缩放指定的 x 和 y 偏移量。
resizeTo 将窗口的大小更改为指定的宽度和高度值。
scroll 将窗口滚动到自左上角起指定的 x 和 y 偏移量。
scrollBy 将窗口滚动 x 和 y 偏移量。
scrollTo 将窗口滚动到指定的 x 和 y 偏移量。
setActive 设置对象为当前对象而不将对象置为焦点。
setInterval 每经过指定毫秒值后计算一个表达式。
setTimeout 经过指定毫秒值后计算一个表达式。
showHelp 显示帮助文件。此方法可用于 Microsoft HTML 帮助。
showModalDialog 创建一个显示指定 HTML 文档的模式对话框。
showModelessDialog 创建一个显示指定 HTML 文档的非模式对话框。
对象
对象 描述
clientInformation 包含关于 Web 浏览器的信息。
clipboardData 提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
document 代表给定浏览器窗口中的 HTML 文档。
event 代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。
external 允许访问由 Microsoft Internet Explorer
浏览器组件宿主应用程序提供的附加对象模型。
history 包含了用户已浏览的 URL 的信息。
location 包含关于当前 URL 的信息。
navigator 包含关于 Web 浏览器的信息。
screen 包含关于客户屏幕和渲染能力的信息。
注释
你可以使用 window 对象获取关于窗口状态的信息。
你还可以使用此对象或的对窗口文档、窗口中发生的事件和影响窗口的浏览器的访问。
典型情况下，浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。
但是，如果一个文档定义了一个或多个框架(即，包含一个或多个 frame 或 iframe 标签)，
浏览器就会为原始文档创建一个 window 对象，再为每个框架创建额外的 window 对象。
这些额外的对象是原始窗口的 子窗口，可能被原始窗口中发生的事件所影响。
例如，关闭原始窗口将导致关闭全部子窗口。
如果想要创建新窗口(以及对应的 window 对象)，
可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。
你可以对任何计算结果为 window 对象的变量或表达式应用任何 window 的属性、
方法或集合，而不用管窗口是怎么创建的。
除此以外，你可以在当前窗口中直接使用全部的属性、方法和集合──
也就是说，无需在前面附加计算结果为当前 window 对象的表达式。
但是，为了使得代码更加便于阅读以及避免潜在的漏洞，
许多作者在访问当前窗口的属性、方法和集合时使用 window 关键字。
此关键字总是代表当前窗口。
注意 窗口的属性、方法和集合的名称都是保留关键字，
无法用于变量或例程的名称。
下面的表格列出了 window 对象某些属性的相关信息。
属性 方法 描述
opener open opener 属性仅在使用 window.open 方法打开的页面中可用。
parent, top 无 parent 和 top 属性对 frame 或 iframe 内打开的窗口可用。
这两个属性分别返回立即父窗口和最上层的祖先窗口。
parent, top open parent 和 top 属性对于通过 open 方法打开
或以对话框打开并返回到当前窗口的窗口可用。
length 无 不管窗口是怎么打开的，length 属性总是返回窗口中的框架数目。
dialogArguments, dialogHeight, dialogLeft, dialogTop,
dialogWidth, returnValue showModalDialog
和 showModelessDialog 这些属性仅对用列出的两个方法showModalDialog
和 showModelessDialog 打开的窗口可用。
此对象在 Microsoft® Internet Explorer 3.0 的脚本中可用。
下面的例子在当前窗口显示了警告框。
alert("简单的消息。")
下面的示例检查当前窗口是否包含子窗口，如果是的话，显示这些子窗口的名称。
<!-- if ( window.frames != null ) {
for ( i = 0; i< window.frames.length; i++ )
window.alert ("子窗口 " +i+ " 的名称为 "+window.frames(i).name);
}
下面的示例显示了窗口 onload 事件的简单事件处理句柄。
由于没有“window”元素，body 元素将作为下列 window 对象事件的宿主：
onblur, onbeforeunload, onfocus, onload 和 onunload。 -->
</body>
</html>
AD.HTML-Werbeseitencode
<a href="E:\javase\ework\day26_html\DOM_demo_1.html">转到</a>
<script type="text/javascript">
//setTimeout("close()",2000);
//2秒后自动关闭，只在新开窗口有效，如果是当前页面会提示是否关闭
onunload=function(){
open("ad.html","_blank","height=300,width=100,status=no,toolbar=no,menubar=no,location=no");
}
setInterval("focus()",1000);//每1秒就获得一次焦点
</script>Das Obige ist der Inhalt von Javascript_7_DOM_overview. Weitere Informationen Für verwandten Inhalt beachten Sie bitte die chinesische PHP-Website (www.php.cn)!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript_6_custom-ObjektNächster Artikel：Javascript_6_custom-Objekt
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse