職案人

求職・歴史・仏教などについて掲載するつもりだが、自分の思いつきが多いブログだよ。適当に付き合って下さい。

class属性の値を指定して要素ノードを取得

2024年07月04日 | JavaScript
class属性の値を指定して要素ノードを取得

【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、

【getElementsByClassName メソッド】
Document オブジェクトの getElementsByClassName メソッドは、要素の class 属性の値を指定して一致する要素ノードをすべて取得します。

【書式と使い方】
・書式
document.getElementsByClassName(classnames)

引数には class 属性の値を DOMString オブジェクトで指定します(例えば 'box' など)。複数の class 属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得します。その場合は空白文字で区切って指定します(例えば 'box menu' など)。戻り値は HTMLCollection オブジェクトです。

【HTMLCollection オブジェクトとは】
HTMLCollection オブジェクトは複数の要素ノードの集合です。 HTMLCollection オブジェクトでは length プロパティ item メソッド、および namedItem メソッドが用意されており、次のように取得した要素の数を取得したり、指定の要素を取り出すことができます。

let elements = document.getElementsByClassName('box');

// 取得した要素の数を取得
let len = elements.length;

// インデックスを指定して要素を取得
let element = elements.item(0);

// 次の形式でもインデックスを指定して要素を取得
let element = elements[0];

同じ class 属性の値をを持つ要素ノードは、 HTML ページの中で記述された順番にインデックスが割り当てられています。インデックスは最初が 0 で 1, 2, 3... と続いていきます。

指定した class 属性の値が付けられた要素ノードが見つからなかった場合、 getElementsByClassName メソッドは null を返すわけではなく、 length が 0 の HTMLCollection オブジェクトを返します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
  div, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
</style>
</head>
<body>

<p>外出記録</p>

<div class="box">
  <p>今日は外でランチを食べました</p>
  <p class="box">場所:港区南青山</p>
  <p class="box">店名:リストランテ南青山</p>
</div>

<button onClick="getElements();">要素を取得</button>

<script>
function getElements(){
    let elements = document.getElementsByClassName('box');
    let len = elements.length;
    for (let i = 0; i
        elements.item(i).style.border="2px solid #0000ff";
    }
}
</script>
</body>
</html>

サーバーを立ち上げブラウザで表示する


 
ボタンをクリックすると下図の様になる。


コメント    この記事についてブログを書く
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする
« タグ名を指定して要素ノード... | トップ | name属性の値を指定して要素... »
最新の画像もっと見る

コメントを投稿

JavaScript」カテゴリの最新記事