我的体育标题和第三名是空的价值观

Question

• 我是JS的新手
• 你能告诉我为什么我要获得体育标题和第三名的空价值。
• 因为我们有一个div，其中包含内容。sports-title ----> {" 0"：{}}第三----> {}
• 在下面提供我的代码。

findStringInsideDiv() {
   /* 
   var str = document.getElementsByClassName("sports-title").innerHTML;
   */
    var sportsTitle = document.getElementsByClassName("sports-title");
    var third = sportsTitle[0];
    var thirdHTML = third.innerHTML

    //str = str.split(" ")[4];
    console.log("sports-title---->" + JSON.stringify(sportsTitle));
        console.log("third---->" + JSON.stringify(third));
    console.log("thirdHTML---->" + JSON.stringify(thirdHTML));

    if ( thirdHTML === " basketball football swimming " ) {
          console.log("matching basketball---->");

      var menu = document.querySelector('.sports');
      menu.classList.add('sports-with-basketball');
      // how to add this class name directly to the first div after body.
      // but we are not rendering that div in accordion
      //is it possible
    }
    else{
    console.log("not matching");
    }
  }

Answer 1

使用任何getElement选择器在文档对象模型(DOM(中调用对象时，它将返回一个可以考虑到HTML元素的对象。该对象不仅包括HTML元素中包含的文本。为了访问该元素的文本，您要使用.textContent属性。

此外，HTML类可能会分配给多个元素，因此getElementsByClassName返回一个数组，因此您必须执行以下操作，例如：

console.log("sports-title---->" + JSON.stringify(sportsTitle[0].textContent));

您可以在W3Schools网站上找到对DOM的简要介绍。https://www.w3schools.com/js/js_htmldom.asp如果您遵循的话，将概述DOM的不同方面。

Answer 2

也许这会有所帮助
如您所见，sportsTitle[0].textContent返回全向，0是索引，因此当您串制(serialize(sportsTitle时，您会获得" 0"。为什么0？因为您有一个<h1>元素。请参阅此小提琴http://jsfiddle.net/cqj6g7f0/3/
我添加了第二个H1并查看console.log，您将获得两个索引0和1

如果要从元素获取一个单词，因此获取子字符串使用substr()方法https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/global_objects/string/string/substr

一种方法是将<h1>类attr更改为ID和DO sportsTitle.textContent;
并在此字符串上使用substr()
或
第二种方法是保留类attr，并执行sportsTitle[0].textContent;
此字符串上的substr()

第二个是更好的方法