[COM] 자바스크립트 / DOM / HTML 웹페이지 컨트롤

Basic Webpage Controls with JavaScript / COM 

Accessing WebPage Contents - HTML DOM 
To understand how to use Javascript to control a webpage, you need a general understanding of the HTML DOM. It is similar to a "map" or "heirarchy" of the Webpage, as shown here: 
*Image is from this website, which is another great resource for learning Javascript. 
 
In the image above, note the document object - you will be using this object quite often. To access the Webpage, you will need to navigate through the HTML DOM. Here are some simple ways to do this:

• Object Name & Index 
  Say you want to get the value of the 1st element in the 1st form, which will be the Search for Keywords Input Box. The path would look like this (a collection of objects starts at 0):

  Code:

  document.forms[0].elements[0].value

  Now if you want to show the value of the element in a pop-up, simply put this javascript in your URL Address bar and hit enter:

  Code:

  javascript: alert(document.forms[0].elements[0].value) MsgBox % pwb.document.forms[0].elements[0].value MsgBox % COM_Invoke(pwb, "document.forms[0].elements[0].value")

  
  
• Object's Name / ID Attribute 
  You can also use the objects name or ID. For example, the 1st forms name is SearchForm, with its 1st elements name being search_keywords. The following javascript fed throught the address bar would produce the same results:

  Code:

  javascript: alert(document.SearchForm.search_keywords.value) MsgBox % pwb.document.SearchForm.search_keywords.value MsgBox % COM_Invoke(pwb, "document.SearchForm.search_keywords.value")

  Or if you only know the elements name is search_keywords, you could display the value of that element using all, which references all the elements on the webpage:

  Code:

  javascript: alert(document.all.search_keywords.value) MsgBox % pwb.document.all.search_keywords.value MsgBox % COM_Invoke(pwb, "document.all.search_keywords.value")

  
  
• getElement Methods 
  If you want to get an element(s) based on limited criteria, you can use the following 3 methods:
  • getElementById(id) - returns a reference to the first object with the specified ID 
    
  • getElementsByName(name) - Returns a collection of objects with the specified name 
    
  • getElementsByTagName(tagname) - Returns a collection of objects with the specified tagname
  The following example will display the value of the Search for Author Input Box, which is the 4th element on the webpage with an INPUT Tag: 
  (Note - the item number may be dynamic)

  Code:

  javascript: alert(document.getElementsByTagName('input')[3].value) MsgBox % pwb.document.getElementsByTagName("input")[3].value MsgBox % COM_Invoke(pwb, "document.getElementsByTagName[input].item[3].value")