JavaScriptのID要素の中身をquerySelectorAll

こんにちわ

現在、AjaxでApiを使ってHTMLのcontentを収得しています。
それをquerySelectorAllで見出しタグから目次を作成しようとしていますが
うまくいきません。

AjaxでApiを使ってHTMLのcontentを収得した
そのHTMLのcontentを<div>の中に
すっぽりとApiのHTMLのcontentの文字列を入れて
HTML表示させています。

つまり、

--- html ---
<div id="entry-content"></div>

--- js ---
document.getElementById( "entry-content" ).innerHTML = object.api_html_content ;

こんな感じ

そのあと、JavaScriptで

var matches = document.querySelectorAll('h2, h3, h4');
var matches = document.getElementById( "entry-content" ).innerHTML.querySelectorAll('h2, h3, h4');

とやりたいのですが収得できません。

querySelectorAllのやり方は大体理解できているのですが
id要素からquerySelectorAllが出来るか教えてください。

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

• 

  回答ありがとうございました。
  
  Fetchはバッチリ使えるようになりました。
  
  見出しタグから目次はquerySelectorAllでなく　
  都合上
  正規表現で作ることにしました。

    補足日時：2019/07/21 20:41

No.4 ベストアンサー 回答者： fujillin 回答日時： 2019/07/17 16:56

No3です

＞ご指摘のように　APIから受け取った文字列を～～
これまでのやり取りから推察するところ、ajaxで内容を取得する前に内容を読もうとして、（まだ存在しないので）単純に失敗しているだけではないかと思います。

最初の、ご質問文に
＞そのあと、JavaScriptで～
とありましたので、順序の問題はないものとはずして考えていましたが、単なるタイミングの問題のように思えます。（要は、「そのあとに～～」が、後になっていないだけ）

このあたりの制御に関しては、No2様がすでに回答なさっていらっしゃいますので、そちらを参考になさるのが宜しいかと思います。
・・・ってか、他の方法でも良いですけれど、このようなタイミングの制御はajax等の場合には必須になりますので、避けては通れません。
一番簡単な対処法は、responceの処理に併せて、その後の処理もまとめて記述しておくことでしょうかね。

この回答へのお礼

なるほど、なるほど。。。。

(consoleのlog)
(consoleのlog)
(consoleのlog)
XHR finished loading: OPTIONS "https://api.xxx.com/.....".

となっているので
タイミングが悪く
うまくいかないということですね。

ajaxの処理にheaderにトークンをつけるのを覚えたばかりで余裕がないのです。
でも、MDNを見てみると暖めておけばうまく行きそうな気もします。

何度もお付き合い頂き、とても恐縮です。

----- MDN -----

Fetch API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Fe …

GlobalFetch.fetch() - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Wi …

-- ガイド --

Fetch の基本コンセプト - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Fe …

Fetch を使う - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Fe …

-- インターフェイス --

Body - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Body

Headers - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/He …

Request - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Re …

Response - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Re …

お礼日時：2019/07/17 18:19

No.3 回答者： fujillin 回答日時： 2019/07/17 11:36

No1です

＞console.log(el);
＞は、ちゃんと取れているようですが
＞console.log(matches.length);
＞は、0になります。
素直に解釈するなら、elの子孫要素にはh2, h3, h4要素（あるいはdiv要素）が存在しないってことでしょう。
同じタイミングで、
　console.log(el.innerHTML)
としてみれば、el要素内がどうなっているかを確認できると思いますが？

ご質問文によれば、その処理の前にel要素内に内容を書き込んでいるようですが、そちらの処理がうまくいっていない可能性が高そうに感じますけれど…

この回答へのお礼

回答ありがとうございます。

console.log(el.innerHTML);
は
undefined
になります。

getElementsByClassName
だと、いろいろとれるのですが
HTMLCollection []
で
0：h1.title1
1：h2.title2
2：h3.title3
3：h3.title3
4：h2.title2
.......
とか出てくるだけで
HTMLCollection { length: 0 }
のように length: 0なのです

--------------------------------

＞ご質問文によれば、その処理の前にel要素内に内容を書き込んでいるようですが、そちらの処理がうまくいっていない可能性が高そうに感じますけれど…

ご指摘のように　APIから受け取った文字列を
<div id="entry-content"></div>
につける前の文字列に注目することにしました。

文字列の検索でいじったら簡単に見出しタグから目次を作成出来たのでそれを採用します。

お礼日時：2019/07/17 16:32

No.2 回答者： yambejp 回答日時： 2019/07/17 11:18

以下のようにします

・ mypage.html
<script>
window.addEventListener('DOMContentLoaded', function(e){
var url="data.html";
fetch(url)
.then(data=>data.text())
.then(data=>document.querySelector('#hoge').innerHTML=data)
.then(()=>{
var matches=document.querySelector('#hoge').querySelectorAll('h2,h3,h4');
console.log(matches);
});
});
</script>

<div id="hoge"></div>

・data.html
<h2>hoge2</h2>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<h3>hoge3</h3>
<div>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<h4>hoge4</h4>
<div>
<span>7</span>
<span>8</span>
<span>9</span>
</div>

この回答へのお礼

回答ありがとうございます。

シャレたやり方ですね。

元がややこしいので、今回はパスしますが、

機会があれば、参考にします。

お礼日時：2019/07/17 16:14

No.1 回答者： fujillin 回答日時： 2019/07/17 10:30

こんにちは

＞id要素からquerySelectorAllが出来るか教えてください。
意味がよくわからないけれど、特定のDOM要素に対してquerySelectorAllメソッドが使えるかって意味なら使えます。
https://developer.mozilla.org/ja/docs/Web/API/El …
（↑）にも記されていますが、戻り値はNodeListになりますので、その後の扱いにご注意。


＞var matches = document.querySelectorAll('h2, h3, h4');
要素は取得できているはずです。（対象が存在しない場合も含めて）
　alert( matches.length )
などとすれば、取得要素数が表示されるはずです。

＞var matches = document.getElementById( "entry-content" ).innerHTML.querySelectorAll('h2, h3, h4');
innderHTMLの結果は、基本的に文字列になりますので、これに対してはquerySelectorAllメソッドは存在しないためエラーになるはずと思います。
エラーが発生してはいませんか？？

この回答へのお礼

回答ありがとうございます。

上記のMDNの解説の通り

let el = document.querySelector('#entry-content');
console.log(el);
let matches = el.querySelectorAll('h2, h3, h4');
console.log(matches);
console.log(matches.length);

と　やってみると

console.log(el);
は、ちゃんと取れているようですが

console.log(matches.length);
は、0になります。

let el = document.querySelector('#entry-content');
console.log(el);
let matches = el.querySelectorAll('div');
console.log(matches);
console.log(matches.length);

と　やっても

console.log(el);
は、ちゃんと取れているようですが

console.log(matches.length);
は、0になります。

お礼日時：2019/07/17 11:16