DOM on aem

[iwanttobeDev]

Hello,

what a similiar method if i want to using DOM with JS API on AEM,

for Example:

<div class="class1">

....

</div>

let dom1 = document.getElementByClassName('class1');

im trying to make toogle Active button on AEM, how to do it, thankyou verymuch

[BrianKasingli · Accepted solution]

Hey @iwanttobeDev,

Whenever you are writing JavaScript for a website, within the browser the window.document object should be available. The window.document can be used to select elements on the page, then to add behaviours to them. Such as click. 

Adding JavaScript to a web page can be done in many ways in AEM, but the best practice when adding JavaScript on an AEM website is via client libraries.

Client libraries in AEM are one of the most popularly used features provided by AEM. It allows us to not only manage our client-side resources like (JavaScript, CSS, images, fonts etc...) but also provide options to debug, minify, merge and gzip the client-side code.

First things first, you need to understand the items listed below:

1. What are client libraries in AEM - https://www.youtube.com/watch?v=8i2Uy_99_TU
2. How to create a client library in AEM. - https://www.youtube.com/watch?v=caJa4i35UPI
3. How to call a client library on AEM from a page component. - https://www.youtube.com/watch?v=mFeieUsaMDY

Understanding how to what are client libraries, how to create client libraries, and how to call client libraries from your page will the best place to start.

Sometimes if you want to run a small script in your AEM web page, and creating a new client library is not required, you can add inline JavaScript to the bottom of your web page (it's best practice to run JavaScript as close to the closing </body> tag as possible). 
Inline JavaScript example:

<script type="text/javascript">
     document.getElementsByTagName('body')[0].style.display = 'none';
</script>

I hope this helps.

[sunjot16]

You can create a JS file where in you use DOM API to perform toggle operations, and then import it on the page(using something like:

<script type="module" src="app.js"></script>

) where you want to trigger that JS code.

[BrianKasingli]

Adding on the sunjot16's note, calling a client library will either insert the &lt;script&gt; or the <style> tag.