【JavaScript】querySelectorで取得した値にテキストを追加したい

お世話になります。

ガイドブックでJavaScriptの勉強をしています。

サンプルコードに動作確認と忘備録のため
querySelectorで取得した値をコンソールログに出力しました。

ところが出力の時にテキストの追加が出来るものと、出来ないものがあります。
「全部できる」もしくは「全部出来ない」ならわかるのですが、
出来る場合と出来ない場合の違いが判りません。

querySelectorで取得した値はどういう場合なら、
テキストの追加が可能で、どういう場合は追加出来ないのでしょうか？

テキストの追加が出来る場合と出来ない場合の違いを教えて下さい。

追記
もし可能でしたら、テキストを追加する方法も教えて下さい。
サンプルコードは以下です。
※コンソールの出力結果は画像の通りです

<script>
var lang=document.querySelector('html').lang;
console.log(lang+'：言語');

var optB = document.querySelectorAll('option');
console.log(optB);

var lang=document.querySelector('html').lang;

var opt;
if(lang==='ja'){
opt=document.querySelector('option[value="index.html"]');

} else if(lang==='en') {
opt=document.querySelector('option[value="index-en.html"]');

} else if(lang==='fr') {
opt=document.querySelector('option[value="index-fr.html"]');

} else if(lang==='zh') {
opt=document.querySelector('option[value="index-zh.html"]');
}

console.log(opt);
console.log(opt+'：選択したオプションの値');

//選択された値のプルダウンメニューをスライド表示する
opt.selected=true;

document.getElementById('fomId').selN.onchange=function(){
location.href=document.getElementById('fomId').selN.value;
}

</script>

No.1 ベストアンサー 回答者： yambejp 回答日時： 2019/03/05 10:53

querySelectorAllで得たリストはNodeListで、その中の要素は

属性に応じたオブジェクトになるわけです。
optionを拾っているならHTMLOptionElementになります
オブジェクトに値を付加しようとしても無理で、
この場合であればoptionのvalueやtextContentに対して処理します

<script>
window.addEventListener('DOMContentLoaded', function(e){
var opts=document.querySelectorAll('option');
var opt=opts[0];
console.log(opt+"hoge");
console.log(opt.value+"hoge");
console.log(opt.textContent+"fuga");
});
</script>

<select>
<option value="1">x</option>
<option value="2">y</option>
<option value="3">z</option>
</select

この回答へのお礼

解答して頂きありがとうございます。

テキスト化する必要があるものと、そうでないものがあるんですね。

>オブジェクトに値を付加しようとしても無理で、
この場合であればoptionのvalueやtextContentに対して処理します

↓　これのことですね。
console.log(opt.textContent+":fuga");

何回も読んでみたのですが、
↓　にならないのは「.value」で拾って来ているのでオブジェクトではないからですね。
console.log(opt.value.textContent+":hoge");

「console.log(opt.value+":hoge");」で拾ってき時点で
既にテキストなので「textContent」はいらないということですね。

今回は解答して頂きありがとうございます。
機会がありましたら、またお願いします。

※しばらく質問は開けておきます。

お礼日時：2019/03/05 12:07