如何检查 HTML 元素在 javascript 中是否没有面向用户的数据（例如文本或图片）？

Question

我有一个 Web 应用程序可以从网页中删除某些元素，因此在完成初始传递后，我想删除所有 divs 曾经包含不再包含的数据。因此，例如，在初始传递之后，元素可能如下所示：

<div class = "some-random-class">
    <script> *script stuff* </script>
    <div class = "some-other-class"> 
        <p>  </p>
    </div>
</div>

我希望能够检测到 div 和 "some-random-class" 不再包含任何文本（或文本只是空白）、图片或视频，并且只包含元素用于格式或间距。 For example, this link shows two empty boxes in a webpage made up with only divs and scripts.

Answer 1

在这里。如果它有 class 名称 "some-other-class" 并且是空的，那么它将被删除。如果您想要所有标签，可以将 var elements = document.getElementsByTagName('div'); 更改为 var elements = document.getElementsByTagName('*');，或者将其更改为任何其他标签。如果你想删除任何空元素，即使没有那个 class 名称，你也可以删除 elements[i].className == "some-other-class" &&。

var elements = document.getElementsByTagName('div');

for (var i = 0; i < elements.length; i++) {
if (elements[i].className == "some-other-class" && elements[i].innerText.replace(" ","") == "" && elements[i].innerHTML.indexOf('<img') < 0 && elements[i].innerHTML.indexOf('<video') < 0){
    elements[i].parentElement.removeChild(elements[i]);
    }
}

<div class = "some-random-class">
    <div class = "some-other-class"> 
        <p> a </p>
    </div>
     <div class = "some-other-class"> 
        <p> <img src="https://www.w3schools.com/tags/smiley.gif"> </p>
    </div>
    <div class = "some-other-class"> 
        <p> </p>
    </div>
</div>

如何检查 HTML 元素在 javascript 中是否没有面向用户的数据（例如文本或图片）？

How to check if an HTML element has no user facing data (e.g. text or pictures) in javascript?

html

javascript

firefox-addon-webextensions