检查图片/Alt 属性的 nodeType答案

【问题标题】：Check nodeType for Pictures/Alt Attribute检查图片/Alt 属性的 nodeType
【发布时间】：2020-02-22 20:10:05
【问题描述】：

我得到了一个遍历所有 HTML 子节点的递归函数。

有没有一种简单的方法来检查当前元素是否是带有 element.nodeType 的图像？所以我可以在这个元素上使用 DOM。

这里是代码示例：

replaceText(document.body)

function replaceText(element){
    if(element.hasChildNodes()){
        element.childNodes.forEach(replaceText)
    } else if(element.nodeType === Text.TEXT_NODE){
//Do Something
}

同样适用于图片，尤其是图片的 alt 属性。

【问题讨论】：

谢谢，那我怎样才能进入 alt 属性呢？

标签： jquery html dom

【解决方案1】：

一旦确定它不是文本节点，只需使用元素的nodeName 属性来检查它是否是图像（“IMG”）。

replaceText(document.body)

function replaceText(element){
    if(element.hasChildNodes()){
        element.childNodes.forEach(replaceText)
    } else if(element.nodeType === Node.TEXT_NODE){
      console.log("Text Found! textContent: ",element.textContent)
    }
    else if(element.nodeName = "IMG"){
      console.log("Image Found! Alt: ",element.alt)
    }
}

<html>
<body>
<p>this is text</p>
<div>this is an element</div>
<img src="https://placehold.it/22" alt="i am an image">
</body>
</html>

要获取图像的alt 属性，只需在代码中使用element.alt。

如果图像中的文本与正则表达式匹配，要删除图像，只需测试您要测试的每个属性：

function replaceText(element){
    if(element.hasChildNodes()){
        element.childNodes.forEach(replaceText)
    } else if(element.nodeType === Node.TEXT_NODE){
      //console.log("Text Found! textContent: ",element.textContent)
    }
    else if(element.nodeName = "IMG"){
      console.log("Image Found! Alt: ",element.alt)
      let re = /Wendler/gi
      if((element.alt != undefined &&element.alt.match(re)) || (element.src != undefined &&element.src.match(re)) || (element.title != undefined &&element.title.match(re))){ 
        element.remove()
      }
    }
}

<html>
<body>
<p>this is text</p>
<div>this is an element</div>
<img src="https://placehold.it/22" alt="i am an image">
<img src="https://placehold.it/25" alt="i am an image containing the word wendLer somewhere">
<img src="https://placehold.it/25?text=wendler" alt="i am an image">


<button onclick="replaceText(document.body)">Click to remove images</button>
</body>
</html>

【讨论】：

谢谢 :) 是的，我明白了，现在我只想删除图像，如果 src/title/alt 属性包含单词“Wendler”。我尝试了 else if(element.nodeType = "IMG"){ if(element.src.match(/Wendler/gi)){ element.parentElement.remove() } 但还没有工作:(
element.parentElement.remove() 不仅会删除图像，还会删除周围的（父）元素
我想我明白了，我的目标只是删除图像，即使我必须删除周围的父对象。当然删除 img 会更好，但 element.remove() 也不起作用。
查看我的编辑。我在那里工作得很好，也许会再次检查你的代码是否有错误:-)
嗯，您可能已经认识到我想将代码实现为 chrome 扩展。但是，当我实现扩展时，它向我显示了错误“未捕获的类型错误：无法读取未定义的属性‘匹配’”，这应该意味着该元素是未定义的，但在我看来这很有意义吗？