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,
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
DOMに要素が挿入される度にイベントを起こすDOMNodeInsertedの扱い方 - 三等兵
DOMに要素が挿入されたときを検出できるのがDOMNodeInsertedイベント。 たとえばajaxで特定の場所が表示されたらDOMに要素が挿入されたときや、ページング系のアドオンやユーザースクリプトでスクロールバーが下にきたら要素が挿入されたときなど、そういったときにイベントを発生させることができます。 要素が挿入されたかどうか検出するには自前でDOMを監視するコードを書く必要がありますが、このイベントを使えば簡単ですね。IE以外の主要なブラウザには実装されています。 しかしこれどうも確認してみたら非推奨になってるらしいんだけど。 http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted あれか。同期的だからかな。何もしらずに使うと面倒なことなりますからね。というかなりました。とはいえ、これに変わるものはない
要素が document につながっているかを高速に調べる方法 - IT戦記
とある要素が document につながっているかどうかを調べたい！ とりあえず、ほとんどすべてのブラウザで出来る方法としては、 parentNode で確認することができますね。 function isElementInDocument(node) { do { if (node === document) { return true; } } while (node = node.parentNode) return false; } でも 前の例だとちょっと遅いので contains や、 compareDocumentPosition を使うといいです！ コードにすると以下のような感じ function isElementInDocument(node) { if (document === node) { return true } else if (document.compa
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp
こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptとHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptはHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLとJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無（本来は必須ですが）などバリエーションが
安全な HTMLDocument の生成方法について - nothing but trouble
何が危ないのか img.onerror や img.onload は src 属性の内容が評価された段階で実行されるので、外部ソースに対して HTMLDocument を構築する際などで、意図していないタイミングでスクリプトが実行されるケースがある。 具体的には、以下のような場合。 var source = '<img src="not_found.jpg" onerror="alert(1)">'; var range = document.createRange(); range.createContextualFragment(source); // onerror が実行される var img = document.createElement('img'); img.setAttribute('onerror', 'alert(1)'); img.src = 'not_found.
Kanasan.JS Jetpack ワークショップ: Days on the Moon
Kanasan.JS Jetpack ワークショップに行ってきました。Jetpack は Firefox 用の簡易拡張プラットフォーム。私としては通常の拡張機能のほうが高い自由度を持てて好きなのですが、Firefox を広く一般に使ってもらうには、簡単なものを簡単に作れるようにするという点が重要なのでしょう。 最初に mollifier さんによる Jetpack 入門があった後、二人組になり各グループで Jetpack フィーチャーを作っていくという流れ。私は satyr さんとペアになったのですが、さすが satyr さん、ゴルファーだけあって見慣れぬ記法を次々と使ってきます。 var { href } = location; 上のコードは分割代入の省略形式で、 var { href: href } = location; の略、さらには、 var href = location.hr
文字の情報を調べるためのブックマークレット - IT戦記
ウェブで見かけた文字が、やたら気になることがあるので 作ってみました javascript:location.href = 'http://www.fileformat.info/info/unicode/char/' + (function(r){ var n = r.startContainer; var p = r.startOffset; return (n.nodeType == 3) ? n.nodeValue.charAt(p) : n.childNodes[p].textContent.charAt(0); })(getSelection().getRangeAt(0)).charCodeAt(0).toString(16) + '/index.htm'; void(0); 使い方は簡単 気になる文字を選択してブックマークレットを実行するだけ！ 対応ブラウザ HTML5 t
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その3 | Takazudo Clipping*
今回は、画像のロールオーバーを、今まで説明してきたように、クラスを使いながら作ってみます。リンクにマウスオーバー（及びフォーカス）されると、中にある画像のsrcの "_normal." を、 "_over." に変更してセットし、マウスアウト（及びブラー）されると、これと逆のことをします。 サンプルとソース サンプルその1 <ul> <li><a class="rollover" href="http://diablo.com"><img src="diablo_normal.gif" alt="Diablo" /></a></li> <li><a class="rollover" href="http://hoge.com"><img src="hoge_normal.gif" alt="HOGE" /></a></li> <li><a class="rollover" href="ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
createDocumentFragmentとcreateRangeとinsertAdjacentHTMLとcompareDocumentPositionとパフォーマンスとブラウザ互換
はてなブログ | 無料ブログを作成しよう
