querySelector/querySelectorAll examples

[jeeswg]

- querySelector and querySelectorAll can be fiddly to use, so any good examples could be useful.
- I will collect some here, and welcome anyone else to post some.

Code: Select all

;WBGet function - AutoHotkey Community
;https://autohotkey.com/boards/viewtopic.php?f=6&t=39869

q:: ;internet explorer - AHK forum logout
WinGet, hWnd, ID, A
oWB := WBGet("ahk_id " hWnd)
oElt := oWB.document.querySelector(".nav-link[title=Logout]") ;class: nav-link, title: Logout
if IsObject(oElt)
	oElt.click()
oWB := oElt := ""
return

;==================================================

w:: ;internet explorer - AHK forum - count elements
WinGet, hWnd, ID, A
oWB := WBGet("ahk_id " hWnd)
oElts := oWB.document.querySelectorAll(".nav-link") ;class: nav-link
MsgBox, % oElts.length
oElts := oWB.document.querySelectorAll("[title=Logout]") ;title: Logout
MsgBox, % oElts.length
oElts := oWB.document.querySelectorAll(".nav-link[title=Logout]") ;class: nav-link, title: Logout
MsgBox, % oElts.length

;get tags/classes for elements
oElts := oWB.document.querySelectorAll("[title=Logout]") ;title: Logout
Loop, % oElts.length
{
	MsgBox, % oElts[A_Index-1].tagName "`r`n" oElts[A_Index-1].className
}

;these are equivalent (first matching element):
;oElt := oWB.document.querySelector(vCriteria)
;oElt := oWB.document.querySelectorAll(vCriteria).0
MsgBox, % oWB.document.querySelector(".nav-link[title=Logout]").tagName
MsgBox, % oWB.document.querySelectorAll(".nav-link[title=Logout]").0.tagName

oWB := oElts := ""
return

;==================================================

- Links:
[has a QUERYSELECTOR / QUERYSELECTORALL section]
jeeswg's Internet Explorer and HTML tutorial - AutoHotkey Community
https://autohotkey.com/boards/viewtopic.php?f=7&t=31766
Internet Explorer: JavaScript examples - AutoHotkey Community
https://autohotkey.com/boards/viewtopic.php?f=6&t=60377

- Links (specific examples):
shortest way to refer to a webpage element by tag/class/id - AutoHotkey Community
https://autohotkey.com/boards/viewtopic.php?f=5&t=32436&p=151977#p151977
Internet Explorer: focus input field - AutoHotkey Community
https://autohotkey.com/boards/viewtopic.php?f=6&t=59571&p=251483#p251483
Separate QuerySelectorAll Output Into Smaller Pieces, Inside a Loop - AutoHotkey Community
https://autohotkey.com/boards/viewtopic.php?f=5&t=62724&p=267745#p267745

[nnnik]

They are straightforward CSS selectors - if you learn CSS they will be very easy to use.

[swagfag]

yes i dont understand either what the hard part's supposed to be
u literally have 2 methods, one returns an element, the other a collection
all u have to do is read the spec: https://www.w3.org/TR/2018/REC-selectors-3-20181106/

[jeeswg]

- Bit of an anticlimax when I came back and read the 2 posts.
- I was hoping for more difficult examples like the 'focus input field' example by kczx3 listed above:

Code: Select all

oWB.document.querySelector("input:not([type='checkbox']):not([type='hidden']):not([type='submit']):not([type='number']):not([type='button']):not([type='radio'])").select()

- @swagfag: That link makes it look a little daunting.
- I find these links, from my Internet Explorer tutorial, easier:
CSS Selectors Reference
https://www.w3schools.com/cssref/css_selectors.asp
css3 - CSS Selector Clarification: |= vs ^= - Stack Overflow
https://stackoverflow.com/questions/35370441/css-selector-clarification-vs

[Tigerlily]

I found that this query selector example works on some sites, but doesn't retreive the data on other sites.. unsure why.. maybe someone knows?

Code: Select all

FindMetaDescription := html.querySelector("meta[name='description']").getAttribute("content")

Since it became unreliable, I had to resort to this:

Code: Select all

Loop,
	{
	FindMetaDescription := html.getElementsByTagname("meta")[A_Index-1]
		if (FindMetaDescription.name = "description")
			{
				FoundMetaDescription := FindMetaDescription.content						
				break
			}
	}

"html" is a variable representing an HTMLfile object.

The first method worked when I tried to use it via IE COM, but not when using it via WinHttpRequest COM + HTMLfile COM.

[safetycar]

There seem to be some differences between working online and working locally.

If I remember correctly document.defaultView is one of them, trying to work online it retrieves the window object, but on local it doesn't.

Edit: I meant document.defaultView.

[safetycar]

Also there's a common meta tag, similar to this: <meta http-equiv="X-UA-Compatible" content="IE=edge" />

That has many variations and It's likely that the sites that work with querySelector and the ones that don't have a different "content" attribute on that tag.

[kczx3]

Also there's a common meta tag, similar to this: <meta http-equiv="X-UA-Compatible" content="IE=edge" />

That has many variations and It's likely that the sites that work with querySelector and the ones that don't have a different "content" attribute on that tag.

Correct

[Tigerlily]

HI jesswg,

Here is a working querySelectorAll() example that took me some time to figure out. The function contained could be easily modified to get other attributes. One hotkey opens IE via COM, the other hotkey navigates to any URL address currently copied to clipboard - then returns a list of all header tag elements in the order found in the DOM:

Code: Select all

#SingleInstance, force
#NoEnv

#+o::	;	open IE browser, navigate to "about:blank"
wb := ComObjCreate("InternetExplorer.Application")
wb.Visible := true
wb.Navigate("about:blank")
return


#+n::	;	navigate to URL currently found in clipboard
URL := Clipboard
,	selectors := "h1, h2, h3, h4, h5, h6"
,	getInnerText(URL, selectors)
	MsgBox, % nodeListText	
nodeListText := nodeList := nodeInfo := ""
return


getInnerText(URL, selectors) {

global

	wb.Navigate(URL)

	While (wb.readyState != 4) 
			|| (wb.document.readyState != "complete") 
			|| (wb.busy)
			Sleep, 10

	nodeList := wb.document.querySelectorAll(selectors)
	,	countOfElements := nodeList.length

	Loop, % countOfElements
	{
		nodeInfo := StrReplace(StrReplace(StrReplace(nodeList[A_Index - 1].innerText, "`r", ""), "`n", ""), "`t", "")			
		,	nodeListText .=  "[ " A_Index " ] < " nodeList[A_Index - 1].tagName " >  :  " nodeInfo "`n"
	}
	
	return	nodeListText
}

[Tigerlily]

HI jesswg,

Here is a working querySelectorAll() example that took me some time to figure out. The function contained could be easily modified to get other attributes. One hotkey opens IE via COM, the other hotkey navigates to any URL address currently copied to clipboard - then returns a list of the innerText of all header tag elements in the order found in the DOM:

Code: Select all

#SingleInstance, force
#NoEnv

#+o::	;	open IE browser, navigate to "about:blank"
wb := ComObjCreate("InternetExplorer.Application")
,	wb.Visible := true
,	wb.Navigate("about:blank")
return


#+n::	;	navigate to URL currently found in clipboard
URL := Clipboard
,	selectors := "h1, h2, h3, h4, h5, h6"	;	put the selector(s) that you want to get here
,	attribute := "innerText"	;	put the attribute that you want to get here
,	getAttribute(URL, selectors, attribute)
	MsgBox, % nodeListText	
nodeListText := nodeList := nodeInfo := ""
return


getAttribute(URL, selectors) {

global

	wb.Navigate(URL)

	While (wb.readyState != 4) 
			|| (wb.document.readyState != "complete") 
			|| (wb.busy)
			Sleep, 10

	nodeList := wb.document.querySelectorAll(selectors)
	,	countOfElements := nodeList.length

	Loop, % countOfElements
	{
		nodeInfo := StrReplace(StrReplace(StrReplace(nodeList[A_Index - 1][attribute], "`r", ""), "`n", ""), "`t", "")			
		,	nodeListText .=  "[ " A_Index " ] < " nodeList[A_Index - 1].tagName " >  :  " nodeInfo "`n"
	}
	
	return	nodeListText
}

EDIT: I made the function so it is easier to request any attribute without adjusting the fuction, instead adjusting the initial parameters sent to the function.