无法通过react中的tagName app.js检测链接

Question

我正在尝试将某些元素作为链接，以便我可以检查它们的href值。我试图运行一些通过应用程序中所有节点和childNode的代码，然后每当找到标签但我似乎无法使用当前逻辑检测到它们时。

我环顾四周，应该可以使用element.tagName获取元素类型，也许我的循环结构有问题？希望有人可以帮助我或给我一些指导。

我的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>

我的功能如下：

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

我建议您使用document.querySelectorAll，它更容易，更清洁。这将帮助您仅查询a标签。 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);
    }
  }