Q&A
> この謎の挙動を紹介していたサイトとは、以下になります:
どこ？？？？？？？？
innerHTMLの謎の挙動について。
innerHTMLについて紹介されているいくつかのブログで、この仕様に反した謎の挙動をしており、「それを当たり前のものとして紹介している」のを発見し、どういうことなのか知りたく質問させていただきました。
###まず
innerHTMLは、その名の通り、
「element内部のHTML」＝「開始タグと終了タグで囲まれた領域」
という意味です。
‘’’html
「赤いdivエレメントの中にボタンが設置されている」
感じになるはずです。
###謎の挙動について
しかし、innerHTMLについて紹介されているいくつかのブログで、この仕様に反した謎の挙動をしており、「それを当たり前のものとして紹介している」のを発見しました。その謎の挙動とは、以下のようなものです:
innerHTML内にエレメントを記述すると、「自分自身が」その記述したエレメントに取って代わる
つまり、上の例ですと、
「id名がhogeの赤いdivエレメント」だったものが、
「id名がbtnのbuttonエレメント」に、
『変身』してしまう
というものです。
この謎の挙動を紹介していたサイトとは、以下になります:
どういうことでしょうか？
最近Javascript やhtmlの仕様が大きく変わったとかでしょうか？mdnのリファレンスなどを読みましたがよくわかりませんでした。
最悪、謎の挙動に関しては謎のままで構いません。
とりあえず、冒頭に書いた挙動が正しいということが確認できれば、それでいいです。
ご回答よろしくお願いします。
getElementById の前に document が抜けている。inner だから内側ね
こんなコードの提示のされかたをされても正しく挙動確認できるわけないじゃないですか
'''（カンマ3つ）ではなく ```（バッククオート3つ）です。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。また、URLが提示されていないことと、例示したJavaScriptがそもそもエラーで動かないこともあわせて修正してください。
以前の質問でtanatさんの回答をベストアンサーに選んでいましたが、本質問に生かされていないと感じます。
なぜ「あなた自身が行ったトライアンドエラーの結果」を質問文に書かないのですか。
https://teratail.com/questions/182205#reply-271173
回答への反応より質問の修正依頼への対応が先では。
WeilSpinorさんは以前から回答がついたら、補足要求は無視し続ける傾向がありました。
「解決に直接関係がない事」と切り捨てているのだと思われますが、それが質問をあいまいにして回答しづらい状況を産んでいる事にも気が付いていないのでしょう。
結局そのサイトは追記いただけないのでしょうか？
質問に記載されている通り検証されて記載の挙動をしているのであれば私も興味あります
回答5件
0
一つの可能性
この謎の挙動を紹介していたサイトとは、以下になります:
「以下」というサイトですね。
私には読めませんが、憶測で回答しましょう。
WeilSpinorさんがinnerHTMLとouterHTMLを読み間違えているからです。
トライアルアンドエラー (trial and error)
私が冒頭で述べた「正しいと私が思う挙動」が「実際に正しいこと」は、既に実験によって確認しております。
トライアルアンドエラーをしたのなら、その事実が全てです。
つまり、次のいずれかの可能性しかありません。
- WeilSpinorさんが読み間違えている
- WeilSpinorさんが試したトライアルアンドエラー結果の解釈が間違っている
- WeilSpinorさんが読んだサイトが間違っている
回答の効率
WeilSpinorさんが読み間違えたかもしれないサイトの情報源がなく、WeilSpinorさんが試した内容もない。
この状況で回答者はどうやって間違いを見つけることが出来ますか。
tanat さんが回答した内容も、質問で共有されなければ、回答に生かされる事はないのです。
はっきりいえば、確定情報の少ない質問に回答するのは時間の無駄です。
Re: WeilSpinorさん
投稿2019/04/13 05:01
編集2019/04/13 11:56総合スコア18162
トライアンドエラーなんて英語はないのでちゅ。
トライは動詞だけど、エラーは名詞なのでちゅ。
looperさん
ご指摘ありがとうございます。
親記事を修正しました。
0
Googleで"innerHTML"で検索して引っかかるブログサイトを検索結果の2ページ目まで一通り確認しましたが、そのような解説をしているサイトは一つもありませんでした。
質問文にもサイトが書いていないことから、そのようなブログがあるという話が嘘であると思われます。質問が虚偽であるならば回答も虚偽にしなければつじつまが合わない、という謎の理論により、私も嘘をつきます。
質問への回答: 謎の挙動が正しいです。
信じられないのであれば、実際に試してください。ちょっとコードを書いて、ブラウザの開発ツールから確認すればいいだけですので、**エンジニアなら誰でもできることです。**実際に己の目で動作を確認し、この回答が間違っている事を確信している人だけが、この回答への低評価をお願いします。
技術的に未熟で、確認の仕方を調べてもよくわからないというエンジニアの卵の人がいれば、その旨を別の質問に挙げてください。コメントで質問されても私は答えません。自分で動作を確認しようともしない、確認の仕方を調べようともしない人は、エンジニアになる資質が全くありませんので、別の道に進まれることをお勧めします。
投稿2019/04/13 04:05
編集2019/04/13 04:05
総合スコア21735
ご回答ありがとうございます。
私が冒頭で述べた「正しいと私が思う挙動」が「実際に正しいこと」は、既に実験によって確認しております。
そもそも、それを確認していないにも関わらず、このように自信満々に断言形で語ることをする人は、(詐欺師でもない限り)あまりいないのではないでしょうか？
ちなみに、
URLの記載漏れは私のミスですが、それをもって虚偽とまで解釈されてしまうとまで予想してはおりませんでしたが、世の中にはそのように受け取る方もいらっしゃるということで理解して、今後注意していきたいと思います。
>hoge.innerHTML = “<button id=“btn”>ボタン</button>”
「そもそもJavaScriptとして動かないコード」を提示されて「既に実験によって確認しております」っておかしいですよ。構文エラー起きるコードを以てどうやって検証できるんですか？
あなたが確認したかどうかは質問文に一切書いていません。私にはその旨を知る方法ありません。
あなたが「実際に正しいこと」を確認しているのであれば、結局「正しい」「正しくない」の二択があなたの聞きたいことでは無いと言うことですか？そうであれば、あなたが聞きたいのは一体何ですか？
自分が確認したブラウザには不具合があり、間違った動作をしているかもしれない、または、調べることができない他のブラウザの方には不具合で異なる動作をするかも知れない、ということを確認したいのですか？そうであれば、あなたが確認したという環境(OSやブラウザ、および、それぞれのバージョン)すべてを明記し、あなたでは調べることが難しい環境(たとえば、Macを持っていなかったら、MacのSafariの動作を調べるのは難しいでしょう)を聞けば良いでしょう。そうしたら、その環境を持っている人が調べて回答してくれると思います。
それとも、あなたが行った確認方法があっているのかわからないという事ですか？そうであれば、どのような方法で確認したのかを細かく書いてその方法で確認しても問題ないのか、抜けが無いのかを聞けば良いでしょう。
あなたが本当に聞きたいことを「質問文」にきちんと書いてください。あなたの質問は「俺の従姉妹の親友の父親の上司の息子の同級生が通っている塾の先生をやっている大学生が片思い中のコンビニのバイトの娘の兄が次の元号が『安久』になるという謎の主張をしているが、正しいのか？」と聞いているようなもので、それには「正しくない」としか答えようがないものです。
0
innerHTMLの仕様を調べてみましたが、
DOM Standard
↑の中にはなく、↓こちらにあるようでした。
DOM Parsing and Serialization
この文書はWorking Draftであるようですから、正式な仕様として採択には至っていないと思います。
きちんと調べていませんが、もともとinnerHTMLはIEの独自拡張という位置づけであったかと記憶しています。実際に Netscape では後期のバージョンになるまで使えなかったと思います。
DOM の仕様に採択されなかったため、「innerHTMLは将来的に消えるかもしれませんので非推奨のプロパティです」とかなり昔に読んだ何かの本に書いてあったような記憶があります。（その後、HTML5の仕様に名前が載ったので、もう消えることはなくなったのではないかな？）
なので、「DOM API として正しい振る舞いは何か」という問いには、「実装による」という身もフタもない答えもある意味では正しいのかな、と思いました。
投稿2019/04/15 10:36
総合スコア36057
otolabさんと内容かぶってました。ちゃんと読んでなかったです、すみません。
otolab さんの回答は「DOM0（非標準）」で古いMDN情報を基にしたものなので、仕様としては Lhankor_Mhy さんの回答が正解だと思います。
(現在では、https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML も DOM Level 0 ではなくなっています)
従来のinnerHTMLは非標準でしたが、後追いで標準化されています。
仕様は現在の実装と矛盾がない範囲で策定されている為、詳細に仕様化されていない部分があります(例えば、タグ名の大文字/小文字の指定がなく、従来はブラウザごとに出力に差異がありました)。
しかしながら、本質問に限定するなら、仕様には "Returns a fragment of HTML or XML that represents the element's contents." と明確に書かれていますので、それが答えだと思います。
(余談)
回答で問題に対する「直接的な答え」を掲示した場合、「答えだけ拾って解決へのアプローチ法を無視する質問者」がそれなりに多い気がしています。
なので、あえて直接的な答えを書かない事がありますが、多種多様な回答が寄せられると、「答え」を寄せる回答者も出てきます。
質問者は「答え」をベストアンサーに選んで終了し、解決手段は無視する、という現実が悲しいです。
コメントありがとうございます。
正直、Working Draft の位置づけがよくわからなかったので、もごもごした書き方になったのですが、これも標準化されているという認識でいいのですね。
(余談)については、安易に正解を書くのは質問者のためにならない、という私の回答へのご批判と読みました。
この質問者は初心者であり、かつ、何がわかっていないのかわかってない方だと思います。そういった方にはドキュメントやリファレンス、あるいは入門記事をおすすめするのがいいのではないかと思っていますので、そのようにしました。
この質問者に対して、公式のドキュメントを示すのはハードルが高いかもしれませんが、このどうしようもない質問への、私なりの皮肉だとお読みいただきたく。
> 質問者
はやくその記述をしているサイトを提示してください。
あ、DOM 0じゃなくなりつつあるんですね。勉強になります。
DOM Parsing and Serializationということは、パーサの標準化の文脈なんですね。
タグの閉じ忘れなどの処理など、ブラウザごとのノウハウだったHTMLのパース処理を標準化するという話だったはずなので「innerHTMLが標準化できなかった理由が解消する」という感じでしょうか。
ちなみに、WDとは何かについてはこちら。
https://www.kanzaki.com/w3c/process.html
otolab さん
ありがとうございます。参考になります。
しかし、これ、Editor's Draft 版でも大した変更もなさそうですし、なぜWD止まりにしてるんでしょうね？
https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin
0
とりあえず、冒頭に書いた挙動が正しいということが確認できれば、それでいいです。
自身で確認したんですよね？それなら、それが全てです。それでいいです。
それであなたの今後の人生に何か不都合が起きても誰の責任でもありません。
何かあっても自身の責任において自己満足で解決としておいてください。
質問する必要ないです。質問する時間も労力も無駄です。
投稿2019/04/13 05:20
編集2019/04/13 05:22総合スコア80842
0
ベストアンサー
古い情報や間違った情報は普通に世の中に溢れているので、悩んだら信憑性の高い情報源にあたったほうが良いと思います。
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML
可能ならDOMの仕様などを調べるのもおすすめですが、DOM0（非標準）だったはずなので、仕様には記述がないかも。
また、非標準の機能は「挙動が保証されていない」ので、そういう挙動をするブラウザもあるかもしれません（innerHTMLの挙動についてはたぶんナイと思いますが）。
確実性を求めるなら、非標準の機能以外の手段を使うのも良い方法だと思います。
投稿2019/04/14 06:47
総合スコア763
あなたの回答
tips
プレビュー
