Using querySelector instead of getElementById

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). Therefor, I generally would advise using querySelector and CSS classes over ID's. 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
	*/
	
});

There is a compatibility side note, NodeList.forEach is not supported on older IE browsers. There is a polyfill, but if you don't want to use a Polyfill to support these browsers you can use a traditional loop:

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

// traditional for loop
for (var index=0; index<searchResultElm.length; index++) {
  var currentElm = searchResultElm[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
	*/
	
}

Useful selectors

Inside a Hype Event or a Hype Function you can get the current scene element by using the getElementById with the scene id using the following code:

var sceneElm = document.getElementById(hypeDocument.currentSceneId());

Using the sceneElm limits your searches with querySelector and querySelectorAll to the scope of the current scene. With the following example you target all Hype elements in a scene.

sceneElm.querySelectorAll('.HYPE_element');

Missing Selectors

There is an extension to automaticly add some "missing" selectors to your Hype project. These include selectors created around scene, layout and symbol names. Using the extension allows you to target these elements much more convenience.

To learn more about this extension visit the forum page Hype Missing Selectors or directly visit the corresponding Github project.

Further reads

This article gives a great overview on CSS selectors and as querySelector and querySelectorAll use them you can make the most of them once you understand the full scope of possibilities:

Interesting selectors
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Overview of selectors
https://www.w3schools.com/cssref/css_selectors.asp