1.8.1 JavaScript的BOM
1"window.location=''">跳转</button> 21. window对象 3 常用的属性: 4 *document :对 Document 对象的只读引用 5 *history :对 History 对象的只读引用。 6 *location:用于窗口或框架的 Location 对象 7 Navigator: 对 Navigator 对象的只读引用 8 *parent: 返回父窗口。 9 length: 设置或返回窗口中的框架数量。 10 Screen: 对 Screen 对象的只读引用 11 status: 设置窗口状态栏的文本。 12 top: 返回最顶层的先辈窗口。 1314 常用方法:15 alert() 显示带有一段消息和一个确认按钮的警告框。 16 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。17 prompt() 显示可提示用户输入的对话框。1819 close() 关闭浏览器窗口。 20 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 21 scrollTo() 把内容滚动到指定的坐标。 2223 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 24 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 25 setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 26 clearInterval() 取消由 setInterval() 设置的 timeout。 27282. Navigator 对象29 Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。30 常用属性:31 with(document) {32 write ("你的浏览器信息:
");33 write ("代码:"+navigator.appCodeName+"li>");34 write ("名称:"+navigator.appName+"</li>");35 write ("版本:"+navigator.appVersion+"li>");36 write ("语言:"+navigator.language+"</li>");37 write ("编译平台:"+navigator.platform+"li>");38 write ("用户表头:"+navigator.userAgent+"</li>");39 write ("l>");40 }4142433. Screen 对象包含有关客户端显示屏幕的信息。4445 常用属性:46 document.write( "屏幕宽度:"+screen.width+"px" );47 document.write( "屏幕高度:"+screen.height+"px" );48 document.write( "屏幕可用宽度:"+screen.availWidth+"px" );49 document.write( "屏幕可用高度:"+screen.availHeight+"px" );5051 参考了解其他属性信息获取方式52 网页可见区域宽:document.body.clientWidth53 网页可见区域高:document.body.clientHeight54 网页可见区域宽:document.body.offsetWidth (包括边线的宽)55 网页可见区域高:document.body.offsetHeight (包括边线的高)56 网页正文全文宽:document.body.scrollWidth57 网页正文全文高:document.body.scrollHeight58 网页被卷去的高:document.body.scrollTop59 网页被卷去的左:document.body.scrollLeft60 网页正文部分上:window.screenTop61 网页正文部分左:window.screenLeft62 屏幕分辨率的高:window.screen.height63 屏幕分辨率的宽:window.screen.width64 屏幕可用工作区高度:window.screen.availHeight65 屏幕可用工作区宽度:window.screen.availWidth66674. History 对象包含用户(在浏览器窗口中)访问过的 URL。6869705. Location 对象包含有关当前 URL 的信息。717273//获取页面中第二form表单中,一个username输入框的值(7种方式)74 //alert(document.forms[1].username.value);75 alert(document.myform.username.value);76 //alert(document.forms.myform.username.value);77 //alert(document.forms.item(1).username.value);78 //alert(document.forms['myform'].username.value);79 //alert(document['myform'].username.value);80 //alert(document.forms.item('myform').username.value); //火狐不兼容
1.8.2 讲解HTML DOM
(1) 基本概念
1HTML DOM 定义了访问和操作HTML文档的标准方法。
2HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
3DOM 被分为不同的部分:
4 1.Core DOM
5 定义了一套标准的针对任何结构化文档的对象
6 2.XML DOM
7 定义了一套标准的针对 XML 文档的对象
8 3.HTML DOM
9 定义了一套标准的针对 HTML 文档的对象。
10
11节点:根据 DOM,HTML 文档中的每个成分都是一个节点。
12 DOM 是这样规定的:
13 >整个文档是一个文档节点
14 >每个 HTML 标签是一个元素节点
15 >包含在 HTML 元素中的文本是文本节点
16 >每一个 HTML 属性是一个属性节点
17 >注释属于注释节点
18
19节点彼此间都存在关系。
20 >除文档节点之外的每个节点都有父节点。
21 >大部分元素节点都有子节点。
22 >当节点分享同一个父节点时,它们就是同辈(同级节点)。
23 >节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点
24 >节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点
25
26查找并访问节点
27 你可通过若干种方法来查找您希望操作的元素:
28 >通过使用 getElementById() 和 getElementsByTagName() 方法
29 >通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
30 > nextSibling返回节点之后紧跟的同级节点。/ previousSibling返回节点之前紧跟的同级节点。
31
32节点信息
33 每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
34 nodeName(节点名称)
35 nodeValue(节点值)
36 nodeType(节点类型)
37
38nodeName 属性含有某个节点的名称。
39 元素节点的 nodeName 是标签名称
40 属性节点的 nodeName 是属性名称
41 文本节点的 nodeName 永远是 #text
42 文档节点的 nodeName 永远是 #document
(2) HTML DOM 对象参考
1Document: 代表整个 HTML 文档,可被用来访问页面中的所有元素
2 常用集合属性:forms
3Anchor : 代表 元素 4Area : 代表图像映射中的 元素 5Base : 代表 元素 6Body : 代表 元素 7Button : 代表 元素 8Event : 代表某个事件的状态 9Form : 代表 元素 10Frame : 代表 元素 11Frameset: 代表 元素 12Iframe : 代表