javascript　ノード要素の取得について

前提・実現したいこと**

要素の取得にfirstChild.をつけず対応可能でしょうか

質問の内容を詳しく書いてください。

Javasciptで　nodeValueをつかって内容を書き換えを検討していますが、
firstChild. をつけないと書き換えてくれません。
あえて、firstChild.をつけない記述はありますでしょうか

発生している問題・エラーメッセージ

firstChild. をつけないと書き換えてくれません。


### 該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="UTF-8">
</head>
    <body>
      <p > t <strong>es</strong>t </p>

      <script tyoe="text/javascript">
      let nodelist = document.getElementsByTagName("strong");
          nodelist.item(0).nodeValue = "ストロング"
          //nodelist.item(0).firstChild.nodeValue = "ストロング"// 書き換わる

      </script>
    </body>
</html>

```ここに言語名を入力
　javascript



### 補足情報（FW/ツールのバージョンなど）
chrome　最新
ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは

firstChild.をつけない記述

ということがご質問で求められている要件なのでしたら、nodeValueではなくtextContentを使って、以下ではどうでしょう？

javascript
1nodelist.item(0).textContent = "ストロング";

動作確認用サンプル： https://codepen.io/jun68ykt/pen/VwwNNVd
参考： MDN - textContent

投稿2019/11/23 14:26

編集2019/11/23 14:32

jun68ykt

総合スコア9058

tokkuman

2019/11/23 14:32

回答ありがとうございました。やはり、nodeValueではfirstChild.をつけなければならないということでよろしいでしょうか。

jun68ykt

2019/11/23 14:37

そうですね。nodelist.item(0)　は <b> 要素で、.nodeValueでテキストを取得するには、<b> から、 <b> に含まれるテキストノードへともう一段降りないといけませんので、そのために .firstChildが必要ですね。

tokkuman

2019/11/23 15:14

回答ありがとうございました。迅速な回答に感謝いたします。

jun68ykt

2019/11/23 15:23

どういたしまして。蛇足ですが、以下は MDN の .nodeValue の説明です。 https://developer.mozilla.org/ja/docs/Web/API/Node/nodeValue 上記の中に > 以下の表は、様々なノードの戻り値を表しています。という一文とともに表があります。この表に、.nodeValue が有効な値またはnullを返すノードの種類が一覧されています。

行動規範の内容に同意します

シンプルには、

JavaScript
1nodelist[0].textContent = "ストロング";

タグ自体のノードについてのnodeValueはnullです。
テキストノードを指定しないとnodeValueがテキストになりません。
nodelist[0].firstChildはテキストノードです。

投稿2019/11/23 14:30

otn

総合スコア84538

tokkuman

2019/11/23 14:37

わかりやすい回答ありがとうございました。しっくりきました。以上よろしくお願いいたします。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！