Poor man's (pseudo) DOM viewer

[Gianni]

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

expandcollapse popup

#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
Next
$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
    Next
Next
$hMain = GUICreate("DOM elements", 500, 190)
$hTree = GUICtrlCreateTreeView(6, 6, 100, 150, BitOR($TVS_HASBUTTONS, $TVS_HASLINES, $TVS_LINESATROOT, $TVS_DISABLEDRAGDROP, $TVS_SHOWSELALWAYS), $WS_EX_CLIENTEDGE)
$Edit1 = GUICtrlCreateEdit("", 110, 6, 385, 150)
$Label1 = GUICtrlCreateLabel("", 110, 160, 385, 25)
$Btn_right = GUICtrlCreateButton("item info", 6, 160, 99, 25)
Tree_SetData()
GUISetState()
While 1
    $Msg = GUIGetMsg()
    Switch $Msg
        Case $GUI_EVENT_CLOSE
            Exit
        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')
                    Sleep(100)
                    $obj .style.setAttribute('border', $style_save)
                Next
            Else
                GUICtrlSetData($Edit1, $TreeItem)
                GUICtrlSetData($Label1, $TreeItem)
            EndIf
    EndSwitch
    Sleep(10)
WEnd
Func Tree_SetData()
    Dim $aTree = $TreeElements
    Tree_Display($aTree)
EndFunc   ;==>Tree_SetData
Func Tree_Display($aTree)
    Dim $hNode[50]
    _GUICtrlTreeView_BeginUpdate($hTree)
    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))
        Else
            $hNode[$level] = _GUICtrlTreeView_AddChild($hTree, $hNode[$level - 1], StringMid($line, $level + 1))
        EndIf
    Next
    _GUICtrlTreeView_EndUpdate($hTree)
EndFunc   ;==>Tree_Display

edit:

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

edit2:

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

Edited July 9, 2015 by Chimp

[mLipok]

Pretty good idea.

 

In fact, this morning I had a similar idea.

 

For now, I focus on that:

"'?do=embed' frameborder='0' data-embedContent>>"

 

 

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.