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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1107閲覧

JavaScriptでの"js"ファイルから、HTMLのタグを参照?・取得?・選択?する方法について

siruku6

総合スコア1382

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/05/07 02:58

<課題>
JavaScriptを勉強しています。

[hoge.js] document.form1.text1.value="hoge"

と記述すれば、

[hoge.html] <form name="form1"> <input type="text" name="text1" value=""> </input> </form>

というhtmlファイルのテキストボックスに"hoge"と表示できました。
しかし、"form"タグを"div"タグに変えた場合、例えば下記のような場合、

[hoge_error.html] <div name="form1"> <input type="text" name="text1" value=""> </input> </div>

テキストボックスには何も表示されません。

<知りたいこと>
formタグなら良いということはわかりましたが、これはどういう決まりなのでしょうか。

他のタグ、例えばpタグなど数多くあるタグのうち、何が良くて何はダメなのかがわかりません。

そしてそれは、どこをどんなふうに読めばわかるのでしょうか。
中身は教えてくださらなくて構いませんので、公式リファレンスの該当ページと、そのリファレンスのどこをどう読んで解釈すればよいのかが知りたいです。

つまり、
他のエラーが発生した時も自分で調べられるようになりたい
ので、できればその方法を教えていただけないでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

Webの情報を読む前に、一度本屋で入門書から上級まで何冊か本を買って読むと今後の理解が進みます。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。

JavaScript ならとりあえずこれを通読してみてください、少し情報が古いところもありますがお勧めです。

【O'Reilly Japan - JavaScript 第6版】
https://www.oreilly.co.jp/books/9784873115733/

【O'Reilly Japan - 初めてのJavaScript 第3版】
https://www.oreilly.co.jp/books/9784873117836/

【改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛 |本 | 通販 | Amazon】
https://www.amazon.co.jp/dp/477418411X

投稿2017/05/07 04:31

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

siruku6

2017/05/07 04:48 編集

質問依頼の趣旨に近い回答をいただいたので、ベストアンサーにさせていただきました。 実際私も本は購入しており、「javascript本格入門」で調べものをさせていただきますが、結局載っていないものが多く(今回のことも載っていない)、当てにできないと感じています。 これだけのために、何冊も本を買って読むのも、お金と時間の無駄遣い(さらに結局載ってなくてストレスがたまる)と感じたため、お手数ながらお知恵をお借りいたしました。 が、やはり本しかないということなのでしょうか。 地道に調べていきたいと思います。ありがとうございました。
退会済みユーザー

退会済みユーザー

2017/05/07 04:55

ちょっと、コメントを見て気になったので。 > これだけのために、何冊も本を買って読むのも、お金と時間の無駄遣い うーん、質問に答えている回答者って、書籍に使うお金や時間をかけて知識を身につけているはずなんです。質問サイトで聞くことは簡単だし、手軽だけど、回答者たちの金銭的、時間的な投資の結果によって得られる回答なんだということを質問者の方々には意識してほしいと思います。
kei344

2017/05/07 09:36

To: siruku6 > 今回のことも載っていない 「モダンスタイル」ではないからです。要素の取得とかは普通に載ってたと思いますよ。 282ページ「6.2 クライアントサイドJavaScriptの前提知識」@改訂新版JavaScript本格入門
think49

2017/05/07 13:06

> 結局載っていないものが多く(今回のことも載っていない)、当てにできないと感じています。 まず、HTML では <div name="form1"> という書き方が許されていない(div要素にname属性が存在しない)という現実があります。 書籍を参考にするなら、HTMLの参考書から参照して下さい。 HTML/CSSの文法を守るのは大前提であり、その上でJavaScriptが動きます。 正しいHTML/CSSを書いているか、を確認してからJavaScriptのコードを考えるようにすると良いと思います。
siruku6

2017/05/08 10:24

説明の仕方が悪く、誤解を招いて申し訳ありません。また、実力もないにも関わらず大口を叩いてしまい申し訳ありません。 1冊や2冊買っても載っていないということはあると思いますが、数冊買っても本に載っていないということがこれまで多々あり、本には頼りきれないと常日頃感じております。 そこで、公式のリファレンスを希望した次第です。 確かにjavascriptの基本を身につける上で1、2冊の本はマスターすべきで、その努力が足りていないにもかかわらず、大口を叩いてしまったことは間違っていました。 ちなみに、今回のことが載っていないというのは、「formタグでなければ取得できない」、という説明が載っていないという意味で、実際載っていないようです。 282ページについては、確認しましたが、版が違うのかと思いますが、確認できませんでした。
guest

0

document.名前で取れるのはフォーム系の要素だけで、しかも古いやり方です。

今なら、以下のようなメソッドを使うやり方が主流です。

  • document.getElementByIdid属性を基準に検索(これは1個だけ取れます)
  • document.getElementsByClassNameclass属性を基準に検索(指定したクラスに属するものが全部取れます)
  • document.querySelector/.querySelectorAll…CSSと同様なセレクタで検索(Allなしは最初の1つだけ、Allありは全部取れる)

投稿2017/05/07 03:14

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

siruku6

2017/05/07 04:45

document.querySelector/.querySelectorAllは、初めて拝見しました。 記述が楽だから、なんでも".名前"でとろうとしたのがいけなかったんですね。
guest

0

document.form1 というのが「名前が form1 であるフォーム」を示しているものだからです。
div はフォームではないのだから、当然 document.form1 では取れなくなります。

JavaScript が出始めたころは、JavaScript で何らかの処理を行う対象としては、フォームが主だったため、フォームだけが簡略化した記述でアクセスできるようになっている、のです。
本来は maisumakun さんや kei344 さんが書かれているような方法で、アクセスするものです。

投稿2017/05/07 04:38

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

siruku6

2017/05/07 04:51

何が古く、何が新しいといったことも知ることができて勉強になっております。 理由や経緯を交えて説明いただけると、大変理解しやすくありがたいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問