locked
help with getting child element RRS feed

  • Question

  • User632751675 posted

    hi,

    I have been trying to get a child element, which happens to be a custom tag. I have been able to work with other custom tags though, but not this one.  It is a child element that is a direct child of a custom element. 

      The element I want is <search-form>:

    <on-status> // I can see this one.

         <on-search-form> 

                 <div>

                       <div class="group">

    I tried:
    var stat = $('on-status').find('on-search-form');   and var stat= $('on-status).children

    but I don't get results. When I inspect the page, I see the children under 'on-status' : children:HTMLCollection[on-search-form]

    Shouldn't I be able to get this by using .children or .find?

    thank you

    Friday, May 28, 2021 12:58 AM

All replies

  • User-1330468790 posted

    Hi maggiemays,

     

    If you could find the "on-search-form" node when you were inspecting the page, then definitely you already found the child "on-search-form" element. Could you please tell me what you want to do after you find it?

     

    I think you are still using document.registerElement() to define a custom html tags. However, I did some research on it and found that the document.registerElement() has been deprecated, see here Document.registerElement()

    I am afraid that you might not be able to define your custom tag via this way and it is not a recommend feature now. If you are trying to define a cutom tag using this function, you will probably get an error message 'document.registerelement is not a function' in console tab (Press F12).

       

    Instead, I also found another way to create a custom html element => Custom Elements v1: Reusable Web Components 

    The concepts are similar except that the functions are different. Since it is a google documentation, it would be feasible at least on Chrome.

      

    Hope helps.

    Best regards,

    Sean

    Friday, May 28, 2021 2:44 AM
  • User632751675 posted

    hi, 

    I actually want to drill down further to access some textboxes.   I didn't create the HTML, I'm trying to access the textboxes because I want to prepopulate them via a querystring.  So, in the end I will loop through my query string fields and populate those textboxes.  

    Thank you

    Friday, May 28, 2021 5:49 PM
  • User-474980206 posted

    children is jquery function, it returns an array of the child nodes

      var nodes = $('on-status on-search-form').children();

    you can combine the selector. it will return a jQuery array of the child nodes of the <on-search-form> element.  if you just want the input descendants,  its:

      var inputs = $('on-status on-search-form :input');

    Friday, May 28, 2021 8:47 PM
  • User632751675 posted

    thank you.  I found something interesting.  When I tried your suggestion, I saw some elements like 'status-loading' and 'div.progress'.  Does that mean the page is not loaded fully?  Even though I have included this:

    document.addEventListener("DOMContentLoaded", () => {
            console.log("DOM ready");
       });

    I thought I'd try to see if I  checked for the element on an interval and I do get it now. It doesn't seem like a very elegant way to do it though-

    Tuesday, June 1, 2021 6:52 PM
  • User-474980206 posted

    DOMContentLoaded means the request html has been fully parsed into a dom tree. Images may not be loaded nor are CSS styles applied. The loading and progress divs are probably part of the initial html.

    Wednesday, June 2, 2021 2:43 PM