DOMの操作

document.getElementByIdや、querySelectorを用いて
HTMLの要素を取得する際、
chromeでいうところの「ソースを表示」で表示されるソースからは取得できるものの、
そこには表示されず、
開発ツールの「element」に表示されるDOMツリーに表示されるソース、
すなわちJavaScriptで生成されているソースが取得できません。

そういうものなのでしょうか？
調べると、それも取得できるような感じがしていて、
そうだとすれば何か考えられる原因はありますでしょうか？

質問者からの補足コメント

• 

  回答ありがとうございます。
  iframeの中に対しての操作ではありません。
  
  おそらく順番だと思っているのですが、
  該当HTMLを生成しているJavaScriptの記述より後に書いており、不思議に思っています。
  
  調べると、
  https://hacknote.jp/archives/9886/
  の記事が出てきて
  jQueryなら
  
  $(function() {
  
  の記述でDOMが読み込まれた後に、それに対して動くとのことですが、
  
  window.onload = function() {
  
  だとそうならないということでしょうか？
  だとした場合、
  素のJavaScriptで
  
  $(function() {
  
  と同じことをしようと思ったらどう書けばよいのでしょうか？

    補足日時：2021/08/14 21:05

No.6 回答者： artoo 回答日時： 2021/08/16 01:56

> と同じことをしようと思ったらどう書けばよいのでしょうか？

それで合ってます。それ以降で、window.onloadを上書きしてない限り。

方針はあってるので、間違いをよく見て探しましょう。
開発者ツールのコンソールで、うまく行くように、やり直しながらトライするのが良いと思います。

No.5 回答者： tknakamuri 回答日時： 2021/08/15 10:59

う～んよくわからない。

DOMの要素を生成しているスクリプトと
それを参照しているスクリプトは、それぞれどこに
どんな具合に書かれているのでしょう?

No.4 回答者： fujillin 回答日時： 2021/08/14 22:01

No1です

＞該当HTMLを生成しているJavaScriptの記述より後に書いており、
＞不思議に思っています。
原則的には、記述順に実行されますが、ご提示のような
＞$(function() { ～～
の処理などは、その時にはイベントの設定処理が行われるだけで、実際の内容は後から(＝イベント発生時に)実行されることになります。
ですので、順序として上記の後に記述してあるからと言っても、全ての内容がその通りの実行順になるとは限りません。

＞素のJavaScriptで
＞$(function() {
＞と同じことをしようと思ったらどう書けばよいのでしょうか？
え～～っと、その文書でjQueryが使えるのなら、$(function(){～ と書けば、同じことをできますけれど・・・？
ただし、実行順の保証はなかったように記憶しています。（←記憶が曖昧です）
（jQueryの内部処理までは確認していないので、設定順の可能性もありますけれど…）

ちなみに、素のスクリプトであれば、
　window.addEventListener('DOMContentLoaded', function(e){　～～
のような記述になると思いますが、これも順序は確かではありません。
（↑あくまでも私の曖昧な記憶での話ですけれど…）

jQueryのドキュメントによれば、$( document ).ready()と同様との記述がありますが、
https://api.jquery.com/jQuery/
readyよりはloadイベントの方が後に発生すると考えられます。
https://developer.mozilla.org/ja/docs/Web/API/Wi …


とは言え、質問者様が編集可能な文書内のスクリプトであるなら、要素の生成処理の後に直接なさりたい処理を記述しておくのが確実と思います。
そのようなことができない何らかの理由があるのなら、仮に、$(function() {　内の記述で要素が生成されているとするなら、同様に$(function() {　の設定内で、更に、setTimeoutなどで実行を適当な時間遅らせるという方法も考えられます。
（あまりまともな方法とは言い難いので、最悪の場合の手段とでもお考え下さい）

No.3 回答者： artoo 回答日時： 2021/08/14 14:51

取得できます。

指定に誤りがないのに出来ないとすると、iframeやframeの中でしょうか。
その場合は、
document.querySelector(目的iframeを特定).contentDocument.querySelector(目的ノード)

iframeやframeの中でないのに取得できないのであれば、指定が間違っています。

No.2 回答者： tknakamuri 回答日時： 2021/08/13 21:28

>開発ツールの「element」に表示されるDOMツリーに表示されるソース、

何を言っているかイマイチわかりませんが
取得した要素をelementとすると
要素の文字列表現を
element.outerHTML()
で取れないってこと?

No.1 回答者： fujillin 回答日時： 2021/08/13 18:22

こんばんは

＞JavaScriptで生成されているソースが取得できません。
どのような環境で、何をなさろうとしているのかがわかりませんけれど・・・

DOMツリーに存在する要素であれば取得はできるはずです。
ただし、後から生成される要素は、それが生成される前に取得しようとしても、（まだ存在していないので）当然ながら取得はできません。

＞何か考えられる原因はありますでしょうか？
状況がわからないので、推測だけでありそうな原因を上げるならば、
上記あたりのタイミングを間違えてはいませんか？
あるいは、単純に要素の指定方法を誤っているとか…
またはiframeなどのような別文書内の要素ということはありませんか？