Issue Retrieving Text Content from Webflow DOMElement Object for a webflow app

App Developers Developer APIs
1

Hello Webflow Community,

I am currently working on a project where I want to retrieve the text content of H1 elements using Webflow’s JavaScript API. However, I’ve encountered an issue where the standard DOM property textContent is not behaving as expected.

So far, I can retrieve the ID of all H1 elements but still cannot find the text content.
When I use the Webflow method el.textContent, the result is a boolean value (true, in this case)

Here is a snippet of my code

if (allElements){
       

        //Get all heading from the page
        const allHeading = allElements.flatMap(el => el.type === 'Heading' ? [el] : [])
        allHeading.forEach(el => {
        //Find the headings with H1 tag
          if(el.getHeadingLevel()=== 1){
            const h1IdValue = el.id;
         // Search for heading on webflow, not on iframe
          console.log(el.textContent)
          }
        })
        
      }

Question:
How do I get the content of the H1 elements?

Thanks.

2

@Sofian_Bettayeb

Do you have a read-only link of the project you’re testing this on?

It may be that the elements are “H1” but they could have a child that contains the actual textContent. Some templates may have elements like this from a legacy element.

3

Yes @jonohale, here is the read only link

If it is the case, how do we still access the textContent?

Thank you for the support.
Sofian

4

Hey @Sofian_Bettayeb! Thanks for that!

The H1 headings on your homepage are looking correct. They seem to have the correct settings and are showing the textContent.

.textContent() is a true/false function. If you’re trying to get the text content of the element try .getText() - StringElements

5

Wow, thanks. I got the content now. Sounds simple, but made my morning. Thank you for this
.

1 Like
6

Glad I could help!

Hope to see you app in the Marketplace one day soon!