javascript——过滤掉低质量图片的搜索结果
试图过滤掉表格中包含低质量图像的搜索结果。我已经在浏览器控制台中运行它并收到错误 something is undefined，但至于什么，我不知道。
var imgTag = document.querySelectorAll('img > center');
var imgSize = ['Low Quality', 'Medium Quality'];
for (i = 0; i < imgTag.length; ++i) {
var imgElm = imgTag[i];
var indic = false;
for (j = 0; j < imgSize.length; ++j) {
var size = imgSize[j];
if (imgElm.getAttribute("alt").match(size)) {
indic = true;
break;
}
}
if (indic) {
var p = imgElm.parentNode.parentNode.parentNode;
p.setAttribute("style", "display:none;")
}
}
这是脚本尝试使用的 html 的最小工作示例。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minimal Example</title>
</head>
<body>
<table border="1px">
<td align="center" valig="top">
<div class="avatar" style="height: 140px; width: 100px;"><a class="gal_title" style="font-size: 11px;" href="/profile/User00">User00</a><br />
<a class=link3 href="/profile/User00"><img alt="User00's profile" style="border: solid 1px #CCCCCC;" width="90" height="90" src="/img/unknown.jpg"><img class="uonline" src="/img/online.png" title="User00 is online!"></a><div class="opt" style="clear: left; width: 80%;"><div class="random icon"></div><div class="country iconCountry" style="background:url(/images/country/AT.gif 0 0 no-repeat;"></div><div class="sendmail"><a href="/login.php?backurl=http%3a%2f%2fwww.example.com%2fmessage.php%3fuid%0123456"><img border=0 src="/img/pm.gif"></a></div><div class="clear"></div></div><div class="subscribers" style="clear: left;"><88 fans></div></div>
</td>
<td align="left" valign="top" style="font-size: 10px;" nowrap>
</td>
</tr>
<tr id="10180382" bgcolor="#E5E5E5" style="border-top: dotted 1px #000000;">
<td width="70%">
<img style="margin-top: -6px;" align="absmiddle" src="/img/arrow-r.gif">
<a title="View Gallery 1" class="gal_title" href="/gallery.php?gid=10180382"><i><b>Gallery 1</b></i></a>
</td>
<td><center> 298 </td>
<td><center>
<img alt="Low Quality" src="/img/small_img.gif">
</td>
<td nowrap><center> 2022-02-28 </td>
</tr>
<tr valign="top">
<td colspan="3">
<table><tr>
<!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/1986223183/"><img class="gal_thumb" alt="Free gallery 1 1 of pics" src="https://cdnh.example.com/images/mini/111/198/1986223183.jpg?se=1646123719&ss=ae7f157355b3929e45ed7bbe9923eb1c"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/1894873412/"><img class="gal_thumb" alt="Free Pics Gallery 1 2 of pics" src="https://cdnh.example.com/images/mini/109/189/1894873412.jpg?se=1646123719&ss=5428161f964b796b070d593a1a9766e5"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/98075857/"><img class="gal_thumb" alt="Free Pics Gallery 1 3 of pics" src="https://cdnh.example.com/images/mini/108/980/98075857.jpg?se=1646123719&ss=ef8e4e29c3ffb0384f772122eb1dde73"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/1957776812/"><img class="gal_thumb" alt="Free Pics Gallery 1 4 of pics" src="https://cdnh.example.com/images/mini/111/195/1957776812.jpg?se=1646123719&ss=ece6a38a3a982156dea6ba2d56ba2c1e"></a></td><!--</div>-->
</tr>
</table>
</td>
<td align="center" valig="top">
<div class="avatar" style="height: 118px; width: 100px;"><a class="gal_title" style="font-size: 11px;" href="/profile/User2">User2</a><br />
<a class=link3 href="/profile/User2"><img alt="User2's profile" style="border: solid 1px #CCCCCC;" width="90" height="68" src="https://cdnh.example.com/images/thumb/107/190/1904213141.jpg?se=1646122316&ss=539cad588fc95070e9f071e075c92083"></a><div class="opt" style="clear: left; width: 80%;"><div class="random icon"></div><div class="country iconCountry" style="background:url(/images/country/GB.gif 0 0 no-repeat;"></div><div class="sendmail"><a href="/login.php?backurl=http%3a%2f%2fwww.example.com%2fmessage.php%3fuid%3d1234564"><img border=0 src="/img/pm.gif"></a></div><div class="clear"></div></div><div class="subscribers" style="clear: left;"><645 fans></div></div>
</td>
<td align="left" valign="top" style="font-size: 10px;" nowrap>
</td>
</tr>
<tr id="10180365" bgcolor="#E5E5E5" style="border-top: dotted 1px #000000;">
<td width="70%">
<img style="margin-top: -6px;" align="absmiddle" src="/img/arrow-r.gif">
<a title="View gallery 2's" class="gal_title" href="/gallery.php?gid=10180365"><i><b>gallery 2's</b></i></a>
</td>
<td><center> 9 </td>
<td><center>
<img alt="High Definition" src="/img/huge_img.gif">
</td>
<td nowrap><center> 2022-02-28 </td>
</tr>
<tr valign="top">
<td colspan="3">
<table><tr>
<!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1497090477/"><img class="gal_thumb" alt="Free Pics gallery 2's 1 of pics" src="https://cdnh.example.com/images/mini/111/149/1497090477.jpg?se=1646123719&ss=8b9080bfc00940efaedb6d20802d8194"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1224351282/"><img class="gal_thumb" alt="Free Pics gallery 2's 2 of pics" src="https://cdnh.example.com/images/mini/108/122/1224351282.jpg?se=1646123719&ss=8b1a588d762dfedd9b3255a0e80d0a1b"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1868885026/"><img class="gal_thumb" alt="Free Pics gallery 2's 3 of pics" src="https://cdnh.example.com/images/mini/108/186/1868885026.jpg?se=1646123719&ss=d8acaa7d781a55654e685dac1db4e628"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1175638940/"><img class="gal_thumb" alt="Free Pics gallery 2's 4 of pics" src="https://cdnh.example.com/images/mini/111/117/1175638940.jpg?se=1646123719&ss=81c93da5afd1572bc5a6c0d5f4982a8f"></a></td><!--</div>-->
</tr>
</table>
</table>
</body>
</html>
我希望使用元素的alt属性img来识别低质量和中等质量的图像。在 src 中，它们被称为“低质量”和“中等质量”，但对于用户来说，它们只是“小”和“中”。因此，我以查询开始脚本以选择所有img元素，然后在此选择中仅选择img具有该alt属性的元素。最后，如果alt属性匹配low或匹配“medium”，则通过设置“display:none;”隐藏结果。
