Javascript valueプロパティ and value属性 違い

Question

拙い文章で失礼します！
JavaScriptのvalueプロパティとvalue属性の違いが何なのかさっぱりわかりません！

また、javascriptを進めているのですが、
value属性しか出てきていないところで、いきなりvalueプロパティが出てきました。
頭がパンクしてしまいそうでした。

双方、丁寧に教えて欲しいです。よろしくお願いします！

         document.getElementById("form").onsubmit = function (event) {
                event.preventDefault();
                const search = document.getElementById("form").word.value;
                document.getElementById("output").textContent = `「${search}」を検索中.....`;
        }

　　　　　　　<section>
                <form action="#" id="form">
                    <input type="text" name="word">
                    <input type="submit" value="検索">
                </form>

                <p id="output"></p>
                
            </section>

Comments

[think49]

逆にK-06さんが「知っていること」は何でしょう？
質問文に追記してください。

HTML,DOM,JavaScript、どのレイヤーで説明を求めているのか、判断できません。

[m.ts10806]

この内容だと、「どうすれば納得するのか」が見えません。

[K-06]

valueプロパティとは、どこからどのようにきたのか？をお聞きしたかったです！

要素を「document.getElementById(" ** ")」で取得するところまでは理解できています。
進めていると、「入力された内容を取得するにはvalueプロパティを使います。」とありました。
valueプロパティというのはdocumentオブジェクトのgetElementByIdメソッドのvalueプロパティという事なのでしょうか？

またこの憶測が違う場合は、ご教授いただけると助かります。
よろしくお願いします。

[m.ts10806]

調べれば良いのでは？まず「プロパティとは」というところから。

[think49]

オブジェクトとプロパティの概念はご存知ですよね？

それから、value属性はどこに？
HTMLの用語ということも知らないようなら、リファレンスをあたって下さい。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

[sousuke]

質問者さんの「value属性しか出てきていないところ」というのが提示のコード内のどこのことで
「いきなりvalueプロパティが出てきました」というのがどこのことかがわかりませんので
それを説明したほうがよろしいかと。

[K-06]

自分の情報収集不足でした！次からはしっかり調べてから質問させていただきます！

[m.ts10806]

収集不足というより、何も書いてないので調べてるのかどうかすら伝わる内容になっていない
＝説明不足　かと思います。
質問編集して追記すれば良い話です。

[think49]

sousukeさんの仰る通りだと思います。
質問の意図を明確にするようにして下さい。

Answer 1

イメージ的にはinputのvalue属性は初期値、valueは動的に変動できる値ですね
（厳密にはそういう定義ではありませんが）

Comments

[yambejp]

<input type="text" value="123">
<script>
var i=document.querySelector('input');
console.log(i.value); //123
i.value="456"; //inputの値は456が表示される
console.log(i.getAttribute("value")); //123
console.log(i.value); //456
i.setAttribute("value",789); // inputの値に変動がない
</script>

[K-06]

ご丁寧にありがとうございます。。。

[think49]

> イメージ的にはinputのvalue属性は初期値、valueは動的に変動できる値ですね
> （厳密にはそういう定義ではありませんが）

HTML Standard的には「value属性値=デフォルト値」
https://momdo.github.io/html/input.html#attr-input-value
「valueプロパティ値=現在の値」になります。
https://momdo.github.io/html/input.html#common-input-element-apis

[yambejp]

たとえばdialogのopenとかだと、ブラウザによっては属性でしかコントロールできなかったり
プロパティでできたりと、実装がまちまちです。
アンカーのhrefなんかは有名で、.getAttribute('href')と.hrefでは得られるものが
微妙にずれることがあります

[think49]

value属性値、open属性値、href属性値を同列に語るのはいかがなものかと…。
全て仕様が異なります。