如何验证"if-else"语句中的 HTML 元素

Question

我正在尝试验证只能通过定位类和标签名称捕获的元素的文本内容。我正在寻找的文本内容可以通过查询'document.getElementsByClassName('sample'([0].children[1].getElementsByTagName('span'([0].textContent'获得，但是如果元素或其任何前体不在页面上，这将引发错误。有没有更好的方法来检查文本内容是否存在于条件中，而无需在此过程中重复检查每个元素？

以下是当前的实现：

(function() {
if (!!document.getElementsByClassName('sample')[0].children[1] && 
!!document.getElementsByClassName('sample')[0].children[1].getElementsByTagName('span')[0] && 
!!document.getElementsByClassName('sample')[0].children[1].getElementsByTagName('span')[0].textContent) {
return document.getElementsByClassName('sample')[0].children[1].getElementsByTagName('span')[0].textContent;
} else {
return 'Text not present.';
}
})();

Answer 1

这就是querySelector和querySelectorAll存在的原因。

(function() {
var el = document.querySelector("sample > :nth-child(2) span")
return el && el.textContent ? el.textContent : "Text not present.";
})();

:nth-child()选择器是从 1 开始的，因此这就是为什么它在您使用.children[1]的地方使用:nth-child(2)的原因。

---

或者至少使用变量。

(function() {
var el = document.getElementsByClassName('sample')[0];
el = el && el.children[1] && el.children[1].getElementsByTagName("span")[0];
return el && el.textContent ? el.textContent : "Text not present.";
})();

Answer 2

你可以尝试这样的东西，把它放在变量中，而不是使if语句复杂化。

function myFunction() {
var x = !document.getElementsByClassName('sample')[0];
if (!x.children[1] && !!x.children[1].getElementsByTagName('span')[0] && 
!!x.children[1].getElementsByTagName('span')[0].textContent) 
{
return x.children[1].getElementsByTagName('span')[0].textContent;
} 
else {
return 'Text not present.';
}