前: JavaScript中級者になろう 5章・6章を読んだ - t_hazawaの日記
経緯
- 業務RDSをlambda で止める資料を書いてる途中
- 土日に社内ドキュメントシステム触るのは良くないのでJS中級者読む
第七章 さまざまな機能
七章第一回 複数のドキュメントを扱う
https://uhyohyo.net/javascript/7_1.html
iframe要素、すなわちインラインフレーム
- 何の略化初めて知った
same origin policy オリジンが同じでないと読めないということは、例えばこのサイト上のページのjavascriptは他のオリジン（例えばhttps://google.co.jp）上のページは読めません。
iframeで読み込んだ文書も一つの文書だから、その文書に対応するdocumentがあります
iframeElement.contentDocument;
loadイベントをjavascriptから登録するときはwindowに登録するのがいいでしょう。
window.addEventListener('load', function(){今回loadイベントを待つ理由は、iframe要素がtest.htmlを読み込むのを待つためです
- node.ownerDocument でどのdocumentに属してるかとれる
iframeの中から消えた理由は、ノードは1箇所にしか存在できないからです。既に木構造中に存在するノードが新しい場所にappendChildされた場合はこのように古い場所から移動してきます。
七章第二回 ノードどうしの位置関係を知る
https://uhyohyo.net/javascript/7_2.html
- elem.compareDocumentPosition(anotherElem)
- elem.DOCUMENT_POSITION_FOLLOWING
- 4 を DOCUMENT_POSITION_FOLLOWING に変換してくれるものはないのかな (なさそう)
- 表をみるしかないのかな
このように定義された順序付けを文書順とかtree orderと言います。
- 4 + 16 で 20になることもあるよ
- if (node.compareDocumentPosition(other) & node.DOCUMENT_POSITION_CONTAINED_BY) で、 contained_by か判定できる
- 論理和は |
- 排他的論理和は ^
ある値との排他的論理和ととった値があるとき、もう一度同じ値で排他的論理和をとると、もとの数値に戻ります。mnnとしたとき、mnn = mnn = m0 = mという性質によるものです。
javascriptである値を真偽値に変換するには、boolean(値)というようにboolean関数に渡せばよいです
実は、a&&bの返り値はaかbかのどちらかです。具体的には、aを真偽値に変換してtrueならbを返し、falseならaを返します（aを真偽値に変換した結果を返すわけではないので注意してください） 3&&"foo"は"foo"となります。短絡実行
a||bはaを真偽値に変換してtrueならaを返し、falseならbを返します。短絡実行
七章第三回 条件を満たすノードを順番に処理する：TreeWalker
https://uhyohyo.net/javascript/7_3.html
- TreeWalker
- 初めてきいた
木構造の上を移動しながら次々処理をしていく
- document.createTreeWalker()
1つめの引数は頂点ノード、2つめと3つめは条件 3つめの引数に指定するのは関数です。この関数はフィルター
- NodeFilter.FILTER_ACCEPT, SKIP, REJECT
- tw.previousNode,nextNode
var node; while( node = tw.nextNode() ){ node; //そのノードに対する何らかの処理 }
parentNode() は条件を満たす親、祖先ノードに移動します(近い方から順にためす)
- previousSibling,nextSibling 兄弟ノード
七章第四回 ノードをまとめて扱う：DocumentFragment
https://uhyohyo.net/javascript/7_4.html
documentfragmentというものです。これは、題名の通り、複数のノードをまとめて扱うのに必要なものです。 これはノードの一種です 小型のdocumentのようなもの - 全く知らなかった
- 3兄弟を抜き出した時の親がDocumentFragment 仮の親
- document.createDocumentFragment();
DocumentFragmentを追加した場合、DocumentFragment自体は追加されず、DocumentFragmentの子ノードが直接追加される
documentfragmentに先にまとめて追加しておき（documentfragmentはdocumentとは独立した木構造だから追加しても画面を書き直す必要がありません）、最後にdocumentfragmentを追加すればいいのです。
- 1つ1つ、ほんもののdocument にノードを追加するより、ブラウザ的に楽らしい 2021/10/30 15:58
- なんか重要そう
HTML5ではtemplate要素の中身がDocumentFragmentにより表されています
七章第五回 サンプル：見出しのリスト
https://uhyohyo.net/javascript/7_5.html
- .textContent
また、textContentプロパティに文字列を代入することができ、その場合その要素の子がテキストノード1つになります
七章第六回 サンプルの改良
https://uhyohyo.net/javascript/7_6.html
第八章 Range
八章第一回 Rangeとは
https://uhyohyo.net/javascript/8_1.html
- また知らないものがきた
『え』から『お』まで
- ノードにまたがった範囲を表せるらしい 2021/10/30 17:03
オフセットは数値です。これは、最初の子ノードの前を0として、その次を1,その次を2,・・・と順番に番号をつけていったものです。
- テキストノードだと、オフセットがどの文字の間か、テキストノード以外では、オフセットがどの子ノードの間かになるみたいだ(？)
- document.createRange();
- この Range を何に使うのかはこの後書いてあるのだろう
八章第二回 Rangeの機能
https://uhyohyo.net/javascript/8_2.html
- range.deleteContents() 削除できる
- range.cloneContents()
- 親は DocumentFragments
- range.extractContents() とってこれる
- range.compareBoundaryPoints()
- node.compareDocumentPosition()
range.toString() は、Rangeの範囲を全てテキストにして返すメソッドです。
八章第三回 Rangeの活用とSelection
https://uhyohyo.net/javascript/8_3.html
- selection というものはよく使うらしい ユーザーが選択した範囲を表すものです。
- window.getSelection()
- selection.getRangeAt(0);
- 最初のRangeを取る
SelectionからRangeを除去する機能です。選択部分をSelectionから除去すると、実際に選択が解除されます。
- selection.removeAllRanges()
- document.addEventListener('selectionchange',function(ev){
- range.surroundContents(newParentNode)
- 新しいおやをいれてかこわせる
八章第四回 サンプルの改良
https://uhyohyo.net/javascript/8_4.html
- range.compareBoundaryPoints() を活用してる
- テキストノードにスタイルをつけるにはいちいち spanで囲わないといけなくて不便
- range.startContainer.splitText(range.startOffset); テキストノードの分割方法
- node.nodeType, TEXT_NODE, ELEMENT_NODE
- textNode.splitText(3) テキストノードをわける
返り値は、後ろに作られた新しいテキストノードです。
感想
- 知らないことをしれてよかった
- DocumentFragment は大事そう
- なんかあんまり使わない機能のような気がしなくもない (後半の「新しいJS」の章に期待)
時間まとめ
- 2021/10/23 に始める
- 10/23, 24, 30(2回), 11/1 にやった 5日分
- 120分程度(ブログ以外)
- 1章1時間程度
- ブログは15分くらいかな
- 累計: 717分
