【JavaScript】DOM操作 classでデータを取得【プログラミング言語】
DOMとはなにか？
Document Object Modelの略語になります。
HTMLやXML、JSONなどのデータのプログラミング言語へのアクセス、データ取得、変更ができます。
今回は、class名から内部の innerHTMLで取得していきます。
classは複数指定が可能ですので、配列の値を配列にして取得をしていきます。
getElementByClass("[class名]");
サンプルプログラム
<!DOCTYPE html>
<html lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<title>DOM操作でclassを取得
</title>
</head>
<body>
<div class="getData">
中身を取得します。1
</div>
<div class="getData">
中身を取得します。2
</div>
<div class="getData">
中身を取得します。3
</div>
<script>
const elements = document.getElementsByClassName("getData");
for(var el of elements ) {
console.log(el.innerHTML);
}
</script>
</body>
</html>
実行結果
getElementsByClassNameにてclassのデータを取得し、innerHTML部分で内部の文字を取得する事が可能です。
中身を取得します。1
中身を取得します。2
中身を取得します。3
サンプルデータを動かすことによりわかりますので、行ってください。
サンプルダウンロード
もっと学びたい人は！この本がおすすめです
#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者
この記事が気に入ったらサポートをしてみませんか？