回答編集履歴

2

追記)

2020/07/30 08:30

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

test CHANGED
File without changes

1

追記)

2020/07/30 08:30

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ```javascript
5
+ ```HTML
6
6
 
7
7
  <script lang="javascript" type="text/javascript">
8
8
 
@@ -21,3 +21,55 @@
21
21
  1. ``DOMContentLoaded`` 以降で実行するように書き換える。
22
22
 
23
23
  2. ``script``を ``body.lastChild`` に置く。
24
+
25
+
26
+
27
+ 追記)
28
+
29
+
30
+
31
+ **1. DOMContentLoaded を使う**
32
+
33
+ ```HTML
34
+
35
+ <script lang="javascript" type="text/javascript">
36
+
37
+ window.addEventListener("DOMContentLoaded", function(){
38
+
39
+ Stickyfill.add( document.querySelectorAll('.table1') );
40
+
41
+ });
42
+
43
+ </script>
44
+
45
+ ```
46
+
47
+ JavaScriptは ``<script>`` が読まれた直後に実行しますが、一部のAPIはすぐに使えません。
48
+
49
+ 1. DOM操作用の機能: HTML全体が読み込みを終了してから利用可能になる(``DOMContentLoaded``)
50
+
51
+ 2. HTML5APIの機能: 表示するページ用に初期化が終わて利用可能になる(``load``)
52
+
53
+
54
+
55
+ ※噛み砕いた説明ですので、**DOM操作用の機能**や**HTML5APIの機能**は正式な分類名ではありません。
56
+
57
+
58
+
59
+ **2. BODYの最後に置く**
60
+
61
+
62
+
63
+ ```HTML
64
+
65
+ <script lang="javascript" type="text/javascript">
66
+
67
+ Stickyfill.add( document.querySelectorAll('.table1') );
68
+
69
+ </script>
70
+
71
+ </body>
72
+
73
+ ```
74
+
75
+ HTML文書は、それぞれのタグが、親子、兄弟のように表現されますが、それぞれの誕生順でJavaScriptから操作できるようになります。この特徴を活かして``<script>``要素を後から書くようにすると、DOM操作(``document.querySelectorAll()``もそのひとつ) を使って、要素に対する操作ができるようになります。