can't detect links by tagName app.js in react

Question

I'm trying to grab some elements when they are links so I can check their href values. I'm trying to run some code that passes through all the nodes and childNodes in my app then whenever I find an <a> tag but I can't seem to detect them using my current logic.

I looked around and I should be able to get element type using element.tagName, perhaps something is wrong with my loop structure? Hoping someone can help me out or give me some pointers.

My JSX:

<div id="app">
        <p>thats dope</p>
        <div>
          some stuff here
          <img src = {deer} width="80px" height="80px" alt="a deer"></img>
        </div>

        <div>
          <p>here there will be a sample node to check out</p>
          <a href="https://sdfd.com">link</a>
          <TestNode/>
        </div>
      </div>

my function is as follows:

checkNodes= (id,escapeChars,whiteListURLS) =>{
    var app = document.getElementById(id)

    if (app.hasChildNodes()) {
      let children = app.childNodes;

      //check every child in the dom within the passed in ID
      for (let i = 0; i < children.length; i++) {
          console.log(children[i])

                  for(let x = 0; x < escapeChars.length; x++ ){
                      if(children[i].nodeValue !== undefined && children[i].nodeValue === escapeChars[x] ){
                          console.log('error detected escape chars ',children[i])
                          return false     
                      }

                      //CHECK FOR <A> TAG

                      if(children[i].tagName.toLowerCase() === "a"){
                        console.log('this is a link')
                        if(children[i].getAttribute("href") !== whiteListURLS[x]){
                          console.log('error detected suspect url ',children[i])
                        }
                      }

                  }

          //check all children inside a child
          for(let j = 0; j < children[i].length; j++){
              console.log(children[i][j])

                      for(let z = 0; z < escapeChars.length; z++ ){
                          if(children[i][j].nodeValue !== undefined && children[i][j].nodeValue === escapeChars[z]){
                              console.log('error detected escape chars ',children[i][j])
                              return false 
                          }

                   //CHECK FOR <A> TAG
                          if(children[i][j].tagName.toLowerCase() === "a") {
                            console.log('this is a link')
                            if(children[i][j].getAttribute("href") !== whiteListURLS[z]){
                              console.log('error detected suspect url ',children[i][j])
                            }
                          }
                      }
                  } 
              }
          }
      }

Answer 1

I suggest you to use document.querySelectorAll which is much easier and cleaner. It will help you to query only the a tags. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

  const checkNodes= (id,escapeChars,whiteListURLS) =>{
    const root = document.getElementById("root");
    const anchors = root.querySelectorAll('a'); // find all a tags within root node
    console.log(anchors);
    for (let i = 0; i < anchors.length; i++) {
      console.log(anchors[i].href);
    }
  }