Component that traverses/walks the DOM of rendered page

[au4liferz]

How should I go about creating a component that is able to walk the DOM tree for whichever page it is included on, locate certain HTML elements, and then modify/update or inject HTML on the page. It would essentially be updating or injecting HTML of the existing page, (i.e. of page you drag the component onto). I might need to use the same component to include other components on the page as well. What are the steps to accomplish this?

[kautuk_sahni · Accepted solution]

Hi 

To achieve the same, you would need to create a costume logic as stated by Scott. 

1. Create a "pathField widget with search" and read the content of specified page that you would like to change or modify (Link:- http://experience-aem.blogspot.in/2014/03/aem-cq-56-pathfield-widget-with-search.html).

2. Use JavaScript or Java code to read the page and parse DOM tree of the same. (http://api.jquery.com/jquery.parsehtml/, http://jsoup.org/ etc)

3. Many java-script plugins are available to modify the web content in-place, use them to modify the content. You can even create a section in the dialog box that can help you in previewing added/modified code. (Like Source code option in RTE).

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[au4liferz]

kautuksahni wrote...

Hi 

To achieve the same, you would need to create a costume logic as stated by Scott. 

1. Create a "pathField widget with search" and read the content of specified page that you would like to change or modify (Link:- http://experience-aem.blogspot.in/2014/03/aem-cq-56-pathfield-widget-with-search.html).

2. Use JavaScript or Java code to read the page and parse DOM tree of the same. (http://api.jquery.com/jquery.parsehtml/, http://jsoup.org/ etc)

3. Many java-script plugins are available to modify the web content in-place, use them to modify the content. You can even create a section in the dialog box that can help you in previewing added/modified code. (Like Source code option in RTE).

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Thanks, but the code/logic of the component will be doing all of the HTML modification, in one case, placing the appropriate analytics tags in the page right before the </body> tags, and in others, injecting code at the very top of the page, the very bottom, right after a specific element etc., or even locating an element and changing an attribute. Everything will be done by the code as opposed to having the author paste snippets into a dialog manually, (as the component will be getting some snippets from other systems and/or a database).