JavaScriptの.getElementsByTagName で指定したタグの文字列を取得して、一覧を表示します。
.getElementsByTagName
JavaScriptの.getElementsByTagName は、指定されたタグ名を持つ要素を返すメソッドです。
var elements = document.getElementsByTagName('タグ名');また、半角のアスタリスク ( * ) を使ったdocument.getElementsByTagName('*'); ですべての要素を取得することもできます。
文字列を取得して表示するサンプル
早速サンプルです。
「テキストを取得」のボタンをクリックすると、「あのイーハトーヴォ〜〜」から始まる一文の中にある b タグがついた文字列を取得して、吹き出しの中に一覧表示をします。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森。
ちなみに、ボタンは2度押しできないように設定しています。
サンプルのコード
コードはHTML・JavaScript・CSSの3種です。順に解説していきます。
HTML
HTMLは、ダミー文字が入った要素と、イベントのトリガーになるボタン。そして最後に一覧を出力する「postpoint」id名をつけた要素の3つです。
<p id="sampleText">あの<b>イーハトーヴォ</b>のすきとおった風、<b>夏</b>でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に<b>冷たさ</b>をもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォの<b>すきとおった風</b>、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られた<b>モリーオ市</b>、<b>郊外</b>のぎらぎらひかる<b>草の波</b>。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ<b>青いそら</b>、うつくしい森。</p>
<button id="switchButton">テキストを取得</button>
<ul id="postpoint"></ul>JavaScript
JavaScriptは、.addEventListener のクリックでイベントが始まります。
イベントは大きく分けて、「文字列を取得する対象の選択」「クリックでボタンの切り替え」「ループで取得した文字列を出力」の3種類です。
document.getElementById('switchButton').addEventListener('click', () => {
// 対象を選択
let getcon = document.getElementById('sampleText');
let elements = getcon.getElementsByTagName('b');
// ボタンを切り替え
const btn = document.getElementById('switchButton');
btn.classList.add('btnselected');
getcon.style.color = '#ccc';
// 取得した文字列を出力
let len = elements.length;
for (let i = 0; i < len; i++){
postpoint.innerHTML += '<li>' + elements.item(i).textContent + '</li>'
console.log('Text: ' + elements.item(i).textContent);
}
},
// イベントは一回だけ
{ once: true } );コードのお尻の方に addEventListener を一回のみに限定して発動させるよう , { once: true } を付けて、複数回のクリックをできないようにしています。
CSS
CSSはレイアウトを整える程度で、簡単な記述になっています。
/* ボタンのクリック後 */
button#switchButton.btnselected {
pointer-events: none;
background: #eee;
filter: drop-shadow(0px 0px 0px #eee);
color: #707070;
}
/* 文字列一覧のレイアウト */
ul#postpoint {
list-style: none;
border: none;
background: #fff;
margin: 25px 0px 0;
display: flex;
justify-content: flex-start;
gap: 15px;
padding: 15px 20px;
flex-wrap: wrap;
position: relative;
filter: drop-shadow(0px 1px 4px rgb(0,0,0,0.11));
}
ul#postpoint:before {
content: "";
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-bottom: 10px solid #ffffff;
}
ul#postpoint li {
background: #313131;
padding: 3px 10px 1px;
color: #fff;
border-radius: 3px;
font-weight: 500;
}
/* 文字列内のbタグ */
p#sampleText b {
color: #313131;
}
