innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING// jQueryでHTMLエスケープする例 function escape(content) { return $('<div />').text(content).html() }
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連載「数学ガールの秘密ノート」を編集しているところ。
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
勝手に添削: Selection内のHTML Textをいい感じに取得する: Days on the Moon
というわけでやってまいりましたこのコーナー! 本日のお題は「Selection内のHTML Textをいい感じに取得する - 枕を欹てて聴く」でございます。選択範囲のHTMLソースを抜き出すというやつですね。では早速いってみましょう! if(src.focusNode){ // selection まずは HTML5 テキスト選択 API の Selection オブジェクトが登場! 以後これに対する操作が続きます。しかしこの Slection オブジェクト、getRangeAt メソッドを使うとなんと選択範囲に対応する DOM 2 Traversal and Range の Range オブジェクトが取れちゃうんです! // common parent node search (以下 21 行省略) それ Range#commonAncestorContainer で取れるよ! // c
HTML5タグのtagNameが小文字になる - latest log
uuAltCSS.js は uuQuery.js にセレクタの処理を委譲しています。 <style> article>div:nth-child(even)>section { -uu-background-image: url(../../img/cover01.jpg); } </style> <article class="round"> article <div class="view"> <section class="round">section</section> </div> <div class="view"> <section class="round">section</section> </div> <div class="view"> <section class="round">section</section> </div> </article> 上記のマーク
Latest topics > DOM周りの根っこの所に変更が入ったみたい - outsider reflex
Latest topics > DOM周りの根っこの所に変更が入ったみたい 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « クレジットカードの認証で蹴られた Main AMOのコレクション機能を使ってみた » DOM周りの根っこの所に変更が入ったみたい - Jun 10, 2009 The Burning Edge見てたら、こんなバグがFIXEDになっていた。 Bug 468708 – namespaceURI for HTML elements should be http://www.w3.org/1999/xhtml Bug 468692 – localName should return in lower case for HTML te
hxxk.jp - 「リストの横並びで不思議な空白ができるアレ、をスマートに解決する」を読んでの自分用の再確認
記事データ 投稿者 真琴 投稿日時 2009-04-16T23:16+09:00 タグ DTD HTML SGML XHTML XML はてな はてなブックマーク メモ 仕様 概要 ul 要素の直下に配置できる要素は何か、 DOM ツリーに空白や改行はどのように反映されるのか、開始タグや終了タグの省略について、の三本です。 リプライ リプライはまだありません。 そういえば仕様について色々と書いていた時期が僕にもありました 最近は本業が忙しかったり、サイクリングや筋トレなどの運動をするのが楽しかったりで Web に関する興味と割ける時間がめっきり減っているのですが、今日はリストの横並びで不思議な空白ができるアレ、をスマートに解決する - vantguarde - web:g で HTML や SGML における開始タグ・終了タグの省略が参考リソースとして取り上げられていたので、それっぽい話で
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
テキストデータとHTML断片を区別する | 水無月ばけらのえび日記
以前に上記の方法と同じようなものを検討したことがある。エスケープ漏れが発生するのは、同じ変数の中味が処理の段階によって未エスケープからエスケープ済みに変わったり、未エスケープとエスケープ済みの変数が何の区別もなく混在しているからだという話をどこかで読んだためだ。 「安全なテンプレートシステムはあるのか」ですかね。型が同じなのが良くないのではないかという話であって、変数の名前で区別する話ではありませんが。 ……ところで余談ですが、新しいhatomaru.dllでも「全部DOMでつくり、InnerXml/OuterXmlには書き込まない」というポリシーは健在で、XSSに対する特別な配慮はほとんどしていません。それは良いのですが、実は「全部DOM」方式にも弱点があることが判明しています。 C#でこんなコードを書くと……。 XmlDocument result = new XmlDocument(
javascript - 特定のDOMをソース表示する : 404 Blog Not Found
2008年07月13日16:00 カテゴリTipsLightweight Languages javascript - 特定のDOMをソース表示する すでにいくつかのentriesで使っているのですが、かなり便利なので改めて紹介。 表示元 表示したいHTMLを適当にdivタグで囲ってidを振っておく。ここではhtml2show 表示先として空のpreを作っておき、そこにもidを振っておく。ここではhtmlsrc 以下のようなscriptを、preタグの直下に転がしとく (function(src, dst){ dst.appendChild(document.createTextNode(src.innerHTML)) })( document.getElementById('html2show'), document.getElementById('htmlsrc') ); もちろん以下
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
セクション内容の参照について (agenda)
div2 が認識可能であるか、XHTML で Pre-HTML 的に <div class="div2"> といった感じでマークアップしていれば、var div2 = document.getElementById('h-7.5').nextSibling; といった感じで id="h-7.5" な属性を持つ h2 要素の次の要素として div2 に相当する要素が取得でき、ここだけユーザに提供する、といった事が簡単に行えます。 Hack Or Die 2007/12 - Ancient libraryより といった感じ、というわけでこれでは殆どのケースでdiv2相当のdiv要素を参照することはできない。これで参照できるのは、h2の終了タグとdivの開始タグが隣接していることが分かっている場合だけだ。普通はソース整形のためのテキストノードになってしまう場合が多いだろう。 // 見出し要素とd
document.title の罠 - IT戦記
このエントリは一部間違っています。 こちらで訂正いたしました。 http://d.hatena.ne.jp/amachang/20070523/1179928332 いや大したことじゃないんですけど かなりハマったのでメモしときます。 通常ページのタイトルは以下で取れる var title = document.title; alert(title); // タイトルを表示 しかし、コンテンツ内に <div id="title"></div> のように id が title のものがあると var title = document.title; alert(title); // [object HTMLDivElement] となってしまう。 これでかなりはまった まとめ 不特定のページから title を取るような場合は多少めんどくさいけど document.getElementsByT
js-html - JavaScriptを用いたHTMLの省略記法 - Personnel
次のHTML文書の断片をDOM APIを利用して生成してみます： <div class="container" id="foo"> <h2>だいあろぐ</h2> <label> <input type="button" onclick="alert(true)" /> </label> </div> 実際にやってみると次のようになります（一例）。 var div = document.createElement('DIV'); var h2 = document.createElement('H2'); h2.appendChild(document.createTextNode('だいあろぐ')); div.appendChild(h2); var label = document.createElement('LABEL'); var input = docu
404 Blog Not Found:javascript - DOMMakerで楽々DHTML
2006年09月28日02:00 カテゴリLightweight Languages javascript - DOMMakerで楽々DHTML DHTMLは便利なものだが、DOM関連の関数でHTMLを「描く」のは、あまりに面倒だ。 たかだか <a target="blank" href="http://blog.livedoor.jp/dankogai">404 Blog Not Found</a> とやるのに、 var a = document.createElement('a'); a.setAttribute('target', 'blank'); a.setAttribute('href', 'http://blog.livedoor.jp/dankogai'); a.appendChild(document.createTextNode('404 Blog Not Found'
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://twitter.com/uupaa/statuses/3417964669
安全なテンプレートシステムはあるのか | 水無月ばけらのえび日記
http://www.stevetucker.co.uk/page-innerxhtml.php