javascriptで指定IDの子要素の値を取得する。

javascriptを使用して指定値を取得する際に、「jQuery」を使うことが多いのですが、既存のサイトを編集できる権限がない状態で、googleタグマネージャー等の外部ツールに値を渡す必要があり、無理矢理値を取得した際に使った方法をメモ。

事例1：コンバージョン時の値を取得

今回は「お申込みボタンクリック時に表中のお名前の姓に該当する値のみを取得する」という内容。

HTML

<h2 id="order_info_checkout_title" class="form_title">お客様情報</h2>
<table id="order_info_checkout">
    <tr id="order_info_name">
        <th>お名前</th>
        <td>カブシキカイシャ&nbsp;シュウ</td>
    </tr>
    <tr id="order_info_kana">
        <th>ふりがな</th>
        <td>かぶしきかいしゃ&nbsp;しゅう</td>
    </tr>
    <tr id="order_info_zip">
        <th>郵便番号</th>
        <td>〒184-0002</td>
    </tr>
    <tr id="order_info_prefecture">
        <th>都道府県</th>
        <td>東京都</td>
    </tr>
    <tr id="order_info_address1">
        <th>住所1（市郡区/町・村・丁目・番地）</th>
        <td>小金井市梶野町</td>
    </tr>
    <tr id="order_info_address2">
        <th>住所2（マンション名・号室）</th>
        <td></td>
    </tr>
    <tr id="order_info_tel_no">
        <th>電話番号</th>
        <td>042-316-1895</td>
    </tr>
    <tr id="order_info_email">
        <th>メールアドレス</th>
        <td>○○○○@syu-u.com</td>
    </tr>
</table>

<section class="k-button">
    <a href="">申し込む</a>
</section>

javascript

//値の取得
let entryname = document.getElementById("order_info_name");
let val_entryname = entryname.innerHTML;
val_entryname = val_entryname.replace(/\r?\n/g, "").replace(/\s+/g, "").replace(/<th>お名前<\/th><td>/g, "").replace(/<\/td>/g, "");
val_entryname_ary = val_entryname.split("&nbsp;");

//クリック時にアラートを出力
let targets = document.getElementsByClassName("k-button");
for(let i = 0; i < targets.length; i++){
    targets[i].addEventListener("click",() => {
        alert("姓"+val_entryname_ary [0]);
    }, false);
}

該当箇所に直接クラスやIDが割り振られていないため、親要素のID（order_info_name）から「innerHTML」を使用してHTMLを一式取得してから、「replace」を使用して改行と不要な文字列を削除。
最終的に得られた値を「split」を使用して分割して目的の値を取得。

アラート処理もクラス（k-button）から取得する都合で、一度で処理できないので「for」ループ処理を介して機能を実装。