• HTML DOM 教程_笔记


    1. W3C DOM

    1.1 什么是DOM

    文档对象模型 (DOM) 是一个平台,一个中立于语言的应用程序编程接口 (API),允许程序访问并更改文档的内容、结构和样式。

    DOM可以以一种独立于平台和语言的方式访问和修改一个文档(HTMLXML)的内容和结构。

    通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

    1.2 DOM级别

    参考:http://baike.baidu.com/view/14806.htm

    1级DOM

    1级DOM在1998年10月份成为W3C的提议,DOM核心与DOM HTML两个模块组成DOM核心能映射以XML为基础的文档结构,允许获取和操作文档的任意部分DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展

    2级DOM

    鉴于1级DOM仅以映射文档结构为目标,DOM 2级面向更为宽广。通过对原有DOM的扩展,2DOM通过对象接口增加了对鼠标和用户界面事件(DHTML长期支持鼠标与用户界面事件)、范围、遍历(重复执行DOM文档)和层叠样式表(CSS)的支持。同时也对DOM 1的核心进行了扩展,从而可支持XML命名空间

    2级DOM引进了几个新DOM模块来处理新的接口类型:

    DOM视图:描述跟踪一个文档的各种视图(使用CSS样式设计文档前后)的接口;

    DOM事件:描述事件接口;

    DOM样式:描述处理基于CSS样式的接口;

    DOM遍历与范围:描述遍历和操作文档树的接口;

    3级DOM

    3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展,DOM3包含一个名为“DOM载入与保存的新模块,DOM核心扩展后可支持XML1.0的所有内容,包扩XML Infoset、 XPath、和XML Base。

    0级DOM

    当阅读与DOM有关的材料时,可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM,它仅是DOM历史上一个参考点(0级DOM被认为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML)。

    1.3 DOM的组成部分

    DOM 可分为不同的部分:核心、XML及HTML。

    Core DOM:定义了一套标准的针对任何结构化文档的对象

    XML DOM:定义了一套标准的针对 XML 文档的对象。请参考 XML DOM 教程

    HTML DOM:定义了一套标准的针对 HTML 文档的对象。 请参考HTML DOM 教程

    2. HTML DOM节点

    2.1 Node 层次

    HTML 文档中的每个成分都是一个节点。DOM 是这样规定的:

    • 整个文档是一个文档节点
    • 每个 HTML 标签是一个元素节点
    • 包含在 HTML 元素中的文本是文本节点
    • 每一个 HTML 属性是一个属性节点
    • 注释属于注释节点

    3. HTML DOM 访问节点

    3.1 查找并访问节点

    你可通过若干种方法来查找您希望操作的元素:

    • 通过使用 getElementById() 和 getElementsByTagName() 方法
    • 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

    3.2 getElementById() 和 getElementsByTagName()

    3.2.1 getElementById()

    getElementById() 可通过指定的 ID 来返回元素。

    getElementById() 语法

    document.getElementById("ID"); 

    注释:getElementById() 无法工作在 XML 中。在 XML 文档中,您必须通过拥有类型 id 的属性来进行搜索,而此类型必须在 XML DTD 中进行声明。

    3.2.2 getElementsByTagName()

    getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。

    getElementsByTagName() 可被用于任何的 HTML 元素:

    getElementsByTagName() 语法

    document.getElementsByTagName("标签名称"); 

    或者:

    document.getElementById('ID').getElementsByTagName("标签名称"); 

    3.2.3 实例 1

    下面这个例子会返回文档中所有 <p> 元素的一个节点列表:

    document.getElementsByTagName("p"); 

    3.2.4 实例 2

    下面这个例子会返回所有 <p> 元素的一个节点列表,且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代:

    document.getElementById('maindiv').getElementsByTagName("p"); 

    3.2.5 节点列表(nodeList)

    当我们使用节点列表时,通常要把此列表保存在一个变量中,就像这样:

    var x=document.getElementsByTagName("p");

    现在,变量 x 包含着页面中所有 <p> 元素的一个列表,并且我们可以通过它们的索引号来访问这些 <p> 元素。

    注释:索引号从 0 开始。

    您可以通过使用 length 属性来循环遍历节点列表:

    var x=document.getElementsByTagName("p");
    for (var i=0;i<x.length;i++)
      { 
      // do something with each paragraph
      }

    您也可以通过索引号来访问某个具体的元素。

    要访问第三个 <p> 元素,您可以这么写:

    var y=x[2];

    3.3 parentNode、firstChild以及lastChild

    这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。

    请看下面这个 HTML 片段:

    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>Alaska</td>
      </tr>
    </table>

    在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。

    此外,<tr> 是每个 <td>元 素的父节点(parentNode)。

    对 firstChild 最普遍的用法是访问某个元素的文本:

    var x=[a paragraph];
    var text=x.firstChild.nodeValue; 

    parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点:

    var x=document.getElementById("maindiv");
    x.parentNode.removeChild(x); 

    首先,您需要找到带有指定 id 的节点,然后移至其父节点并执行 removeChild() 方法。

    3.4 根节点

    有两种特殊的文档属性可用来访问根节点:

    • document.documentElement
    • document.body

    第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

    第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。

    4. HTML DOM 节点信息

    4.1 节点信息

    每个节点都拥有包含着关于节点某些信息的属性。这些属性是:

    • nodeName(节点名称)
    • nodeValue(节点值)
    • nodeType(节点类型)

    4.2 nodeName

    nodeName 属性含有某个节点的名称。

    • 元素节点的 nodeName 是标签名称
    • 属性节点的 nodeName 是属性名称
    • 文本节点的 nodeName 永远是 #text
    • 文档节点的 nodeName 永远是 #document

    注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

    4.3 nodeValue

    对于文本节点,nodeValue 属性包含文本。

    对于属性节点,nodeValue 属性包含属性值。

    nodeValue 属性对于文档节点和元素节点是不可用的。

    4.4 nodeType

    nodeType 属性可返回节点的类型。

    最重要的节点类型是:

    元素类型

    节点类型

    元素

    1

    属性

    2

    文本

    3

    注释

    8

    文档

    9

    5. HTML DOM 参考手册

    5.1 Browser 对象参考手册

    点击以下链接,可以获得以下对象的更多信息,包括它们的集合、属性、方法以及事件。其中包含大量实例!

    对象

    描述

    Window

    JavaScript 层级中的顶层对象,表示浏览器窗口。

    Navigator

    包含客户端浏览器的信息。

    Screen

    包含客户端显示屏的信息。

    History

    包含了浏览器窗口访问过的 URL。

    Location

    包含了当前 URL 的信息。

    5.2 HTML DOM 对象参考手册

    请点击下面的链接,学习更多有关对象及其集合、属性、方法和事件的知识。其中包含大量实例!

    对象

    描述

    Document

    代表整个 HTML 文档,可被用来访问页面中的所有元素

    Anchor

    代表 <a> 元素

    Area

    代表图像映射中的 <area> 元素

    Base

    代表 <base> 元素

    Body

    代表 <body> 元素

    Button

    代表 <button> 元素

    Event

    代表某个事件的状态

    Form

    代表 <form> 元素

    Frame

    代表 <frame> 元素

    Frameset

    代表 <frameset> 元素

    Iframe

    代表 <iframe> 元素

    Image

    代表 <img> 元素

    Input button

    代表 HTML 表单中的一个按钮

    Input checkbox

    代表 HTML 表单中的复选框

    Input file

    代表 HTML 表单中的文件上传

    Input hidden

    代表 HTML 表单中的隐藏域

    Input password

    代表 HTML 表单中的密码域

    Input radio

    代表 HTML 表单中的单选按钮

    Input reset

    代表 HTML 表单中的重置按钮

    Input submit

    代表 HTML 表单中的确认按钮

    Input text

    代表 HTML 表单中的文本输入域(文本框)

    Link

    代表 <link> 元素

    Meta

    代表 <meta> 元素

    Object

    代表 <Object> 元素

    Option

    代表 <option> 元素

    Select

    代表 HTML 表单中的选择列表

    Style

    代表单独的样式声明

    Table

    代表 <table> 元素

    TableData

    代表 <td> 元素

    TableRow

    代表 <tr> 元素

    Textarea

    代表 <textarea> 元素

    6. Windows对象

    Window 对象表示浏览器中打开的窗口。

    如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

    注释:没有应用于 window 对象的公开标准(它不是W3C的标准),不过所有浏览器都支持该对象。

    IE: Internet Explorer, F: Firefox, O: Opera.

    6.1 Window 对象集合

    集合

    描述

    IE

    F

    O

    frames[]

    返回窗口中所有命名的框架。

    该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数组。

    4

    1

    9

    6.2 Window 对象属性

    属性

    描述

    IE

    F

    O

    closed

    定义和用法

    closed 属性可返回一个布尔值,该值声明了窗口是否已经关闭。该属性为只读。

    当浏览器窗口关闭时,表示该窗口的 Windows 对象并不会消失,它将继续存在,不过它的 closed 属性将设置为 true。

    语法

    window.closed

    4

    1

    9

    defaultStatus

    定义和用法

    defaultStatus 属性可设置或返回窗口状态栏中的默认文本。该属性可读可写。

    该文本会在页面加载时被显示。

    语法

    window.defaultStatus=sometext

    注释

    注意与status属性的区别。

    4

    No

    9

    document

    对 Document 对象的只读引用。请参阅 Document 对象

    4

    1

    9

    history

    对 History 对象的只读引用。请参数 History 对象

    4

    1

    9

    innerheight

    返回窗口的文档显示区的高度。

    No

    No

    No

    innerwidth

    返回窗口的文档显示区的宽度。

    No

    No

    No

    length

    设置或返回窗口中的框架数量。

    4

    1

    9

    location

    用于窗口或框架的 Location 对象。请参阅 Location 对象

    4

    1

    9

    name

    定义和用法

    name 属性可设置或返回存放窗口的名称的一个字符串。

    该名称是在 open() 方法创建窗口时指定的或者使用一个 <frame> 标记的 name 属性指定的。

    窗口的名称可以用作一个 <a> 或者 <form> 标记的 target 属性的值。以这种方式使用 target 属性声明了超链接文档或表单提交结果应该显示于指定的窗口或框架中。

    语法

    window.name=name

    4

    1

    9

    Navigator

    对 Navigator 对象的只读引用。请参数 Navigator 对象

    4

    1

    9

    opener

    定义和用法

    opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。

    opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。

    语法

    window.opener

    提示和注释

    注释:只有表示顶层窗口的 Window 对象的 operner 属性才有效,表示框架的 Window 对象的 operner 属性无效。

    4

    1

    9

    outerheight

    返回窗口的外部高度。

    No

    No

    No

    outerwidth

    返回窗口的外部宽度。

    No

    No

    No

    pageXOffset

    设置或返回当前页面相对于窗口显示区左上角的 X 位置。

    No

    No

    No

    pageYOffset

    设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

    No

    No

    No

    parent

    返回父窗口。

    4

    1

    9

    Screen

    对 Screen 对象的只读引用。请参数 Screen 对象

    4

    1

    9

    self

    定义和用法

    self 属性可返回对窗口自身的只读引用。等价于 Window 属性。

    语法

    window.self

    4

    1

    9

    status

    定义和用法

    status 属性可设置或返回窗口状态栏中的文本。

    语法

    window.status=sometext

    说明

    status 属性是一个可读可写的字符串,声明了要在窗口状态栏中显示的一条消息。通常显示这条消息的时间是有限的,直到其他的消息将它覆盖,或者用户把鼠标移动到窗口的其他区域为止。当擦除了 status 声明的消息时,状态栏要么恢复为它默认的空白状态,要么是再次显示出属性 defaultStatus 声明的默认消息。

    据我们所知,不少浏览器已经关闭了脚本化它们的状态栏的功能。这是一项安全措施,防止隐藏了超链接真正目的的钓鱼攻击。

    4

    No

    9

    top

    定义和用法

    top 属性返回最顶层的先辈窗口。

    该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口,top 属性存放对窗口自身的引用。如果窗口是一个框架,那么 top 属性引用包含框架的顶层窗口。

    语法

    window.top

    4

    1

    9

    window

    window 属性等价于 self 属性,它包含了对窗口自身的引用。

    4

    1

    9

    screenLeft

    screenTop

    screenX

    screenY

    只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

    4

    1

    9

    6.3 Window 对象方法

    方法

    描述

    IE

    F

    O

    alert()

    定义和用法

    alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

    语法

    alert(message)

    4

    1

    9

    blur()

    定义和用法

    blur() 方法可把键盘焦点从顶层窗口移开。

    语法

    window.blur()

    说明

    方法 blur() 可把键盘焦点从顶层浏览器窗口移走,整个窗口由 Window 对象指定。哪个窗口最终获得键盘焦点并没有指定。

    提示和注释

    注释:在某些浏览器上,该方法可能无效。

    4

    1

    9

    clearInterval()

    定义和用法

    clearInterval() 方法可取消由 setInterval() 设置的 timeout。

    clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

    语法

    clearInterval(id_of_setinterval)

    4

    1

    9

    clearTimeout()

    定义和用法

    clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

    语法

    clearTimeout(id_of_settimeout)

    参数

    id_of_settimeout: 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

    4

    1

    9

    close()

    定义和用法

    close() 方法用于关闭浏览器窗口。

    语法

    window.close()

    说明

    方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

    只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。

    4

    1

    9

    confirm()

    定义和用法

    confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

    语法

    confirm(message)

    说明

    如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。

    在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

    提示和注释

    对话框按钮的文字是不可改变的,因此请小心地编写问题或消息,使它适合用确认和取消来回答。

    4

    1

    9

    createPopup()

    定义和用法

    createPopup() 方法用于创建一个 pop-up 窗口。

    语法

    window.createPopup()

    提示和注释

    Popup与window窗口的不同之处为,当点击popup范围之外的区域时,popup会自动关闭。

    4

    No

    No

    focus()

    定义和用法

    focus() 方法可把键盘焦点给予一个窗口。

    语法

    window.focus()

    4

    1

    9

    moveBy()

    定义和用法

    moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。

    语法

    window.moveBy(x,y)

    参数

    X:要把窗口右移的像素数

    Y:要把窗口下移的像素数

    4

    1

    9

    moveTo()

    定义和用法

    moveTo() 方法可把窗口的左上角移动到一个指定的坐标。

    语法

    window.moveTo(x,y)

    参数

    X:窗口新位置的 x 坐标

    Y:窗口新位置的 y 坐标

    提示和注释

    出于安全方面的原因,浏览器限制此方法使其不能把窗口移出屏幕。

    4

    1

    9

    open()

    定义和用法

    open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

    语法

    window.open(URL,name,features,replace)

    参数

    URL

    一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档

    Name

    一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略

    Features

    一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在窗口特征这个表格中,我们对该字符串的格式进行了详细的说明

    Replace

    一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:

    true - URL 替换浏览历史中的当前条目。

    false - URL 在浏览历史中创建新的条目。

    提示和注释

    重要事项:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。为了使您的代码清楚明白,请使用 Window.open(),而不要使用 open()。

    窗口特征(Window Features)

    channelmode=yes|no|1|0

    是否使用剧院模式显示窗口。默认为 no。

    directories=yes|no|1|0

    是否添加目录按钮。默认为 yes。

    fullscreen=yes|no|1|0

    是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。

    height=pixels

    窗口文档显示区的高度。以像素计。

    left=pixels

    窗口的 x 坐标。以像素计。

    location=yes|no|1|0

    是否显示地址字段。默认是 yes。

    menubar=yes|no|1|0

    是否显示菜单栏。默认是 yes。

    resizable=yes|no|1|0

    窗口是否可调节尺寸。默认是 yes。

    scrollbars=yes|no|1|0

    是否显示滚动条。默认是 yes。

    status=yes|no|1|0

    是否添加状态栏。默认是 yes。

    titlebar=yes|no|1|0

    是否显示标题栏。默认是 yes。

    toolbar=yes|no|1|0

    是否显示浏览器的工具栏。默认是 yes。

    top=pixels

    窗口的 y 坐标。

    width=pixels

    窗口的文档显示区的宽度。以像素计。

    4

    1

    9

    print()

    定义和用法

    print() 方法用于打印当前窗口的内容。

    调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常,这会产生一个对话框,让用户可以取消或定制打印请求。

    语法

    window.print()

    5

    1

    9

    prompt()

    定义和用法

    prompt() 方法用于显示可提示用户进行输入的对话框。

    语法

    prompt(text,defaultText)

    参数

    Text:可选。要在对话框中显示的纯文本(而不是 HTML 格式的文本)。

    defaultText:可选。默认的输入文本。

    说明

    如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。

    在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

    4

    1

    9

    resizeBy()

    定义和用法

    resizeBy() 方法用于根据指定的像素来调整窗口的大小。

    语法

    resizeBy(width,height)

    参数

    Width:必需。要使窗口宽度增加的像素数。可以是正、负数值。

    Height:可选。要使窗口高度增加的像素数。可以是正、负数值。

    4

    1

    9

    resizeTo()

    定义和用法

    resizeTo() 方法用于把窗口大小调整为指定的宽度和高度。

    语法

    resizeTo(width,height)

    参数

    Width:必需。想要调整到的窗口的宽度。以像素计。

    Height:可选。想要调整到的窗口的高度。以像素计。

    4

    1.5

    9

    scrollBy()

    定义和用法

    scrollBy() 方法可把内容滚动指定的像素数。

    语法

    scrollBy(xnum,ynum)

    参数

    Xnum:必需。把文档向右滚动的像素数。

    Ynum:必需。把文档向下滚动的像素数。

    4

    1

    9

    scrollTo()

    定义和用法

    scrollTo() 方法可把内容滚动到指定的坐标。

    语法

    scrollTo(xpos,ypos)

    参数

    Xpos:必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

    Ypos:必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

    4

    1

    9

    setInterval()

    定义和用法

    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

    语法

    setInterval(code,millisec[,"lang"])

    参数

    code:必需。要调用的函数或要执行的代码串。

    millisec:必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

    返回值

    一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

    4

    1

    9

    setTimeout()

    定义和用法

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

    语法

    setTimeout(code,millisec)

    参数

    code:必需。要调用的函数后要执行的 JavaScript 代码串。

    millisec:必需。在执行代码前需等待的毫秒数。

    提示和注释

    setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

    4

    1

    9

    6.4 Window 对象描述

    Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写 document,而不必写 window.document。

    同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 Window.alert()。

    除了上面列出的属性和方法,Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。

    Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口,而不仅仅是隐式地引用它时,可以使用这两个属性。除了这两个属性之外,parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

    要引用窗口中的一个框架,可以使用如下语法:

    frame[i]         //当前窗口的框架
    self.frame[i]    //当前窗口的框架
    w.frame[i]       //窗口 w 的框架

    要引用一个框架的父窗口(或父框架),可以使用下面的语法:

    parent           //当前窗口的父窗口
    self.parent      //当前窗口的父窗口
    w.parent         //窗口 w 的父窗口

    要从顶层窗口含有的任何一个框架中引用它,可以使用如下语法:

    top              //当前框架的顶层窗口
    self.top         //当前框架的顶层窗口
    f.top            //框架 f 的顶层窗口

    新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时,应把 open() 调用的返回值存储在一个变量中,然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。

    一般来说,Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法confirm() 方法prompt 方法则不同,它们通过简单的对话框与用户进行交互。

    7. Navigator对象

    Navigator 对象包含有关浏览器的信息。

    注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。

    7.1 Navigator 对象集合

    集合

    描述

    IE

    F

    O

    plugins[]

    返回对文档中所有嵌入式对象的引用。

    该集合是一个 Plugin 对象的数组,其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息,其中包括它所支持的 MIME 类型的列表。

    虽然 plugins[] 数组是由 IE 4 定义的,但是在 IE 4 中它却总是空的,因为 IE 4 不支持插件和 Plugin 对象。

    4

    1

    9

    7.2 Navigator对象属性

    描述

    IE

    F

    O

    appCodeName

    定义和用法

    appCodeName 属性是一个只读字符串,声明了浏览器的代码名。

    在所有以 Netscape 代码为基础的浏览器中,它的值是 "Mozilla"。为了兼容起见,在 Microsoft 的浏览器中,它的值也是 "Mozilla"。

    语法

    navigator.appCodeName

    4

    1

    9

    appMinorVersion

    定义和用法

    appMinorVersion 属性可返回浏览器的次要版本。

    语法

    navigator.appMinorVersion

    4

    No

    No

    appName

    定义和用法

    appName 属性可返回浏览器的名称。

    appName 属性是一个只读到字符串,声明了浏览器的名称。在基于 Netscape 的浏览器中,这个属性的值是 "Netscape"。在 IE 中,这个属性的值是 "Microsoft Internet Explorer"。其他浏览器可以正确地表示自己或者伪装成其他的浏览器以达到兼容性。

    语法

    navigator.appName

    4

    1

    9

    appVersion

    定义和用法

    appVersion 属性可返回浏览器的平台和版本信息。该属性是一个只读的字符串。

    该字符串的第一部分是版本号。把该字符串传递给 parseInt() 只能获取主版本号。该属性的其余部分提供了有关浏览器版本的其他细节,包括运行它的操作系统的信息。

    语法

    navigator.appVersion

    提示和注释

    注释:不同浏览器提供的信息的格式是不同的。

    Chrome值:5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31

    IE10值:5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3)

    4

    1

    9

    browserLanguage

    定义和用法

    browserLanguage 属性可返回当前浏览器的语言。

    语法

    navigator.browserLanguage

    4

    No

    9

    cookieEnabled

    定义和用法

    cookieEnabled 属性可返回一个布尔值,如果浏览器启用了 cookie,该属性值为 true。如果禁用了 cookie,则值为 false。

    语法

    navigator.cookieEnabled

    4

    1

    9

    cpuClass

    定义和用法

    cpuClass 属性可返回浏览器系统的 CPU 等级。

    语法

    navigator.cpuClassd

    4

    No

    No

    onLine

    定义和用法

    onLine 属性是一个只读的布尔值,声明了系统是否处于脱机模式。

    注释:在 IE 4+ 中,用户可以在浏览器中选择脱机工作的状态。当脱机工作被选后,系统就进入了脱机状态,内容将从缓存进行读取。

    语法

    navigator.onLine

    4

    No

    No

    platform

    定义和用法

    platform 属性是一个只读的字符串,声明了运行浏览器的操作系统和(或)硬件平台。

    虽然该属性没有标准的值集合,但它有些常用值,比如 "Win32"、"MacPPC" 以及 "Linuxi586",等等。

    语法

    navigator.platform

    4

    1

    9

    systemLanguage

    定义和用法

    systemLanguage 属性可返回操作系统使用的默认语言。

    语法

    navigator.systemLanguage

    4

    No

    No

    userAgent

    定义和用法

    userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

    一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

    例如:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。

    注:用户代理头:user-agent header。

    语法

    navigator.userAgent

    4

    1

    9

    userLanguage

    定义和用法

    userLanguage 属性可返回操作系统的自然语言设置。

    语法

    navigator.userLanguage

    4

    No

    9

    7.3 Navigator对象方法

    描述

    IE

    F

    O

    javaEnabled()

    定义和用法

    javaEnabled() 方法可返回一个布尔值,该值指示浏览器是否支持并启用了 Java。如果是,则返回 true,否则返回 false。

    语法

    navigator.javaEnabled()

    提示和注释

    提示:可以使用 navigator.javaEnabled() 来检测当前浏览器是否支持 Java,从而知道浏览器是否能显示 Java 小程序。

    4

    1

    9

    taintEnabled()

    定义和用法

    taintEnabled() 方法可返回一个布尔值,该值声明了当前浏览器是否启用了 data tainting。

    语法

    navigator.taintEnabled()

    4

    1

    9

    7.4 Navigator对象描述

    Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

    虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器,但其他实现了 JavaScript 的浏览器也支持这个对象。

    Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。

    8. Screen对象

    Screen 对象包含有关客户端显示屏幕的信息。

    注释:没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。

    8.1 Screen对象属性

    描述

    IE

    F

    O

    availHeight

    定义和用法

    availHeight 属性声明了显示浏览器的屏幕的可用高度,以像素计。在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。

    语法

    screen.availHeight

    4

    1

    9

    availWidth

    定义和用法

    availWidth 属性声明了显示浏览器的屏幕的可用宽度,以像素计。在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。

    语法

    screen.availWidth

    4

    1

    9

    bufferDepth

    设置或返回调色板的比特深度。

    4

    No

    No

    colorDepth

    定义和用法

    colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度。

    语法

    screen.colorDepth

    4

    1

    9

    deviceXDPI

    返回显示屏幕的每英寸水平点数。

    6

    No

    No

    deviceYDPI

    返回显示屏幕的每英寸垂直点数。

    6

    No

    No

    fontSmoothingEnabled

    返回用户是否在显示控制面板中启用了字体平滑。

    4

    No

    No

    height

    定义和用法

    height 属性声明了显示浏览器的屏幕的高度,以像素计。

    语法

    screen.height

    4

    1

    9

    logicalXDPI

    返回显示屏幕每英寸的水平方向的常规点数。

    6

    No

    No

    logicalYDPI

    返回显示屏幕每英寸的垂直方向的常规点数。

    6

    No

    No

    pixelDepth

    返回显示屏幕的颜色分辨率(比特每像素)。

    No

    1

    9

    updateInterval

    设置或返回屏幕的刷新率。

    4

    No

    No

    width

    定义和用法

    width 属性声明了显示浏览器的屏幕的宽度,以像素计。

    语法

    screen.width

    4

    1

    9

    8.2 Screen对象属性

    每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出,以达到用户的显示要求。例如,一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像,它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外,JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

    9. History对象

    History 对象包含用户(在浏览器窗口中)访问过的 URL。

    History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

    注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。

    9.1 History对象属性

    描述

    IE

    F

    O

    length

    length 属性声明了浏览器历史列表中的元素数量。

    注释:IE 6 和 Opera 9 以 0 开始,而 Firefox 1.5 以 1 开始。

    语法

    history.length

    4

    1

    9

    9.2 History对象方法

    描述

    IE

    F

    O

    back()

    定义和用法

    back() 方法可加载历史列表中的前一个 URL(如果存在)。

    调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

    语法

    history.back()

    4

    1

    9

    forward()

    定义和用法

    forward() 方法可加载历史列表中的下一个 URL。

    调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

    语法

    history.forward()

    4

    1

    9

    go()

    定义和用法

    go() 方法可加载历史列表中的某个具体的页面。

    语法

    history.go(number|URL)

    参数

    URL 参数使用的是要访问的 URL,或 URL 的子串。

    number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。

    4

    1

    9

    9.3 History对象描述

    History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()forward() 和 go() 方法。

    例子

    下面一行代码执行的操作与单击后退按钮执行的操作一样:

    history.back()

    下面一行代码执行的操作与单击两次后退按钮执行的操作一样:

    history.go(-2)

    10. Location对象

    Location 对象包含有关当前 URL 的信息。

    Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

    10.1 Location对象属性

    描述

    IE

    F

    O

    hash

    定义和用法

    hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。

    语法

    location.hash=anchorname

    4

    1

    9

    host

    定义和用法

    host 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名称和端口号。

    语法

    location.host

    4

    1

    9

    hostname

    定义和用法

    hostname 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名。

    语法

    location.hostname

    4

    1

    9

    href

    定义和用法

    href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL。

    因此,我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。

    语法

    location.href=URL

    4

    1

    9

    pathname

    定义和用法

    pathname 属性是一个可读可写的字符串,可设置或返回当前 URL 的路径部分。

    语法

    location.pathname=path

    4

    1

    9

    port

    定义和用法

    port 属性是一个可读可写的字符串,可设置或返回当前 URL 的端口部分。

    语法

    location.port=portnumber

    4

    1

    9

    protocol

    定义和用法

    protocol 属性是一个可读可写的字符串,可设置或返回当前 URL 的协议。

    语法

    location.protocol=path

    4

    1

    9

    search

    定义和用法

    search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。

    语法

    location.search=path_from_questionmark

    4

    1

    9

    10.2 Location对象方法

    描述

    IE

    F

    O

    assign()

    定义和用法

    assign() 方法可加载一个新的文档。

    语法

    location.assign(URL)

    4

    1

    9

    reload()

    定义和用法

    reload() 方法用于重新加载当前文档。

    语法

    location.reload(force)

    说明

    如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

    如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

    4

    1

    9

    replace()

    定义和用法

    replace() 方法可用一个新文档取代当前文档。

    语法

    location.replace(newURL)

    说明

    replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。

    4

    1

    9

    10.3 Location对象描述

    Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

    不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。

    除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。

    除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。

    11. Document对象

    每个载入浏览器的 HTML 文档都会成为 Document 对象。

    Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

    提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

    11.1 Document 对象集合

    描述

    IE

    F

    O

    W3C

    all[]

    定义和用法

    all 集合返回对文档中所有 HTML 元素的引用。

    语法

    document.all[i]

    document.all[name]

    document.all.tags[tagname]

    说明

    all[] 是一个多功能的类似数组的对象,它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。

    all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此,这个 all[] 数组在已有的代码中仍然使用。

    all[] 包含的元素保持了最初的顺序,如果你知道它们在数组中的确切数字化位置,可以直接从数组中提取它们。然而,更为常见的是使用 all[] 数组,根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name,将得到共享同一名称的元素的一个数组。

    4

    1

    9

    No

    anchors[]

    定义和用法

    anchors 集合可返回对文档中所有 Anchor 对象的引用。

    语法

    document.anchors[]

    4

    1

    9

    Yes

    applets

    返回对文档中所有 Applet 对象的引用。

    -

    -

    -

    -

    forms[]

    定义和用法

    forms 集合可返回对文档中所有 Form 对象的引用。

    语法

    document.forms[]

    4

    1

    9

    Yes

    images[]

    定义和用法

    images 集合可返回对文档中所有 Image 对象的引用。

    语法

    document.images[]

    提示和注释

    注释:为了与 0 级 DOM 兼容,该集合不包括由 <object> 标记定义的图像。

    4

    1

    9

    Yes

    links[]

    定义和用法

    links 集合可返回对文档中所有 Area 和 Link 对象的引用。

    语法

    document.links[]

    4

    1

    9

    Yes

    11.2 Document对象属性

    描述

    IE

    F

    O

    W3C

    body

    提供对 <body> 元素的直接访问。

    对于定义了框架集的文档,该属性引用最外层的 <frameset>。

    cookie

    定义和用法

    cookie 属性可设置或查询与当前文档相关的所有 cookie。

    语法

    document.cookie

    说明

    该属性是一个可读可写的字符串,可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。

    提示和注释

    提示:该属性的行为与普通的读/写属性是不同的。

    4

    1

    9

    Yes

    domain

    定义和用法

    domain 属性可返回下载当前文档的服务器域名。

    语法

    document.domain

    说明

    该属性是一个只读的字符串,包含了载入当前文档的 web 服务器的主机名。

    提示和注释

    提示:domain 属性可以解决因同源安全策略带来的不同文档的属性共享问题。

    4

    1

    9

    Yes

    lastModified

    定义和用法

    lastModified 属性可返回文档最后被修改的日期和时间。

    语法

    document.lastModified

    说明

    该值来自于 Last-Modified HTTP 头部,它是由 Web 服务器发送的可选项。

    4

    1

    No

    No

    referrer

    定义和用法

    referrer 属性可返回载入当前文档的文档的 URL。

    语法

    document.referrer

    说明

    如果当前文档不是通过超级链接访问的,则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部

    4

    1

    9

    Yes

    title

    定义和用法

    title 属性可返回当前文档的标题( HTML title 元素中的文本)。

    语法

    document.title

    4

    1

    9

    Yes

    URL

    定义和用法

    URL 属性可返回当前文档的 URL。

    语法

    document.URL

    说明

    一般情况下,该属性的值与包含文档的 Window 的 location.href 属性相同。不过,在 URL 重定向发生的时候,这个 URL 属性保存了文档的实际 URL,而 location.href 保存了请求的 URL。

    4

    1

    9

    Yes

    11.3 Document对象方法

    描述

    IE

    F

    O

    W3C

    close()

    定义和用法

    close() 方法可关闭一个由 document.open 方法打开的输出流,并显示选定的数据。

    语法

    document.close()

    说明

    该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档,必须记住当你这么做的时候要调用 close() 方法,以确保所有文档内容都能显示。

    一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

    4

    1

    9

    Yes

    getElementById()

    getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

    语法

    document.getElementById(id)

    说明

    HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

    不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

    在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

    5

    1

    9

    Yes

    getElementsByName()

    定义和用法

    getElementsByName() 方法可返回带有指定名称的对象的集合。

    语法

    document.getElementsByName(name)

    该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。

    另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    5

    1

    9

    Yes

    getElementsByTagName()

    定义和用法

    getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

    语法

    document.getElementsByTagName(tagname)

    说明

    getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

    如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

    提示和注释

    注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

    5

    1

    9

    Yes

    open()

    定义和用法

    open() 方法可打开一个新文档,并擦除当前文档的内容。(打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。)

    语法

    document.open(mimetype,replace)

    参数

    Mimetype: 可选。规定正在写的文档的类型。默认值是 "text/html"。

    Replace: 可选。当此参数设置后,可引起新文档从父文档继承历史条目。

    说明

    该方法将擦除当前 HTML 文档的内容,开始一个新的文档,新文档用 write() 方法或 writeln() 方法编写。

    提示和注释

    重要事项:调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来。

    注释:属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法,因为脚本或事件句柄自身也会被覆盖。

    4

    1

    9

    Yes

    write()

    定义和用法

    write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

    可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。

    语法

    document.write(exp1,exp2,exp3,....)

    说明

    虽然根据 DOM 标准,该方法只接受单个字符串作为参数。不过根据经验,write() 可接受任何多个参数。

    我们通常按照两种的方式使用 write() 方法:一是在使用该方在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中,请务必使用 close() 方法来关闭文档。

    4

    1

    9

    Yes

    writeln()

    定义和用法

    writeln() 方法与 write() 方法作用相同,外加可在每个表达式后写一个换行符。

    语法

    document.writeln(exp1,exp2,exp3,....)

    提示和注释

    提示:在编写 <pre> 标记的内容时,该方法很有用。

    4

    1

    9

    Yes

    11.4 Document对象描述

    HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法。

    很多属性和方法都是 HTMLCollection 对象(实际上是可以用数组或名称索引的只读数组),其中保存了对锚、表单、链接以及其他可脚本元素的引用。

    这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代,但是仍然常常使用,因为他们很方便。

    write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。

    注意,在 1 级 DOM 中,HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中,该方法已经被转移到了 Document 接口,它现在由 HTMLDocument 继承而不是由它定义了。

    12. Event对象

    12.1 Event 对象

    Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    事件通常与函数结合使用,函数不会在事件发生前被执行!

    12.2 Event 句柄(Event Handlers

    HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为

    此事件发生在何时...

    IE

    F

    O

    W3C

    onabort

    图像的加载被中断。

    4

    1

    9

    Yes

    onblur

    元素失去焦点。

    3

    1

    9

    Yes

    onchange

    域的内容被改变。

    3

    1

    9

    Yes

    onclick

    当用户点击某个对象时调用的事件句柄。

    3

    1

    9

    Yes

    ondblclick

    当用户双击某个对象时调用的事件句柄。

    4

    1

    9

    Yes

    onerror

    在加载文档或图像时发生错误。

    4

    1

    9

    Yes

    onfocus

    元素获得焦点。

    3

    1

    9

    Yes

    onkeydown

    某个键盘按键被按下。

    3

    1

    No

    Yes

    onkeypress

    某个键盘按键被按下并松开。

    3

    1

    9

    Yes

    onkeyup

    某个键盘按键被松开。

    3

    1

    9

    Yes

    onload

    一张页面或一幅图像完成加载。

    3

    1

    9

    Yes

    onmousedown

    鼠标按钮被按下。

    4

    1

    9

    Yes

    onmousemove

    鼠标被移动。

    3

    1

    9

    Yes

    onmouseout

    鼠标从某元素移开。

    4

    1

    9

    Yes

    onmouseover

    鼠标移到某元素之上。

    3

    1

    9

    Yes

    onmouseup

    鼠标按键被松开。

    4

    1

    9

    Yes

    onreset

    重置按钮被点击。

    4

    1

    9

    Yes

    onresize

    窗口或框架被重新调整大小。

    4

    1

    9

    Yes

    onselect

    文本被选中。

    3

    1

    9

    Yes

    onsubmit

    确认按钮被点击。

    3

    1

    9

    Yes

    onunload

    用户退出页面。

    3

    1

    9

    Yes

    12.3 鼠标/键盘属性

    返回当事件被触发时,鼠标/键盘当时的属性值。

    描述

    IE

    F

    O

    W3C

    altKey

    返回当事件被触发时,"ALT" 是否被按下。

    6

    1

    9

    Yes

    button

    返回当事件被触发时,哪个鼠标按钮被点击。

    6

    1

    9

    Yes

    clientX

    返回当事件被触发时,鼠标指针的水平坐标。

    6

    1

    9

    Yes

    clientY

    返回当事件被触发时,鼠标指针的垂直坐标。

    6

    1

    9

    Yes

    ctrlKey

    返回当事件被触发时,"CTRL" 键是否被按下。

    6

    1

    9

    Yes

    metaKey

    返回当事件被触发时,"meta" 键是否被按下。

    No

    1

    9

    Yes

    relatedTarget

    返回与事件的目标节点相关的节点。

    No

    1

    9

    Yes

    screenX

    返回当某个事件被触发时,鼠标指针的水平坐标。

    6

    1

    9

    Yes

    screenY

    返回当某个事件被触发时,鼠标指针的垂直坐标。

    6

    1

    9

    Yes

    shiftKey

    返回当事件被触发时,"SHIFT" 键是否被按下。

    6

    1

    9

    Yes

    12.4 标准Event属性

    下面列出了 2 级 DOM 事件标准定义的属性。

    描述

    IE

    F

    O

    W3C

    bubbles

    返回布尔值,指示事件是否是起泡事件类型。

    No

    1

    9

    Yes

    cancelable

    返回布尔值,指示事件是否可拥可取消的默认动作。

    No

    1

    9

    Yes

    currentTarget

    返回其事件监听器触发该事件的元素。

    No

    1

    9

    Yes

    eventPhase

    返回事件传播的当前阶段。

    Yes

    target

    返回触发此事件的元素(事件的目标节点)。

    No

    1

    9

    Yes

    timeStamp

    返回事件生成的日期和时间。

    No

    1

    9

    Yes

    type

    返回当前 Event 对象表示的事件的名称。

    6

    1

    9

    Yes

    12.5 标准Event方法

    下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

    描述

    IE

    F

    O

    W3C

    initEvent()

    初始化新创建的 Event 对象的属性。

    No

    1

    9

    Yes

    preventDefault()

    通知浏览器不要执行与事件关联的默认动作。

    No

    1

    9

    Yes

    stopPropagation()

    不再派发事件。

    No

    1

    9

    Yes

    每个载入浏览器的 HTML 文档都会成为 Document 对象。

    Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

    提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

    13. Style对象

    13.1 Style 对象

    Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

    使用 Style 对象属性的语法:

    document.getElementById("id").style.property="值"

    13.2 Style 对象的属性

    Reffered:

    中文:http://www.w3school.com.cn/htmldom/index.asp

    英文:http://www.w3schools.com/jsref/default.asp

    DOM级别:http://baike.baidu.com/view/14806.htm

  • 相关阅读:
    URI 和 URL
    TCP/IP协议
    TCP/IP 通信传输流
    Python 之 函数可变参数和关键字参数
    Python 之装饰器decorator
    Python 之进程
    Android
    Redis持久化(persistence)
    python正则表达式
    selenium+python定位iframe元素
  • 原文地址:https://www.cnblogs.com/zhcncn/p/3078071.html
Copyright © 2020-2023  润新知