Vanilla JS：如何按類型和類來定位元素

Question

我試圖只使用vanilla JS創建一個函數，它將調整具有給定類的容器中的字體。 發現這個演示 ，好像它會成功。 不幸的是，他們的'Javascript'版本實際上使用$（）jquery選擇器來根據其元素類型和類來定位DOM中的特定元素。

由於vanilla JS不允許這樣做，我不確定如何應用解決方案。

邏輯讓我感到困惑，我需要准確地定位元素，並且可能有相同元素的多個實例具有相同的類，所有這些都需要單獨處理。

即我可能有兩個h3元素附加'.resize'類，但第一個元素是50px乘100px，第二個元素是200px乘400px。 如果我只是根據泛型元素類型和類應用解決方案，那么為第二個元素生成的css規則也將應用於第一個元素。

我能想到的唯一方法是為每個元素使用唯一的ID而不是'.replace'類，然后創建一個包含預定義ID的數組，並迭代數組以定位每個元素。 此解決方案不優雅或可擴展。

我已經修改了函數以僅使用vanilla JS來定位.style.fontSize屬性，但現在我得到了一個無限循環。

JS：

function autoSize () {
  var el, elements, _i, _len, _results;
  elements = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elOldFontSize = el.style.fontSize;
        var elNewFontSize;


        elNewFontSize = (parseInt(elOldFontSize.slice(0, -2)) - 1) + 'px';
        el.style.fontSize = elNewFontSize;
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return _results;
}

Answer 1

Vanilla JS不允許這樣做，但瀏覽器風味的Vanilla JS確實如此。 它被稱為document.querySelector （ docs ）和document.querySelectorAll （ docs ）。

文檔中的示例：

在此示例中，返回文檔中具有類“myclass”的第一個元素：

var el = document.querySelector(".myclass");

此示例返回文檔中所有div元素的列表，其中包含“note”或“alert”類：

var matches = document.querySelectorAll("div.note, div.alert");