Question

我是js的新手。
你能告诉我为什么我得到体育冠军和第三名的空值。
因为我们有一个包含内容的div。体育标题----＆GT; { “0”：{}} 第三----＆GT; {}
在下面提供我的代码。

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是索引，因此当您进行字符串化（序列化）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>类attr更改为id并执行sportsTitle.textContent;
并在此字符串上使用substr()
或
第二种方法是保持班级attr并做sportsTitle[0].textContent;
和此字符串上的substr()

第二种是更好的方式

我获得了体育冠军和第三名的空值

2 个答案: