jsでページ内の特定のclass、またはIDの内容を抜き出して、Htmlの同一ページ内に表示させたい。

Question

初歩的な質問ですが、ご相談させてください。

jsでページ内の特定のclass、またはIDの内容を抜き出して、Htmlの同一ページ内に表示させたい。

<p><span class="user">○○○様</span>いらっしゃいませ。</p>

↑↑↑
既にこの内容が表示されている同一ページ内で、「○○○様」という値を使いまわしたいので、
○○○様、（※○○○の中身は人によって異なります。）という単語を抜き出して表示させる方法を探しています。
document.writeを使って表示させるのは何となくわかるのですが、どのように同一ページ内のclassまたはidを取得したらよいでしょうか？

よろしくお願いいたします。

Answer 1

<p><span class="user">○○○様</span>いらっしゃいませ。</p>
<div id=user-name></div> <!-- このdiv内に表示するとする -->

var userName = document.querySelector(".user").innerText;
document.querySelector("#user-name").innerText = userName;

Answer 2

IDで検索するなら document.getElementById
getElementById
Classなら document.getElementsByClassName
getElementsByClassName

IDは特定の1要素のみ検索できますがClassの場合は複数の場合があるので配列として取得されます。

その他にも
getElementsByName, getElementsByTagNameなどがあり
さらにquerySelectorを使うともっと複雑な条件で検索可能です。

【参考】

• MDN APIドキュメント
• 【DOM基礎】ノードの取得／属性の取得・設定

Answer 3

• getElementsByClassName()
• getElementById()

要件によってはdocument.writeではない方がいい場合もあります。

既にこの内容が表示されている同一ページ内で、「○○○様」という値を使いまわしたい

静的HTMLでなくPHPなどのサーバーサイドの言語で動的な仕組みを利用すればもっとやり方はあるのですが。