innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING// jQueryでHTMLエスケープする例 function escape(content) { return $('<div />').text(content).html() }
innerHTML += ... な書き方について - hogehoge @teramako
DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマーク - DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマークで『後でツッコミする』と書いたとおり、ちょっとツッコミたいと思う。 ツッコミ記事のつもりが、自分がツッコミされることとなり、ダメダメな記事です。それでも良ければお読み下さいｗ // サンプル1: パフォーマンスが悪い var ul = document.querySelector('#output'); for ( var i = 0; i < data.length; i++ ) { ul.innerHTML += ‘<li>’ + data[i] + ‘</li>’; } 上記コードはダメなコードであり、理由は、 li要素をループが回るたびに追
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
要素の表示/非表示をトグルするベストプラクティス - hogehoge @teramako
[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference を読んで、display = "block" はアカンやろ、と思ったので書いておく。 <div id="foo"> <p>FOO</p> </div> div#foo を JavaScript から表示/非表示をするには。 ダメパターン function show (elm) { elm.style.display = "block"; } function hide (elm) { elm.style.display = "none"; } これはダメなパターン。何故なら、show 関数が対象とする要素が、display: block で合っているか保証がないから。 場合によっては、inline,inline-block,table,
Firefoxで3Dが表示されない場合の対処
Firefox 11以降では3D表示（ページインスペクタ機能を利用）が可能です。が、どういうわけか3Dにできないケースもあるようです。私がそうでした。 ということで、Firefoxで3Dが表示されない場合の対処方法について紹介します。 １．3D表示する 対処方法は後回しにして（笑）、まずは3Dの表示方法から説明します。 メニューから「Web開発」→「調査」を選択。または画面を右クリックして「要素を調査」を選択。 ブラウザ右下に表示された「3Dビュー」をクリック。 これで3Dビューに切り替わります。マウスでドラッグすれば方向を変えられ、ホイールでズームイン・ズームアウトができます。 ２．問題点 ところが、冒頭で述べたとおり、私の環境では「3Dビュー」ボタンが表示されませんでした。 ネットを検索しても、 「3Dこんな風に表示されました！すごい！最高！」 という、まったく苦労せずに表示されました
Firefoxの「要素を調査」→「3Dビュー」で要素の調査が3次元で可能に！ - 結城浩のはてなブログ
Webデザイナーさんなど、すでにご存じの人には「何をいまさら」な話ですが、はじめて見たときものすごくびっくりしたので(^^; 1. FirefoxでWebページを表示する。 2. 適当なところで右クリックする。 3. メニューから[要素を調査]を選ぶ。 4. 右下の「3Dビュー」を選ぶ。 5. 要素の調査が3次元で可能になる！ 例 右クリックで「要素を調査」を選ぶところ。 「3Dビュー」を選んだところ。 ちなみに上の画像は11月からcakes（ケイクス）で始まるWeb連載「数学ガールの秘密ノート」を編集しているところ。
Touch Eventを実装したらいろんなサイトがぶっ壊れた
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 以前からMozTouchってのがFirefoxのWindows版だけサポートしてたんだけど、Firefox 18 (Windows版)で、W3C Touch Eventのサポートをするコードを突っ込んだ。僕がイニシャルコードを書いて、jmartinsに直してもらったんだけど。なのでWindows 7以降でタッチイベントをサポートしたデバイス (ThinkPad T400sとか) だとデスクトップ版でもタッチイベントが使えるようになった。(ChromeのWindows版も最近のバージョンからサポートしてるよ！) これを実装したら、地図がマウスでスクロールできない（意味がわからない）、スクロールバーが表示される（意味わからない）、ビデオが再生できない（意味
createTextNodeで半角スペースを入れたい… - tumblr
twitterでid:teramakoさんと@ssmylhさんに教えていただいたので覚書。 2012/2/18 0:45 ブコメで突っ込まれまくっているので全体的に修正。 ヤリたいこと createTextNodeで半角スペース(nbsp)半角スペースを生成して、span要素に挿入したい。 2012/2/18 0:52 修正 混同して書いていましたが、nbspではなく半角スペースです。nbspと半角スペースは別物です。 NBSPと通常のスペースの違いは、NBSPを含む文字列が行末に来て、かつ長すぎて行に収まらない場合、文字列全体（NBSPでつながっている文字列も含めて）が次の行へ移動することにある。これは通常の文字列の折り返しと類似している。たとえば、文字列“ambidextrously”は決して分割されることはなく、“am bi dextrous ly”（すなわち“am bi dextr
document.head がいつも同じ値である保証は無い - masa141421356’s blog
<html> <head id=headelement> <title>document.head></title> <script> var id1=document.head.id; </script> </head> <body> <script> var id2 = document.head.id; </script> <form name=head id=formelement><input type=text></form> <script> var id3 = document.head.id; document.write(id1); document.write("<br>"); document.write(id2); document.write("<br>"); document.write(id3); //id3 is "formelement" on some
DOMで既存スタイルシートにルールを追加してはいけない
(04/29)コードレビューの温度感表現に絵文字を使う (11/20)シェルの `if` はパイプ出来る (05/10)ノーコード・ローコードについての所感 (03/24)正規表現で何でもパース出来ると思うな (02/14)WSL2のインストールからTIPS迄まとめ (12/14)シェルスクリプトと改行コードの罠 (10/11)探し出せないページ (08/11)`xargs` で空白込みのパスを扱う (01/30)JavaScript無しでハンバーガーメニューを実装してみた（けど、恐らく使うべきではない） (01/03)プログラミング書き初めを行う「kakizome」リポジトリというアイディア JavaScriptでスタイルシートを操作するには? JavaScriptで既存HTMLページにCSSを追加する必要が出て来たのでちょっと調べた。 基本的に、document.styleSheets
insertAdjacentHTMLとinnerHTMLの速度の違い2 - jsdo.it - Share JavaScript, HTML5 and CSS
先に表示される赤いのがinnerHTML。 次の下の方に短い緑のがinsertAdjacentHTML。 右に行くほど、よりたくさんつまった要素に挿入しています。 棒にマウスを載せると時間が表示されます。 insertAdjacentHTMLの処理時間が一定なのに対して、 innerHTMLは値のサイズに比例して処理時間がかかる。 function measureAndDrawGraph(settings){ // 文字列を要素に挿入する関数 var insertTextTo = (function(){ if(settings.method === "innerHTML"){ return function(elm){ elm.innerHTML += settings.addingText; }; }else if(settings.method === "insertAdjacent
ITproの記事が酷い - hogehoge @teramako
JavaScriptの誤動作も - Internet Explorer 9の実力：ITpro いろいろ酷かったのでdisっておく。 例がダメ まず、1ページ目の『「非標準」の属性を参照できない』で、anchor要素に対してrel属性値を得るにはElement#getAttributeを使用しましょうという話。 まあ、この話自体はIE9の現状の仕様ってことで良いのだが、anchor要素のrel属性は旧HTMLでは「非標準」だったかもしれないが、HTML5ではきちんと定義がされている。よって現状ではIE9のバグとも言える実装となっている。（IE9を試す環境がないので試してないがHTML5としてマークアップするときちんと取れたりするかも？） 将来的に使用できると思われるのを例として出すのは妥当ではないと思う。 ECMAScript5は関係ないよ また、 このような修正がなぜ必要なのかを、前述のC
Mojolicious hack of the day: CSS4 - Sebastian Riedel about Perl and the Web
Sooner or later most web developers stumble over one not so insignificant weakness of CSS3 selectors, you can't select parent elements. So while you can select img elements with an a parent, you can't select a elements with an img child. But this has recently been solved in a very clever way with the latest CSS4 working draft, where you can just change the subject of a selector by prepending a dol
UI Events (W3C First Public Working Draft 25 July 2013)
W3C Working Draft, 7 September 2024 More details about this document This version: https://www.w3.org/TR/2024/WD-uievents-20240907/ Latest published version: https://www.w3.org/TR/uievents/ Editor's Draft: https://w3c.github.io/uievents/ Previous Versions: https://www.w3.org/TR/2024/WD-uievents-20240906/ https://www.w3.org/TR/2024/WD-uievents-20240906/ History: https://www.w3.org/standards/history
DOMに要素が挿入される度にイベントを起こすDOMNodeInsertedの扱い方 - 三等兵
DOMに要素が挿入されたときを検出できるのがDOMNodeInsertedイベント。 たとえばajaxで特定の場所が表示されたらDOMに要素が挿入されたときや、ページング系のアドオンやユーザースクリプトでスクロールバーが下にきたら要素が挿入されたときなど、そういったときにイベントを発生させることができます。 要素が挿入されたかどうか検出するには自前でDOMを監視するコードを書く必要がありますが、このイベントを使えば簡単ですね。IE以外の主要なブラウザには実装されています。 しかしこれどうも確認してみたら非推奨になってるらしいんだけど。 http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted あれか。同期的だからかな。何もしらずに使うと面倒なことなりますからね。というかなりました。とはいえ、これに変わるものはない
HTML5フォームとdate input型 (その2) | Web標準Blog | ミツエーリンクス
前回はHTML5で追加された新しい型<input type=date>を取りあげ、未知の型の処理や値のサニタイゼーションについて紹介しました。今回は、バリデーションを中心に実装の問題や今後の懸念について紹介します。 WebKitのdate実装 時間関連の型はOperaで実装していると書きましたが、WebKitでも実装が勧められています。ChromeやWebKitのナイトリービルドで<input type=date>を含むHTMLを表示させると、<input type=number>のようなスピンボックスが現れます。 しかしながら、現時点ではdate型において値のサニタイゼーションが行われません。ですから、誤った値が追加されても、value属性の値が空文字列にはなりません。 というわけで、いま<input type=date>を使う場合は、date型を与えて、input.typeが同じ値を返
HTML5フォームとdate input型 (その1) | Web標準Blog | ミツエーリンクス
Peter-Paul Kochの運営するサイトQuirksMode.orgに、HTML5のinput要素に関する互換性テーブルが追加されています。 The new input types HTML5 tests - inputs HTML5 tests - inputs (mobile) デスクトップでは対応状況にばらつきが、モバイルにおいては対応が進んでいない印象を受けます。 さて、記事中でも触れられていますが、今回は<input type=date>といった、時間に関連するinput要素の型についてとりあげようと思います。 HTML5では、時間に関連する6つのinput型が追加されています。 datetime date month week time datetime-local これらの型に充分なかたちで対応するのはOperaです。HTML5のフォーム仕様の漸進であるWeb Form
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
createDocumentFragmentとcreateRangeとinsertAdjacentHTMLとcompareDocumentPositionとパフォーマンスとブラウザ互換
はてなブログ | 無料ブログを作成しよう
JintrickのマイクロWeb日記, 2011 春