モダンJavaScriptについて - Qiita
モダンJavaScript 仮想DOMを用いるライブラリの使用 DOMとは Document Object Modelの略 HTMLなどの文書をツリー構造として表現したもの コード上から文書の構造を読んだり、要素を変更することが可能。 仮想DOM DOMを直接操作せず、JS上で仮想DOMを操作し、差分のみDOMに反映する パフォーマンスの向上につながる パッケージマネージャー(npm/yarn)の使用 ソフトウェアのインストール、更新、設定、削除などを予め定義されたプロセスに従って自動化するツールのこと。 できること 依存関係を解決してくれる import先が明示的にわかる 公開されているパッケージやコマンドを利用可能 package.json 設計書的な役割 プロジェクトで使用している依存関係とそのバージョン、スクリプト等が定義されている package-lock.json プロジェクト
div タグのスタイルを参照しようとしたら参照できなかった話 - Qiita
const divElement = document.getElementById("hoge"); console.log(divElement.style.display); // 空文字が出力される 解決方法 上記のコードで言うと divElement.style.xxxx で参照できるのは JavaScript で動的に設定したスタイルとなるため、CSS で適用したスタイルを参照する場合は window.getComputedStyle() を使用します。 これで、DOM 要素の実際に適用されているスタイル（計算されたスタイル）を参照することができます。 const divElement = document.getElementById("hoge"); const computedStyle = window.getComputedStyle(divElement); con
【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】 - Qiita
const getNodesByXPath = (xpath) => { const result = document.evaluate( xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); return [...Array(result.snapshotLength)].map((_, i) => result.snapshotItem(i)); }; const nodes = getNodesByXPath('//div'); nodes; // [div, div, div, ...] 3. XPath とは 3.1. 概要 XPath とは XML 文書（HTML 含む）のさまざまなノードを指し示すことができるパス文字列のことです。 XPath は XML Path Language の略
Javascriptがわからなかったので「DOM」を調べました。 - Qiita
はじめに こんにちは！ ガク@Necono_Engineerと申します！ プログラミングスクールRUNTEQで現在Ruby on Railsを中心に学んでいます。今回はjavascriptやReactを学ぶ中で出会ったDOMという概念についてまとめてみました！ ("ドム"と読みます) 概要 この度、PF作成のためにReactを学び始めたところ仮想DOMという言葉を知りました。 仮想.... というかまず、"DOM"ってなんなんだ？ そんな疑問を解消するためにJavaScript初心者がゼロから少しずつ学んだことを共有していきたいと思います。 DOMとは? DOM（ Document Object Model ）はWeb API( Application Programming Interface )の1つです。 API（ Application Programming Interface
HTML 全体の CSS を取得して Shadow DOM に適用する
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
DOMの基本。正しいHTMLとドキュメントツリーを理解しよう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。 ドキュメントツリーとは DOMスクリプティングでは、HTMLに関する正しい知識が求められます。まずは正しいHTMLとはなんなのかを理解していただきます。そして、DOMスクリプティングでは欠
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】Mutation ObserverでDOMを監視する - Qiita