文章/答案/技术大牛

发布

社区首页 >问答首页 >检查nodeType中的图片/Alt属性

问检查nodeType中的图片/Alt属性
EN

Stack Overflow用户

提问于 2020-02-22 20:10:05

回答 1查看 471关注 0票数 3

我得到了一个递归函数，它遍历所有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属性。

jquery

html

dom

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-22 20:29:07

只要确定元素不是文本节点，只需使用元素的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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60356328

复制

相似问题

问检查nodeType中的图片/Alt属性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查nodeType中的图片/Alt属性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检查nodeType中的图片/Alt属性
EN