Jump to content
Sign in to follow this  

Poor man's (pseudo) DOM viewer

Recommended Posts


simply an experiment very primitive
a draft clumsy script to "see" the elements of a web page by highlighting them (when possible) with a colored border on the browser.
Also shown is the command to use to create a reference to that element (with
_IETagNameAllGetCollection() )
markup elements of the page are displayed in a TreeView (not in a hierarchical form, but clustered by tag)
in the current state is not very useful, but it may be an idea to develop

#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>
#include <GUITreeView.au3>
#include <StaticConstants.au3>
#include <IE.au3>
#include <array.au3>
Local $oIE = _IECreate("www.autoitscript.com") ; <-- page to analize
Local $oElements = _IETagNameAllGetCollection($oIE)
Local $totElements = @extended
Global $DOM[$totElements][2]
$Index = 0
For $oElement In $oElements
    $DOM[$Index][0] = $Index
    $DOM[$Index][1] = $oElement.tagname
    $Index += 1
$Tags = _ArrayUnique($DOM, 1) ; <---- changed second parameter from 2 to 1. (now parameter 2 of _ArrayUnique is 0 based)
Local $TreeElements[$totElements + $Tags[0] + 1]
$TreeElements[0] = $totElements + $Tags[0]
$Index = 1
For $i = 1 To UBound($Tags) - 1 ; element 0 is a total
    $Temp = _ArrayFindAll($DOM, $Tags[$i], 0, 0, 0, 0, 1)
    $TreeElements[$Index] = "#" & $Tags[$i]
    $Index += 1
    For $ii = 0 To UBound($Temp) - 1
        $TreeElements[$Index] = " #" & $DOM[$Temp[$ii]][0]
        $Index += 1
$hMain = GUICreate("DOM elements", 500, 190)
$Edit1 = GUICtrlCreateEdit("", 110, 6, 385, 150)
$Label1 = GUICtrlCreateLabel("", 110, 160, 385, 25)
$Btn_right = GUICtrlCreateButton("item info", 6, 160, 99, 25)
While 1
    $Msg = GUIGetMsg()
    Switch $Msg
        Case $GUI_EVENT_CLOSE
        Case $Btn_right
            $TreeItem = _GUICtrlTreeView_GetText($hTree, _GUICtrlTreeView_GetSelection($hTree))
            If StringRegExp($TreeItem, "^([0-9]*(\.[0-9]+){1}|[0-9]+(\.[0-9]*){0,1})$", 0) Then
                $obj = _IETagNameAllGetCollection($oIE, $TreeItem)
                GUICtrlSetData($Edit1, "$obj = _IETagNameAllGetCollection($oIE, " & $TreeItem & ")" & @CRLF & @CRLF & $obj.outerhtml)
                GUICtrlSetData($Label1, "$obj = _IETagNameAllGetCollection($oIE, " & $TreeItem & ")")
                $style_save = $obj.style.border
                For $x = 1 To 5
                    $obj .style.setAttribute('border', '5px solid red')
                    $obj .style.setAttribute('border', $style_save)
                GUICtrlSetData($Edit1, $TreeItem)
                GUICtrlSetData($Label1, $TreeItem)
Func Tree_SetData()
    Dim $aTree = $TreeElements
EndFunc   ;==>Tree_SetData
Func Tree_Display($aTree)
    Dim $hNode[50]
    For $i = 1 To $aTree[0]
        $line = StringStripCR($aTree[$i])
        $level = StringInStr($line, "#")
        If $level = 0 Then ExitLoop
        If $level = 1 Then
            $hNode[$level] = _GUICtrlTreeView_Add($hTree, 0, StringMid($line, $level + 1))
            $hNode[$level] = _GUICtrlTreeView_AddChild($hTree, $hNode[$level - 1], StringMid($line, $level + 1))
EndFunc   ;==>Tree_Display


portions of code to populate the TreeView are from >this post (sorry link broken by forum upgrade)


adapted to new versions of AutoIt
now parameter 2 of _ArrayUnique is 0 based. On older versions it was 1 based instead.

Edited by Chimp

small minds discuss people average minds discuss events great minds discuss ideas.... and use AutoIt....

Share this post

Link to post
Share on other sites
Pretty good idea.
In fact, this morning I had a similar idea.
For now, I focus on that:
Going back to your idea or in this case, the TreeView, you should present the items in a somewhat more hierarchical?
That at least I had plans.

Signature beginning:   Wondering who uses AutoIT and what it can be used for ?
* GHAPI UDF - modest begining - comunication with GitHub REST API Forum Rules *
ADO.au3 UDF     POP3.au3 UDF     XML.au3 UDF    How to use IE.au3  UDF with  AutoIt v3.3.14.x  for other useful stuff click the following button


Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind. 

My contribution (my own projects): * Debenu Quick PDF Library - UDF * Debenu PDF Viewer SDK - UDF * Acrobat Reader - ActiveX Viewer * UDF for PDFCreator v1.x.x * XZip - UDF * AppCompatFlags UDF * CrowdinAPI UDF * _WinMergeCompare2Files() * _JavaExceptionAdd() * _IsBeta() * Writing DPI Awareness App - workaround * _AutoIt_RequiredVersion() * Chilkatsoft.au3 UDF * TeamViewer.au3 UDF * JavaManagement UDF * VIES over SOAP * WinSCP UDF * GHAPI UDF - modest begining - comunication with GitHub REST APIErrorLog.au3 UDF - A logging Library

My contribution to others projects or UDF based on  others projects: * _sql.au3 UDF  * POP3.au3 UDF *  RTF Printer - UDF * XML.au3 UDF * ADO.au3 UDF SMTP Mailer UDF * Dual Monitor resolution detection * * 2GUI on Dual Monitor System * _SciLexer.au3 UDF *

Useful links: * Forum Rules * Forum etiquette *  Forum Information and FAQs * How to post code on the forum * AutoIt Online Documentation * AutoIt Online Beta Documentation * SciTE4AutoIt3 getting started * Convert text blocks to AutoIt code * Games made in Autoit * Programming related sites * Polish AutoIt Tutorial * DllCall Code Generator * 

Wiki: Expand your knowledge - AutoIt Wiki * Collection of User Defined Functions * How to use HelpFile * Good coding practices in AutoIt * 

IE Related:  * How to use IE.au3  UDF with  AutoIt v3.3.14.x * Why isn't Autoit able to click a Javascript Dialog? * Clicking javascript button with no ID * IE document >> save as MHT file * IETab Switcher (by LarsJ ) * HTML Entities * _IEquerySelectorAll() (by uncommon) * IE in TaskScheduler

I encourage you to read: * Global Vars * Best Coding Practices * Please explain code used in Help file for several File functions * OOP-like approach in AutoIt * UDF-Spec Questions *  EXAMPLE: How To Catch ConsoleWrite() output to a file or to CMD *

"Homo sum; humani nil a me alienum puto" - Publius Terentius Afer
"Program are meant to be read by humans and only incidentally for computers and execute" - Donald Knuth, "The Art of Computer Programming"
:naughty:  :ranting:, be  :) and       \\//_.

Anticipating Errors :  "Any program that accepts data from a user must include code to validate that data before sending it to the data store. You cannot rely on the data store, ...., or even your programming language to notify you of problems. You must check every byte entered by your users, making sure that data is the correct type for its field and that required fields are not empty."

Signature last update: 2018-10-31

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this