[B! DOM] janus_welのブックマーク

janus_wel id:janus_wel

DOMに関するjanus_welのブックマーク (6)

offsetTopやらoffsetHeightやら | 0から目指すWebマスター
コンテンツの高さだったり、ページ内の指定した要素を表示するようスクロールさせようとした際とか、毎回同じことをネット検索してしまうので、ここで高さを取得する方法に限定してまとめておきます。 ①画面の表示領域 window.innerHeight ②現在表示している上部は、コンテンツ上部からどのくらい離れているか window.pageYoffsetwindow.pageYOffset ちなみに、「window.pageYOffset」の代わりに、「document.documentElement.scrollTop」を使うと、iPhone（iOSのバージョン覚えておらず。。）でスクロール量に関わらず「0」が返ってきてしまってた。。 ③指定した要素は、コンテンツ上部からどのくらい離れているか document.getElementById(‘test’).offsetTop ④内包されたコンテ
janus_wel 2014/10/22
dev

DOM
リンク
要素が 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
janus_wel 2010/08/03
ある node A の ancestor が B であるか調べる方法

JavaScript

DOM
リンク
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成まとめ表の見方以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
janus_wel 2010/08/03
手を動かす

JavaScript

dev

DOM

html

xml
リンク
HTML 5の2つのDOM Storageを利用したカウンター - builder by ZDNet Japan
DOM Storageの仕組みを利用したカウンターの例 HTML 5の仕様では、sessionStorageがウィンドウやタブが開かれている間のみデータを保持するのに対して、localStorageではウィンドウやタブを閉じた後もデータを保持し、originが同じページで共有することはすでに説明した。現時点ではFirefox 3のglobalStorageもlocalStorageと同様に考えてよい。リスト1はその特性を利用したカウンターの例である。この例ではlocalStorage.visitsにカウンターの値を保持している。そしてsessionStorage.visitingが設定されていない場合のみカウンターの値を1つ増やすようにしている。リスト1 DOM Storageを利用したカウンターの例 DOM Storageによるカウンター最初にページを開いたときにはまだsessio
janus_wel 2008/12/10
session ひとつにつき一回かー

JavaScript

DOM

storage
リンク
HTMLDocument と XMLDocument を見分ける方法 - latest log
HTMLDocument と XMLDocument を見分ける方法を模索していました。 2008-10-12追記: 内容を大幅に更新しました何がしたいのか uupaa-selector.js version 1.2では、HTMLDocuemnt と XMLDocument で、CSSセレクタの挙動が変化します。 HTMLDocuemnt なら小文字の a タグと大文字の A タグは一緒。 uu.css("a"); で＜a＞, ＜A＞がヒットする XMLDocument ならタグの大小は区別する。 uu.css("a"); なら＜a＞のみヒットするこれを実装するためには、XMLDocument と HTMLDocuemnt を見分けたうえで動作する必要があります。どこを調べれば、XMLDocument を区別できるのか調べてみた text/html, elm = d
janus_wel 2008/11/30
微妙に異なるんだよね

DOM

JavaScript
リンク
javascript - json2dom() & dom2json() : 404 Blog Not Found
2008年06月15日06:00 カテゴリLightweight Languages javascript - json2dom() & dom2json() これまた車輪の再発明ではあるのですが、前に自分で作ったものを含めて気に入ったのがなかったので。 /lang/javascript/dom2json/ - CodeRepos::Share - Trac Demo Source: <div> <img alt="dan" src="http://www.dan.co.jp/~dankogai/dan-180x240.png" style="float:left" width="45"> The quick brown fox jumps over the blazy lazy.dog. <p class="pp" styl
janus_wel 2008/06/15
これで innerHTML と eval が透過に扱えるってことでいいのかな ( 適当

dev

JavaScript

DOM

JSON
リンク
1