querySelector/querySelectorAll examples

Get help with using AutoHotkey and its commands and hotkeys
User avatar
jeeswg
Posts: 6904
Joined: 19 Dec 2016, 01:58
Location: UK

querySelector/querySelectorAll examples

17 Feb 2019, 20:00

- 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
Last edited by jeeswg on 23 Mar 2019, 11:22, edited 1 time in total.
homepage | tutorials | wish list | fun threads | donate
WARNING: copy your posts/messages before hitting Submit as you may lose them due to CAPTCHA
User avatar
nnnik
Posts: 4370
Joined: 30 Sep 2013, 01:01
Location: Germany

Re: querySelector/querySelectorAll examples

18 Feb 2019, 08:35

They are straightforward CSS selectors - if you learn CSS they will be very easy to use.
Recommends AHK Studio
swagfag
Posts: 3240
Joined: 11 Jan 2017, 17:59

Re: querySelector/querySelectorAll examples

18 Feb 2019, 11:06

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/
User avatar
jeeswg
Posts: 6904
Joined: 19 Dec 2016, 01:58
Location: UK

Re: querySelector/querySelectorAll examples

27 Feb 2019, 15:11

- 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
homepage | tutorials | wish list | fun threads | donate
WARNING: copy your posts/messages before hitting Submit as you may lose them due to CAPTCHA
User avatar
Tigerlily
Posts: 283
Joined: 04 Oct 2018, 22:31

Re: querySelector/querySelectorAll examples

27 Feb 2019, 16:43

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.
Last edited by Tigerlily on 27 Feb 2019, 17:28, edited 1 time in total.
-TL
safetycar
Posts: 125
Joined: 12 Aug 2017, 04:27

Re: querySelector/querySelectorAll examples

27 Feb 2019, 17:26

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
Posts: 125
Joined: 12 Aug 2017, 04:27

Re: querySelector/querySelectorAll examples

27 Feb 2019, 17:55

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.
User avatar
kczx3
Posts: 957
Joined: 06 Oct 2015, 21:39

Re: querySelector/querySelectorAll examples

03 Mar 2019, 20:52

safetycar wrote:
27 Feb 2019, 17:55
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
User avatar
Tigerlily
Posts: 283
Joined: 04 Oct 2018, 22:31

Re: querySelector/querySelectorAll examples

14 Mar 2019, 23:14

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
}
-TL
User avatar
Tigerlily
Posts: 283
Joined: 04 Oct 2018, 22:31

Re: querySelector/querySelectorAll examples

14 Mar 2019, 23:16

jeeswg wrote:
17 Feb 2019, 20:00
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.
-TL

Return to “Ask For Help”

Who is online

Users browsing this forum: Bing [Bot], BushMange, CEA6597, VACO BenQ, w0z and 175 guests