无法通过 tagName app.js 在反应中检测链接

Question

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

我环顾四周，我应该可以使用 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);
    }
  }

无法通过 tagName app.js 在反应中检测链接

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

getelementsbytagname

reactjs