Browsers have provided a set of objects with limited functions since supporting JavaScript. In browser wars of Netscape Navigator and Internet Explorer, they provide different sets with respective features. The intersection of these two sets keeps alive today; modern browsers still support them. These objects are known as Browser Object Model, or informally called Level 0 DOM because of its existence before the standardization of DOM. There's not a real specification of Level 0 DOM.
The hierarchy of these objects, starting from the global window object, is as follow:
window|Most JavaScript books include the introduction to them. They are easy, except for some cross-browser problems. The hyperlinks in the below text provide basic information about their browser compatibility. I'll do a short introduction to these objects.
|navigator
|location
|frames
|screen
|history
|document
|forms
|links
|anchors
|images
|all
|cookie
The window object, a Window instance, represents the browser window; it's the top level object when a browser is the client of JavaScript. Several functions use window as their namespace, such as alert, confirm, prompt, setTimeout, clearTimeout, setInterval, clearInterval, etc. It also provides several functions to control the window, such as open, moveTo, scroll, scrollTo, etc. You may find how to use these functions in Window.
The window.navigator, a Navigator instance, represents the browser. It provides basic browser information. Usually, only browser detection adopts these objects; but, the information is not reliable because some browsers or tools provide options to alter that. You may find more information about windows.navigator in Navigator.
The window.location, a Location instance, represents the URL of the displayed page. It provides information about the URL. It also has the reload and replace function, used to reload and replace the page. Location provides more information about this object. There's also a window.document.location object; it refers the same object as window.location.
The window.frames object represents frames owned by the current window. It's an array-like HTMLCollection instance; the indices describe the sequence of frames in the window. If a frame has an id or name attribute, you can access it through the [] operator with a string name. In Security, you've seen such an example.
<html>The window.screen object, a Screen instance, contains screen information about the user's screen, such as width, height, color depth and so on. You can find more information in Screen.
<head>
<script type="text/javascript">
window.onload = function() {
alert(window.frames['page'].document.body.innerHTML);
};
</script>
</head>
<body>
<iframe id="page" name="page"
src="https://openhome.cc"></iframe>
</body>
</html>
The window.history object contains the browser history. Due to the security and privacy of the users, you cannot access the browser history directly; yet you can use functions, such as back, forward, go, etc, to load the URL in the history list, just the same as clicking back or forward in the browser. If you want to use JavaScript to load pages in the history list, this object is feasible. You can find its details in History.
The windows.document object, a Document instance, represents the HTML document. It provides a set of collections; all are HtmlCollection instances. These collections share some common features: you can access them through numeric indices and []. If the corresponding tag has a id or name attribute, you can use the [] or dot operator with the string name to access it (This is the same with the windows.frames) .
(The HTMLCollection specification says that an item function with an index is used to access an element; or use the nameItem function with the id or name attribute to access it. In JavaScript implementations, however, it's common to use [] with an index or name to access an element. )
To illustrate, if a document is as follow:
<html>There are several ways to retrieve the form whose name attribute is "login".
<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>
document.forms[0] // It's the first form; the index is 0.Objects, such as forms, links, anchors and images, are all accessible in the same way.
document.forms['login']
document.forms.login
After getting a form element through document.forms, if you want to access its child elements, you can use the elements object. Likewise, you can use index or name with the [] or dot operator. For example, getting the input element whose name attribute is "user" can be as follows:
document.forms['login'].elements[0] // the first element in the formThe form object is a special case. If you form has the name attribute, and its child element has that too, there's a convenient way to access it. For example, obtaining the "user" input of the "login" form can be as follow:
document.forms['login'].elements['user']
document.forms['login'].elements.user
document.login.userThe input element has a value attribute, so you can get its value as follow:
document.login.user.valueAs long as you've got an element, you can access the tag attribute through the corresponding property of the element; except for some keyword. For instance, you should use the className property to access the class attribute because class is a keyword. Likewise, use the htmlFor property to access the for attribute of the label tag.
The a tag may define hyperlinks or anchors. The difference is that a hyperlink uses the href attribute, and an anchor uses the name attribute. The document.links and document.anchors represent hyperlink and anchor elements respectively.
The documents.images represents all img elements in the document.
The document.all represents all elements. It's a legacy way to access all elements in the document. For example, an element whose name attribute is "element1" can be accessed as follow:
document.all['element1']This way has been replaced by document.getElementsByName of the DOM specification.
The document.cookie allows you to get or set cookies. Setting cookies needs a string of form key=value. Each key=value pair is separated by a semicolon. That is; the document.cookie is a string containing a semicolon-separated list of cookies so you need to parse it by yourself to get a key=value pair. You can take a look at Cookie for details.