Question

以这种方式使用undefined后，我得到document.getElementsByClassName：

var str = document.getElementsByClassName("overlayHeader-title").innerHTML;

我正在尝试为父div添加一个额外的类名，我不能使用id。

如何解决？

findStringInsideDiv() {

    var str = document.getElementsByClassName("sports-title").innerHTML;
    //str = str.split(" ")[4];
        console.log("reeeeeeeee---->" + str);
    if ( str === "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

    }

Answer 1

getElementsByClassName返回一个显然没有innerHTML属性的HTMLCollection（类似于数组的对象）。在使用innerHTML：

之前，您必须从该HTMLCollection访问元素

var str = document.getElementsByClassName("overlayHeader-title")[ someIndex ].innerHTML;
//                                                              ^^^^^^^^^^^^^

Answer 2

getElementsByClassName() 会返回一个节点列表（类似于数组的对象）。因此，它不会具有innerHTML属性。您必须将索引传递到节点列表以提取特定元素，然后您可以查看其innerHTML，如下所示：

var str = document.getElementsByClassName("overlayHeader-title")[0].innerHTML;

此外，返回的节点列表是实时的，这意味着每次引用列表时，都会重新扫描DOM，以确保包含自上次扫描以来可能已添加/删除的所有元素/排除。这会带来性能成本，因为每次引用变量时都会重新获取整个DOM。

如果您不打算影响查询返回哪些元素的动态修改，最好不要使用getElementsByClassName，而应使用 querySelector() 来获取与查询匹配的第一个元素（然后您将不需要索引，因为将返回单个元素）或 querySelectorAll() ，它返回需要索引的静态节点列表。

最后，将变量设置为等于元素属性的值不是一个好主意，因为如果您想获得该元素的不同属性的值，则需要重新扫描（或重新索引））。相反，存储对元素本身的引用，然后您可以随时获得所需的任何属性。

以下是一些例子：

// Get a live node-list of all the elements that use the "overlayHeader-title" class
var overlayHeader = document.getElementsByClassName("overlayHeader-title");

// Now, get the 3rd element in the node-list:
var third = overlayHeader[2];

// Now, get the third element's content as HTML
var thirdHTML = third.innerHTML

// Get a static node-list of all the elements that use the "overlayHeader-title" class
var overlayHeader = document.querySelectorAll("overlayHeader-title");

// Now, get the 3rd element in the node-list:
var third = overlayHeader[2];

// Now, get the third element's content as HTML
var thirdHTML = third.innerHTML

// Get the first element in the document that uses the class "overlayHeader-title"
var overlayHeader = document.querySelector"overlayHeader-title");

// Now, get the element's content as HTML
var overlayHeaderHTML = overlayHeader.innerHTML

关于查询DOM并获取节点列表/ HTML集合的最后一点说明。使用：getElementsByClassName，getElementsByTagName，querySelectorAll，getElementsByName的查询将始终返回该节点列表 - 即使没有元素与查询匹配。如果是这种情况，使用上面提到的任何方法都不会出错，但是当您尝试访问特定索引处的元素并使用它时，您将收到“空引用”错误，因为容器是空的。因此，在使用元素之前测试元素的存在总是一个好主意。这是一个例子：

// Get a static node-list of all the elements that use the "overlayHeader-title" class
var overlayHeader = document.querySelectorAll("overlayHeader-title");

// Assuming that no elements match that query, the following line would cause an error:
overlayHeader[2].innerHTML = "<p>New content</p>";

// Test for existence first:
if(overlayHeader[2]){
  // Element exists. It's safe to work with it.
  overlayHeader[2].innerHTML = "<p>New content</p>";
}

如果我使用document.getElementsByClassName，我将得到未定义

2 个答案: