タグの選択

10705 ワード
TIL JavaScript テキストリンク

getElementsByTagName


getElementById、getElementsByClassNameを使用してHTMLタグを選択するほか、タグ名を使用して選択する方法もあります.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tag selector exam</title>
    <link rel="stylesheet" href="index01.css" />
  </head>
  <body>
    <header id="header">I'm Header!</header>
    <div id="btn-section">
      <button class="cr-btn darksalmon"></div>
      <button class="cr-btn lightcoral"></div>
      <button class="cr-btn indianred"></div>
      <button class="cr-btn plum"></div>
      <button class="cr-btn violet"></div>
      <button class="cr-btn slateblue"></div>
      <button class="cr-btn royalblue"></div>
      <button class="cr-btn cornflowerblue"></div>
    </div>
    <script src="index02.js"></script>
  </body>
</html>
const btns = document.getElementsByTagName('button');
console.log(btns);

HTMLドキュメント内のすべてのボタンのラベルを選択し、コンソールウィンドウに表示されるように値を取得できます.
HTML Collection[]を使用して値をインポートすることもできます.
この方法は一度に多くの要素、同じ要素を処理するので、よく間違いがあると言われています.だからこれは実際に使う方法ではありません.
こんなものがあるとしか知らなかった!
ロボット掃除機(14503)
[TIL] W5D5 SpringBoot AutoConfiguration