Using querySelector and querySelectorAll to fetch elements

querySelector
In most cases a querySelector is better than using getElementById. By nature Hype has multiple scenes and specially symbols and this mostly doesn’t work for keeping ID’s unique. Hype offers some workarounds that resulted in the function hypeDocument.getElementbyId abstracting the regular document.getElementById (using a lookup and scene scope) but I generally would advise to use querySelector. Read the following introduction:

https://www.w3schools.com/jsref/met_document_queryselector.asp

Scoping the search to your current scene
document.querySelector is searching from a document level but can also be used from each HTMLNode element, so I always get the node element of my current Hype document to scope querySelector search to only the current document or even better the current scene. In a Hype function this looks like this (given the latest release of Hype):

// Example search assuming element to be a valid scene container:
var searchResultElm = element.querySelector('.whatEver');

// Example search while fetching a scene container first
var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElm = hypeSceneElm.querySelector('.whatEver');

Scoping the search to your current document
In some cases you want to scope to the Hype Document (containing all scenes). In most cases it is recommended limiting the scoping to the scene, though (see above):

// Example search while fetching a document container first
var hypeDocElm = document.getElementById(hypeDocument.documentId());
var searchResultElm = hypeDocElm.querySelector('.whatEver');

querySelectorAll
As querySelector always returns a single (first) found element (or null) there is a second command for finding multiple element called querySelectorAll. It returns a list of (HTML)Nodes rather than a single element. You can easily loop over them once you have them… I won’t repeat the explanation of scoping as this is covered in the above example. This example focuses on the loop over a list of found elements. But first read about querySelectorAll:

https://www.w3schools.com/jsref/met_document_queryselectorall.asp

var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElm = hypeSceneElm.querySelectorAll('.whatEver');

// modern forEach loop
searchResultElm.forEach(function(currentElm, index){

	/* Use the following vars in here:
		currentElm is the current element in the loop
		index is the current index number in the loop
	
	PS: vars can be renamed to your desire, though
	*/
	
});
3 Likes

Hello,

Thanks!
I am not familiar with Hype APIs, and i am reading Hype documentations now. It would be great if the api support to queryseletor woking for custom class names by scripts, so that we can make multiple widgets working with custom class name, or even dynamic changing the class name of an element, is it possible please?

Please read the above introduction to querySelector and also about CSS classes in general (on the web). CSS classes can be used multiple times without the need to be unique. You can assing them in the identity panel in Hype (right next to the ID field). In general there is not only the Hype API as Hype sits ontop of HTML5 containing many API’s. One of them is the notion to search the DOM using CSS selectors as described above.


Visualization of Hype sitting ontop of HTML5 and producing a hypeDocument-Instance through the runtime.

Thanks for fast reply.

The class name seems not be included in hypeDocument.getElementProperty of Hype API.

https://tumult.com/hype/documentation/#api-functions

hypeDocument.getElementProperty(element, propertyName)#

Gets a property of an element based on the Hype runtime’s knowledge. The element argument must be a DOM element, generally obtained by the hypeDocument.getElementById() function.

Valid property names (quotes required):

'top'
'left'
'width'
'height'
'rotateZ'
'scaleX'
'scaleY'
'opacity'
'z-index'

But this thread is great idea to change class of elements dynamically:

I suppose it would be great if changing class is triggered during scrolling a scene/page/document by Intersection Observer or may MutationObserver function? so that class works globally.

Have no idea yet, seems I still need to study more, and thanks anyway.

I am not sure what your writing here so my guess is that you still are learning the concept of queries and the DOM. You can use CSS classes to target elements. The classes don’t need any actually CSS rules. They are just part of the DOM and can be used to target elements. There is a great resource here that explains the DOM:

Back to your assumption that querySelector doesn’t work with hypeDocument.getElementProperty as you can see in the function description you posted here (by the way that isn’t necessary, just paste links) the function signature contains element and propertyName. The element is the interesting parameter as element is a HTML(Node) element. So querySelector works just fine…


// Example search while fetching a scene container first
var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId());
var searchResultElm = hypeSceneElm.querySelector('.whatEver')

// Example for hypeDocument.getElementProperty to get the property 'left'
var left = hypeDocument.getElementProperty(searchResultElm, 'left');

Here is a video about this using the chrome devtools inspector todo some live queries:

2 Likes

Sorry for later response, seems that I missed the email notification.

Thanks for so great tutorials!:grinning:

Have a nice day, Max!