JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.getElementsByTagNameで取得したタグの中にある文字列を取得して表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.getElementsByTagName

JavaScriptの.getElementsByTagNameで取得したタグの中にある文字列を取得して表示

JavaScriptの.getElementsByTagNameで取得したタグの中にある文字列を取得して表示

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;
    }