便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver

2024/10/08 10 users MutationObserver プロパティ CSS 登場

DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新... 続きを読む

React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加える - Qiita

2023/07/19 6 users Qiita React TypeScript 構文 コード

React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加える Framer Motionは、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。 ライブラリの基... 続きを読む

mXSS - Mutation-based Cross-Site-Scripting のはなし - 葉っぱ日記

2014/05/08 83 users innerHTML 亜種 DOM構造 はなし 破壊

ここ数年、XSS業界の最先端で盛り上がっている話題として mXSS というものがあります。mXSS - Mutation-based XSS とは、例えば innerHTML などを経由してすでに構築されているDOMツリーを参照したときに、本来のDOM構造とは異なる結果を得てしまい、そのためにHTML構造の破壊を引き起こすという類のDOM based XSSの亜種とも言えます。mXSSに関しては以... 続きを読む

指定したサイトのDOMツリーを表示してくれる『domtree』 | IDEA*IDEA

2013/04/01 39 users DevTools IDEA node インタラクティブ

あぁ、ちょっといいかも？別にDevToolsで見れるからいいのだけれども。 というわけでdomtreeは指定したサイトのDOMツリーを見せてくれるサイトですね。 ↑ 例えばドットインストール。 微妙にインタラクティブで、クリックしてNodeを展開したりできますな。というわけでよろしければどうぞ！ » domtree.breckyunits.com/?v=2 続きを読む

Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ | Chrome Life

2012/11/06 108 users Chrome Developer Tools 裏ワザ 機会

Chromeをメインで使っている開発者の方は、Developer Toolsを開く機会も多いと思います。 一昔前はFirefoxでFirebugsを使っていた人も、Chromeのバージョンが上がったことによりDeveloper Toolsでも同等のことができるようになりました。 Chrome Developer Toolsを使えば、WebインスペクターでDOMツリーの確認やCSSの微調整、Java... 続きを読む

HTML5の新要素をinnerHTMLで生成できないバグを回避する - latest log

2011/02/06 96 users latest log パク 新要素 HTML5 enhance

js, enhance, IEIE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。var div = document.createElement("div");div.innerHTML = "section";document.body.appendChild(div);上記のコードを実行すると、... 続きを読む

hogehoge - DOM Elementオブジェクトをテキストダンプしてデバッグ

2006/12/30 68 users おいら Firefox hogehoge Mozilla系

JavaScript, FirefoxDOM APIを使用して作ったDOMツリー、うまく生成されているか見てみたい事は多々ある。少なくともオイラはある。簡単にテキスト表示してくれると嬉しいなぁと常々思っていたのだが発見した。Firefox（というかMozilla系かな）限定だろうけどXMLSerializerがあるのだ。使い方は簡単。 var serializer = new XMLSeriali... 続きを読む