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的，这就是为什么它使用:nth-child(2)时使用.children[1]的原因。

或者至少使用变量。

(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.';
}

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

2 个答案: