Level 0 DOM 简介


在浏览器开始支持 JavaScript 时,存在一组对象提供有限的功能,在当时 Netscape Navigator 与 Internet Explorer 大战的年代,两个浏览器在这组对象上有些交集的部份,这些交集的部份被留存到现在,并在一些主流的浏览器中仍有支持。这组对象称为浏览器对象模型(Browser Object Model)或非正式地称为 Level 0 DOM,因为它在 DOM(Document Object Model)标准化前就已存在,而不是真有有文件规范 Level 0 DOM。

这组对象从全局对象window开始,具有以下的特性阶层关系:

window|
      |navigator
      |location
      |frames
      |screen
      |history
      |document
              |forms
              |links
              |anchors
              |images
              |all
              |cookie

这些对象在一般 JavaScript 的书中都有介绍,使用上虽然不难,但有些会有跨浏览器的问题(以下列的参考链结,大致有标出适用哪些浏览器),以下仅作每个对象的简介。

window对象代表浏览器窗口本身,为Window的实例,是 JavaScript 以浏览器为客户端时的顶层对象,其中像是alertconfirmpromptsetTimeoutclearTimeoutsetIntervalclearInterval等函数,都是以window作为命名空间对象的函数。

window本身也拥有一些控制窗口的方法,例如openmoveToscrollscrollTo等。可以在〈Window Object〉 查询这些函数或方法的使用方式。

window.navigator代表了浏览器,为Navigator的实例,可以从这个对象上获取浏览器本身的信息,通常是为了进行所谓浏览器侦测才会使用这个对象,不过这个对象获取的信息并非完全可靠,因为有的浏览器提供有选项或者有工具可变造这些信息。你可以在〈Navigator Object〉查询这个对象上有哪些信息可以获取。

window.location代表了窗口目前所显示页面的 URL,是Location的实例,可以从这个对象上获取目前页面的 URL 相关信息,也有reloadreplace方法,可以重新加载页面或取代页面。可在〈Location Object〉 查询这个对象的相关内容。也有个window.document.location,与window.location是同一个对象。

window.frames是目前窗口中拥有的框架,以类数组的HTMLCollection对象组织这些对象,索引位置是框架在窗口中出现的顺序,如果框架有设定idname属性,也可以使用[]搭配名称来获取框架,每个获取的框架都是Window的实例。在〈安全限制〉 中就有个例子使用了window.frames

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>

    <iframe id="page" name="page" src="https://openhome.cc"></iframe>
    <span id="console"></span>

<script type="text/javascript">
    window.onload = function() {    
        alert(window.frames['page'].document.body.innerHTML);
    };
</script>  

</body>
</html>

window.screen对象包括了目前窗口所关联的屏幕信息,像是宽、高、颜色深度等,为Screen的实例,可以在〈Screen Object〉查询各个特性。

window.history则包括了浏览器浏览历史,为History实例,基于安全与隐私,你无法获取浏览历史,但可以有backforwardgo等方法,指定前进、后退至哪个历史页面,像是回到上一面、下一页的功能,想使用 JavaScript 控制,就可以用这个对象,可查询〈History Object〉了解细节。

window.documentDocument的实例,代表整份 HTML 文件,这个对象上提供一组群集(Collection)对象,它们都是HTMLCollection的实例,这些群集对象都有个特征,本身可以用[]搭配索实参字来访问,如果相对应的标签有idname属性,也可以使用[]搭配名称来访问,或是搭配点算子与名称来访问(先前介绍的window.frames也有这种特征)。

HTMLCollection规范的是使用item方法搭配索引来获取元素,或使用namedItem方法搭配idname属性来获取元素,不过在 JavaScript 实现中,可以且通常使用[]搭配索引或名称来获取元素。)

举个来说,如果有个网页如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>

    <form name="login">
        User: <input type="text" name="user" value="guest"><br>
        Password: <input type="password" name="passwd" value="guest">
        <button type="submit">Submit<button/>
    </form>

</body>
</html>

想要获取文件中namelogin的表单,有几种方式:

document.forms[0]         // 文件中第一个表单,索引为 0
document.forms['login']
document.forms.login

formslinksanchorsimages等,都可以用这种方式来获取。

在透过document.forms获取某个表单元素之后,如果想获取其下的子元素,可以使用elements来获取,一样可以使用索引或name搭配[]来获取,也可以透过.运算符来获取。例如,想获取nameuser的输入文本框,可以如下:

document.forms['login'].elements[0]      // 表单中第一个元素
document.forms['login'].elements['user']
document.forms['login'].elements.user

表单比较特别,如果你的表单有name属性,而当中的元素也有name属性,则可以有个很方便的访问方式。例如若要获取login表单的user字段,则可以如下:

document.login.user

由于输入字段有个value属性,所以要获取字段值就是:

document.login.user.value

只要你获取标签元素,标签上的某个属性,基本上可以在对象上使用相对应的特性来获取,除了一些保留字之外,例如class属性要用className特性名称来获取,因为class是保留字,而<label>for属性要用htmlFor特性来获取。

超链结与锚点都是使用<a>来定义,差别在于超链结使用href属性,而锚点使用name属性,document.linksdocument.anchors则分别表示超链结与锚点元素。

documents.images则表示了文件中的所有<img>元素。

document.all代表文件中所有元素,是早期访问文件中所有元素的方式。例如,若文件中某个元素具有name属性值为'element1',则可以透过这种方式来获取:

document.all['element1']

在 DOM 标准化之后,这种写法的作用已经被document.getElementsByName等方法取代了。

documentcookie则允许设定与读取cookie,设定方式是字符串,形式为name=value,每个 name/value 间以分号区隔,获取的也是字符串,你必须自行解析 name/value 对。可以参考〈Cookie〉稍微了解一下 Cookie 的原理。

基于安全性,被标示了HttpOnly属性的 Cookie,无法使用 JavaScript 来读取。


展开阅读全文