To find a div within Hype, with multiple class names as a symbol, with a draggable element I used this:
var home = $(element).closest($('.HYPE_scene')).find($('.home_' + element.innerHTML));
The above uses the element (draggable div) as a reference, finds the closest scene and then looks for the class. If there are multiple class names within the same scene, you could just change the Find, to closest to the element.
In my case once I found the element I then retrieved the auto generated ID and used ‘getElementById’ to access the DOM.
To give you some context, this is how Hype laid out the DOM Structure:
<body>
<!-- copy these lines to your document: -->
<div id="index_hype_container" style="margin: auto; position: relative; width: 750px; height: 400px; overflow: hidden; -webkit-transform-style: flat;" aria-live="polite" hyp_dn="index" aria-hidden="false">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?62731"></script>
<div id="HYPE_persistent_symbols" aria-hidden="true" style="display: none;"></div>
<div class="HYPE_scene" id="hype-scene-OjWA3NVziFMIKuSh" hype_scene_index="0" aria-hidden="true" style="background-color: rgb(255, 255, 255); display: none; overflow: hidden; position: absolute; width: 750px; height: 400px;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_O" id="hype-obj-wesKKEBfzoAtPRxZ" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="letter_U" style="pointer-events: auto;">U</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-waKDfvZQplJiCqeO" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="letter_L" style="pointer-events: auto;">L</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-7ollG3cYWGzedsFl" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-CscCOdYjMl41hKGi" style="pointer-events: auto;">W</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-3tEr1wAfKsMqpvu2" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="letter_D" style="pointer-events: auto;">D</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-QhJNaIx9jqpTUf5q" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-I80tbqlCSZETYuEZ" style="pointer-events: auto;">O</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-Iusjm7VpM40usoo0" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_W" id="hype-obj-nNtpj04d3AH9T6wf" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-5YaBwame06tuiSj4" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_U" id="hype-obj-rFxSKEz5Eukvr4ZJ" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-EuujdQE5TaxENR9k" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_L" id="hype-obj-10ZyCk0M63Fw2slH" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-6tUMHuYLAOzlSyxl" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_D" id="hype-obj-hXSdkjrNFocxYwmB" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-2xBwMAvPrZl3dOLx" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-eRFLNRAxqYwORHwR" style="pointer-events: auto;">NEXT</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-nFfnSL7IdjX0axbL" style="pointer-events: auto;">Play Word</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-HnHXxR6ibWzr00Gt" style="pointer-events: auto;">Attempts</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="attWould" style="pointer-events: auto;">0</div>
</div>
</div>
<div class="HYPE_scene" id="hype-scene-o2BqYOPBF2QH1PUw" hype_scene_index="1" aria-hidden="false" aria-flowto="hype-obj-UaS00dz2vE3iBhqe" style="background-color: rgb(255, 255, 255); display: block; overflow: hidden; position: absolute; width: 750px; top: 0px; left: 0px; height: 400px; -webkit-transform-origin: 50% 50%; -webkit-transform: translateZ(0px) rotateY(0deg); z-index: 1; opacity: 1;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 16;">
<div class="HYPE_element home_O" id="hype-obj-UaS00dz2vE3iBhqe" aria-flowto="hype-obj-qPeLTvGhcjw2VjHy" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); background-color: rgb(232, 235, 237); overflow: visible; z-index: 16; width: 100px; height: 100px; top: 133px; left: 18px;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 15;">
<div class="HYPE_element" id="hype-obj-2QwLlYCvjNdrWcn8" aria-flowto="hype-obj-SQrNXiMZLdjtTO2x" style="pointer-events: auto; position: absolute; overflow: visible; z-index: 15; width: 90px; height: 93px; top: 249px; left: 24px;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 23;">
<div class="HYPE_element letter" id="hype-obj-qPeLTvGhcjw2VjHy" aria-flowto="hype-obj-2QwLlYCvjNdrWcn8" style="pointer-events: auto; position: absolute; z-index: 23; border: 1px solid rgb(216, 221, 228); -webkit-user-select: none; background-color: rgb(232, 235, 237); -webkit-transform-origin: 50% 50%; -webkit-transform: rotateY(0deg); line-height: 95px; font-size: 96px; text-align: center; font-weight: bold; cursor: move; overflow: visible; width: 88px; height: 91px; top: -11px; left: 0px;">O</div>
</div>
</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 13;">
<div class="HYPE_element" id="hype-obj-SQrNXiMZLdjtTO2x" role="button" aria-flowto="hype-obj-P4Ab8SRhfBmvdNZl" style="pointer-events: auto; position: absolute; z-index: 13; border: 1px solid rgb(160, 160, 160); padding: 6px; opacity: 0; -webkit-user-select: none; background-color: rgb(240, 240, 240); word-wrap: break-word; display: inline; font-size: 13px; text-align: center; color: rgb(0, 0, 0); cursor: pointer; overflow: visible; width: 55px; height: 15px; top: 220px; left: 665px;">NEXT</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 12;">
<div class="HYPE_element" id="hype-obj-P4Ab8SRhfBmvdNZl" role="button" aria-flowto="hype-obj-Fx4hwSdz6cqIV42C" style="pointer-events: auto; position: absolute; z-index: 12; border: 1px solid rgb(160, 160, 160); padding: 6px; -webkit-user-select: none; background-color: rgb(240, 240, 240); word-wrap: break-word; display: inline; font-size: 13px; text-align: center; color: rgb(0, 0, 0); cursor: pointer; overflow: visible; width: 90px; height: 15px; top: 16px; left: 262px;">Play Word</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 10;">
<div class="HYPE_element" id="hype-obj-Fx4hwSdz6cqIV42C" aria-flowto="attOr" style="pointer-events: auto; position: absolute; padding: 8px; overflow: visible; word-wrap: break-word; z-index: 10; white-space: nowrap; font-family: Helvetica, Arial, sans-serif; font-size: 12px; display: inline; color: rgb(0, 0, 0); font-weight: bold; top: 0px; left: 0px;">Attempts</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 9;">
<div class="HYPE_element" id="attOr" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); line-height: 28px; background-color: rgb(232, 235, 237); overflow: visible; z-index: 9; text-align: center; width: 34px; height: 28px; top: 23px; left: 14px;">0</div>
</div>
</div>
<div class="HYPE_scene" id="hype-scene-2YkRRXgevxQb8pAU" hype_scene_index="2" aria-hidden="true" style="background-color: rgb(255, 255, 255); display: none; overflow: hidden; position: absolute; width: 750px; height: 400px;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-te69tWEj33olYKwS" style="pointer-events: auto;">Math is awesome and everyone should know it!</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-sYebDLAnAIGcH1H7" style="pointer-events: auto;">This is a story about Math!</div>
</div>
</div>
</div>
<!-- end copy -->