こんにちは。よしかわです。
もりけん塾のJS課題2,3に取り組んだので、その振り返りを記事にしました。
今回のゴール
このDOMをJavaScriptでつくり、html内のulの中に差し込んでください
<ul> <li><a href="a1.html"><img src="/img/bookmark.png">a1</a></li> <li><a href="a2.html"><img src="/img/message.png">a2</a></li> </ul>
マークアップエンジニアの方がフロントエンドエンジニアになる為の課題より引用
あれやこれやと試したり、レビューを頂いたりしてなんとか形になった。。。
今回はその過程で「うわ、すごっ！！！」と、勉強になったことをまとめていきます。
学んだこと
Element.insertAdjacentElement()
liタグに子要素としてaタグとimgタグを挿入したい。
そんな時はappendChildだ！
li.appendChild(a).appendChild(img);<li><a href="a1.html">a1<img src="/img/bookmark.png"></a></li>うーん。よく見ると違う。
本当はimgタグをaタグのテキストの手前に挿入したい。
そこで役立つのがElement.insertAdjacentElement()
第1引数に挿入場所、第2引数に挿入したい要素を指定する。
今回はこんな感じ。
li.appendChild(a).insertAdjacentElement('afterbegin', img);Document.createDocumentFragment()
繰り返し処理でli、a、imgタグを生成し、最後にulタグにまとめて挿入する時の話。
何も疑うこともなくこんなコードを書いて完成としていた。
for (let i = 0; i < contentsArray.length; i++) {
// 要素の生成などの処理
ul.appendChild(li).appendChild(a).insertAdjacentElement('afterbegin', img);
}この部分について、レビューをいただきました。
そこで学んだのがcreateDocumentFragment
今のコードだとulにliを挿入するたびにDOMを更新してしまい、パフォーマンスが悪い。
だから一旦空のDocumentFragmentを作って、そこに生成した要素を追加していく。
ループ終了後にまとめてDOMに追加することで、更新を一度で済ませることができる。
これを踏まえたコードがこちら
const fragment = document.createDocumentFragment();
for (let i = 0; i < contentsArray.length; i++) {
// 要素の生成などの処理
fragment.appendChild(li).appendChild(a).insertAdjacentElement('afterbegin', img);
}
ul.appendChild(fragment);まとめ
今回も学びが多かった。
特にcreateDocumentFragmentなんかは、レビューで教えていただくまで全く知らなかった。
やはり自分にない視点からの指摘は勉強になるし、何よりとてもありがたい。
環境に感謝しつつ、今後も精進します。
あとがき
「もりけん塾」とは、もりけん先生が用意してくださった課題を通して、JavaScriptを学習するコミュニティです。
もりけん先生のTwitter: @terrace_tech
もりけん先生のブログ: 武骨日記
コメント