我得到了 sports-title 和 third 的空值答案

【问题标题】：I am getting empty values for sports-title and third我得到了 sports-title 和 third 的空值
【发布时间】：2017-09-30 15:13:50
【问题描述】：

我是 js 新手。
你能告诉我为什么我得到了 sports-title 和third 的空值吗？
因为我们有一个包含内容的 div。运动标题---->{“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");
    }

  }

【问题讨论】：

仅引用对象是不够的，您必须从该对象获取文本
@Grisza 你好，你能告诉我为什么我在输出中看到 0 ---> {"0":{}}
您希望在sportsTitle 和third 中看到什么？
0来的原因是什么？？
因为使用 getElementsByClassName 你得到数组，因此得到“0”，当我在没有 JSON.stringify 的情况下输入时，我得到了sports-title---->[object HTMLCollection]

标签： javascript jquery html css reactjs

【解决方案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 的不同方面，包括元素。

【讨论】：

R 你好，你能告诉我为什么我在输出中看到 0 ---> {"0":{}}
getElementsByClassName
感谢@Grisza！

【解决方案2】：

也许这会有所帮助
如您所见，sportsTitle[0].textContent 返回完整标题，0 是索引，因此当您对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/String/substr

一种方法是将<h1> class attr 更改为 id 并执行sportsTitle.textContent;
并在此字符串上使用 substr()
或
第二种方法是保持班级属性并执行sportsTitle[0].textContent;
和 substr() 在这个字符串上

第二种方法更好

【讨论】：