Common DOM Methods & Properties

Every HTML element in a Web page is a scriptable object in the object model, with its own set of properties, methods, and events. To enable access to these objects, Internet Explorer creates a top-level document object for each HTML document it displays. When you use the Object property on a Web page object in your test or component, you actually get a reference to this DOM object. This document object represents the entire page. From this document object, you can access the rest of the object hierarchy by using properties and collections.

Following are the most useful document properties and methods available through the Web .Object property:

Properties
  • activeElement Property - Retrieves the object that has the focus when the parent document has focus.
  • cookie Property - Sets or retrieves the string value of a cookie.
  • documentElement Property - Retrieves a reference to the root node of the document.
  • readyState Property - Retrieves a value that indicates the current state of the object.
  • URL Property - Sets or retrieves the URL for the current document.
  • URLUnencoded Property - Retrieves the URL for the document, stripped of any character encoding.
Collections
  • all - Returns a reference to the collection of elements contained by the object.
  • frames - Retrieves a collection of all window objects defined by the given document or defined by the document associated with the given window.
  • images - Retrieves a collection, in source order, of img objects in the document.
  • links - Retrieves a collection of all objects that specify the HREF property and all area objects in the document.
Methods
  • getElementById Method - Returns a reference to the first object with the specified value of the ID attribute.
  • getElementsByName Method - Retrieves a collection of objects based on the value of the NAME attribute.
  • getElementsByTagName Method - Retrieves a collection of objects based on the specified element name.

Note that some of these properties are also provided by QuickTest Test Objects. For example, it is possible to access the cookies set by a Web page both through the cookie property in the DOM, and through the GetCookies method provided by the Browser Test Object.

activeElement Property

Retrieves the object that has the focus when the parent document has focus.
You can get the source index of the active element (object that has focus) on the page by doing the following:

CurrentSourceInd = Browser("Browser").

Page("Page").Object.activeElement.sourceIndex

Now you can query the source index of any object on the page by doing the following:

SrcIdx =

Browser("Browser").Page("Page").WebEdit("q").GetROProperty("source_index")

You can then compare the two values to see if the WebEdit is the active element on the page that has focus. If the source index of the WebEdit is the same as the source index of the activeElement, then the WebEdit is the object that has focus.

cookie Property

A cookie is a small piece of information stored by the browser that applies to a Web page. Each cookie can store up to 20 name=value; pairs called crumbs, and the cookie is always returned as a string of all the cookies that apply to the page. This means that you must parse the string returned to find the values of individual cookies.

The following is an example which retrieves the value of the cookie for a specified Web page.

strCookie = Browser("Browser").Page("Page").Object.cookie

Note: You can also use the Browser Test Object's GetCookies method to retrieve cookies for a specific URL. For example:

msgbox Browser("Mercury").GetCookies("http://finance.yahoo.com")

documentElement Property

The documentElement property is a reference to the root node of the document. It is read-only, and has no default value. The root node of a typical HTML document is the html object.

This example uses the documentElement property to retrieve the innerHTML property of the entire document.

msgbox Browser("Browser").Page("Page").Object.documentElement.innerHTML

readyState Property

The readyState property is a string value a string value that indicates the current state of the object.

Note that the readyState property is applicable to any DOM element. Both examples below are equally valid, and both will display the readyState of the object to which they belong

msgbox Browser("Browser").Page("Page").Object.readyState

and

msgbox Browser("Browser").Page("Page").Link("Link").Object.readyState

An object's state is initially set to uninitialized, and then to loading. When data loading is complete, the state of the link object passes through the loaded and interactive states to reach the complete state.

URL Property

The URL property sets or retrieves the URL for the current document. This property is valid for Page and Frame objects.

The following example displays the URL for the Web page that is currently open in the browser:

msgbox Browser("Browser").Page("Page").Object.URL

URLUnencoded Property

The only difference between the URL property and the URLUnencoded property is that the URLUnencoded property strips the URL of any character codings (such as %20 for spaces, etc.)

all, frames, images, and links Collections

Return a reference to the collection of elements contained by the object.

The all collection contains all the elements in the specified object. The frames property contains objects of type window (frame). The images property contains objects of type of img (image), and the links collections contains objects of types HREF and area.

    • length property - Sets or retrieves the number of objects in a collection.
    • item method - Retrieves an object from the all collection or various other collections.
    • namedItem method - Retrieves an object or a collection from the specified collection.

There are additional methods available for accessing some of the collections. For example, the images collection provides the tags method, which can be used to retrieve a collection of objects with a specified tag name. For more information, refer to http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/doc_object.asp.

The following example loops through all the INPUT tags, and displays a message indicating the number of tags checked:

Set inputs = Browser("Browser").Page("Page").Object.all.tags("INPUT")
'Loop over all inputs in this collection and get the 'checked' value:
       For Each inputBtn In inputs
              If inputBtn.checked Then
                     checkedCount = checkedCount + 1
              End If
       Next

MsgBox checkedCount & " checkboxes are checked."

The following example displays a message indicating the number of frames in the specified Web page:

msgbox Browser("Mercury Interactive ").Page("Yahoo!").Object.frames.length

getElementById Method

The getElementById method returns a reference to the first object with the specified value of the ID attribute.
The following example sets the value of obj to the first element in the page that has an ID of "mark":

Set obj = Browser("Browser").Page("Yahoo!").Object.getElementByID("mark")

getElementsByName and getElementsByTagName Methods

The getElementsByName and getElementsByTagName methods can be used just like getElementById except that they return a collection of objects (as opposed to getElementById, which returns only the first matching object it finds.)

For example, the following script line will display a message indicating the number of images on the page - image objects have an "IMG" tag.

msgbox Browser("Mercury Interactive").Page("Yahoo!").Object.getElementsByTagName "IMG").length

 

PreviousNext