前提

chatworkのようなwebサプリを遊び半分で作っています。
チャット送受信については、web socketとポリーングの二つの方法で実現することができました。

実現したいこと

トークリスト一覧で未読件数をリアルタイムで反映する方法を知りたい

知りたいこと

ページ全体の一部だけ(トークリスト一覧)を一定時間で部分リロードする方法を知りたいです。

html
1<head>
2<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3<meta http-equiv="Content-Style-Type" content="text/css" />
4<meta http-equiv="Content-Script-Type" content="text/javascript" />
5<title>あなたのホームページのタイトル</title>
6
7</head>
8<body>
9<div id="outer">
10<!-- ここだけリロードしたい　-->
11<div id="header">
12<h1>あなたのホームページのタイトル</h1>
13</div>
14<!-- ここだけリロードしたい　-->
15<div id="main">
16<div class="content"><h2>記事ページ見出し1</h2>
17<p>文章あれこれ</p>
18<h3>記事ページ見出し2</h3>
19<p>文章あれこれ</p>
20<h4>記事ページ見出し3</h4>
21<p>文章あれこれ</p>
22</div>
23</div>
24<div id="right">
25<div class="title">サイドバータイトル</div>
26<div class="side">
27<ul>
28<li>記事ページへのリンク</li>
29<li>記事ページへのリンク</li>
30</ul>
31</div>
32</div>
33<div id="footer">
34<div class="copy">© 2010 あなたのホームページ</div>
35</div>
36</div></body>

m.ts10806

2019/12/06 07:56

部分リロードは基本的にAjaxの結果をもってhtmlを書き換えるのが一般的と思います(Ajaxの返りをその部分のviewにできれば楽) 今、どのような情報を返せているのでしょうか。追記願います

行動規範の内容に同意します

回答1件

ベストアンサー

「#outer」の中に「#header」があってそのあいだのテキストノードを書き換えるのでしょうか？
DOMはHTML要素単位で処理をするのでspanもなにもない部分を書き換えるのは
多少めんどくさくなりますけど、そういう認識で大丈夫でしょうか？

sample

HTML要素内の一部テキストノードを書き換える

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  const outer=document.querySelector('#outer');
4  const header=document.querySelector('#header');
5  var count=0;
6  var timerId=setInterval(()=>{
7    outer.removeChild(header.previousSibling);
8    outer.insertBefore(document.createTextNode(count++),header);
9  },1000);
10});
11</script>
12<div>
13<div id="outer">
14ここだけリロードしたい
15<div id="header">
16aaaaa
17</div>
18</div>

投稿2019/12/06 07:43

編集2019/12/06 08:08

yambejp

総合スコア116661

nanase21

2019/12/06 07:49

はい、大丈夫です。実際に実装するhtmlもdiv container内にトークリストとチャットエリア(3:7)を分けた書き方をする予定なので問題ないです。（そもそも、部分リロードが出来るのかが分からなかったので分かりづらいサンプルコードになってしまい申し訳ございません。）

kyoya0819

2019/12/06 07:52

それって回答でしょうか？

nanase21

2019/12/06 07:55

> それって回答でしょうか？私のコメントは、回答に対して意図を伝えただけです。

kyoya0819

2019/12/06 07:56

すみませんyambejpさんに対してです

yambejp

2019/12/06 08:09 編集

TO：asuchi0819 > それって回答でしょうか？「HTML要素内の一部テキストノードを書き換えるのは普通はやりません」という回答でした。とはいえ一応回答をつけてあります。

kyoya0819

2019/12/06 08:10

了解しました。

yambejp

2019/12/06 08:11

TO: nanase21 テキストノードの入替sampleをつけておきましたが、headerのpreviousSiblingが必ずしも書き換えたいテキストノードかどうかは保証がありません。ちゃんとしたジャッジのため相当な労力が必要になります。それをするなら間にspanでもおいて書き換えるほうがDOMらしいやり方だと思います

nanase21

2019/12/07 04:35

ご教示いただきありがとうございます。ご教示いただいたコードを参考にspanで試してみます。

行動規範の内容に同意します