將javascript中的getElementById改成querySelectorAll

Question

在 90% 的時間里，我會遇到一個大問題。 “getElementById”問題。 getElementById 可以使用一次 ad 和id 連接，一個id 可以在html 聲明一次。相反，class 很好，可以使用很多次。 這就是為什么我總是想使用 querySelectorAll 而不是 getElementById。 在我的代碼中，如何將 id 替換為 class，以便我可以根據需要使用它。

 let copyright_date = new Date(); let copyright_year = copyright_date.getFullYear(); document.getElementById("copyright-year").innerHTML = copyright_year; document.getElementById("site-title").innerHTML = document.title;

 <p>Copyright <span id="copyright-year"></span> - <a href="#" id="site-title"></a>.</p>

我想將這些 id 更改為 class: id="copyright-year" and id="site-title" 。

我怎樣才能只使用 javascript ....？

Answer 1

你可以這樣做：

<p>Copyright <span class="copyright-year"></span> - <a href="#" class="site-title"></a>.</p>


<script type="text/javascript">
  //$("#site-title").click(function(){location.reload()});
  let copyright_date = new Date();
  let copyright_year = copyright_date.getFullYear();

  const copyright_elements = document.querySelectorAll(".copyright-year");
  for (const element of copyright_elements){
    element.innerHTML = copyright_year;
  }

  const site_title_elements = document.querySelectorAll(".site-title");
  for (const element of site_title_elements){
    element.innerHTML = document.title;
  }
</script>

但是，請注意querySelectorAll不會返回單個元素，而是返回一個元素數組。 因此，您必須知道具體要訪問哪個元素。

Answer 2

這是嘗試使用盡可能少的代碼：

 [[".copyright-year",(new Date()).getFullYear()], [".site-title",document.title]].forEach(([cls,val]) =>document.querySelectorAll(cls).forEach(el=>el.textContent=val));

 <title>my articles</title> <p>Copyright <span class="copyright-year"></span> - <a href="#" class="site-title"></a>.</p> <p>Copyright <span class="copyright-year"></span> - <a href="#" class="site-title"></a>.</p>

不可否認，這對於 Javascript 新手來說可能有點多。 因此這里有一些解釋

• 數組結構[[...]]是一個 arrays 的數組：兩個 arrays 中各有兩個元素，一個基於類名的選擇器字符串和一個value 。
• 在第一種情況下，該值是當前年份，在第二種情況下，該值是文檔的標題。
• .forEach(([cls,val])=>...)在外部數組上的循環然后使用 ES5 解構技術將每個子數組的元素分配給局部變量cls和val 。
• 並且，最終，帶有document.querSelectorAll(cls).forEach(el=>...)的內部循環將它們組合在一起：每個el的.textContent都設置為值val 。