Introduction
In the previous entry of this series we looked at ways of creating the Internet Explorer object and how to interact with the elements contained within that particular object using the DOM. In this entry we will look at the various types of HTML element and some examples of how we can access and manipulate these particular elements.
HTML Elements
How do we interact with the different elements that are described within the DOM? The following examples take the most common elements and demonstrate some of the methods that we can use to access and manipulate them.
Links and Buttons
The following link can be accessed through a wide array of differing methods.
<a href=http://www.brownswood.co.uk name="brownslink" id="brlk" >brownswood</a >
document.Links("brlk").click
document.Links("brownslink").click
document.getElementById("brlk").click
document.getElementsByName("brownslink")(0).click
document.all("brownslink").click
document.all("brlk").click
A button can be accessed using some of the methods above. The properties of the button element below are almost identical to those of the link above.
<INPUT type="button" id=brownsBtn name=brownswood value="Click">
document.getElementById("brownsBtn").click
document.getElementsByName("brownswood")(0).click
Text Boxes
A textbox can have both its value read and set.
<INPUT userProp = "Company" type="text" id="Company Name" name="Company Name" value="Test this text box">
There are various ways to change the value of text box.
document.getElementById(“Company Name”).value=“insideSQA”
document.getElementsByName(“name”)(0).value=“insideSQA”
If the properties name and id are not available then the code below can be used to change its value.
Set Elems= document.getElementsByTagName(“INPUT”)
For each elem in Elems
if elem.userProp=“company” then
elem.value=“insideSQA”
Exit For
end if
Next
List Box
A list box usually contains a number of options that a user can select.
<SELECT size="1" name=“demo_ComboBox">
<option value=“Value 1">Value 1</option>
<option value=“Value 2" >Value 2</option>
<option value=“Value 3" >Value 4</option>
</SELECT>
Set oList=document.getElementsByName(“company type”).item(0)
optionsCount=oList.Options.length
optionOneValue=oList.Options(0).value
optionTxt=oList.Options(0).text
To select one of the options the code below can be used
oList.Options(0).Selected = true
oList.value="value 2"
Checkbox
A checkbox is either checked or unchecked.
<input type="checkbox" name="Company Checkbox">
Set oChkBox=document.getElementsByName("Company Checkbox").item(0)
oChkBox.Checked=True
Radio Button
The radio button element is an array of options where only one option can be selected.
Radio button elements are grouped using the same name.
<input type="radio" name="Company Type" value="Public" checked="checked" />
<input type="radio" name="Company Type" value="Private" />
A radio button is selected by assigning the required value to the object .
Set oRadio=document.getElementsByName(“Company Type”).item(0)
oRadio.checked=True 'This will select Public
oRadio.value="Private" 'This will select Private even if the Publci object node is being pointed to.
Tables
Tables are amongst the most difficult but useful of elements to access. When tables become nested it becomes necessary to work with the child objects of these tables, and sometimes its difficult to identify how many table structures a document contains. A great tool for element identification is the DOM inspector from Mozilla http://www.mozilla.org/projects/inspector/. With this tool it is possible to view all elements in a document, rather like an object spy that you find with a tool like HP's Quick Test Professional.
The table object provides two collections
cells – Access the cells of the table
rows – Access the rows of the table. The rows also allow access to a cells collection to access particular cells present in the row.
Row1 cell1 | Row1 cell1 |
Row2 cell1 | Row2 cell1 |
Access first row and the first column.
Set oTable=document.getElementById(“companyTable”)
oTable.rows(0).cells(0).outerText
oTable.cells(0).outerText
Access second row and the first column.
oTable.rows(1).cells(0).outerText
oTable.cells(2).outerText
Counting Cells and rows
oTable.rows.length
oTable.cells.length
oTable.rows(0).cells.length
Coming up..
Now that the basic concepts are covered we can now look at putting together the various parts to automate a web application. The final part of this series will demonstrate the possibilities of automating html objects within the Internet Explorer Object.
