Component that traverses/walks the DOM of rendered page | Community
Skip to main content
au4liferz
au4liferz
Level 4
December 16, 2015
Solved

Component that traverses/walks the DOM of rendered page

  • December 16, 2015
  • 2 replies
  • 817 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by kautuk_sahni

    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

    2 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    December 17, 2015

    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

    Kautuk Sahni
      au4liferz
      au4liferzAuthor
      Level 4
      December 17, 2015

      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).

      Terms & ConditionsAccessibility statement

      Loading footer...