JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
勝手に添削: 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
JavaScriptから使うDOM Level 2リファレンス
DOMについての簡単な説明 DOM (Document Object Model)は、妥当なHTML、または整形式XMLで書かれた文書に対するAPIです。 これらの文書の(ほとんど)すべての内容にアクセスしたり、内容を変更したり、追加したり、削除したり、という動作を定義しています。 この規格自体はCORBAに従っているため、どのようなオブジェクト指向言語でも使うことができますが、 特にJavaやECMAScript(JavaScript, JScript)で使われることを想定しています。 この文書ではECMAScriptからDOMを用いるのを前提としています。 DOMでは、HTML, XML文書をオブジェクトがツリー状に集まったものとして論理構造を見立てています。例えば以下のような文書(の一部)は、下のツリーのようなオブジェクトの集まりとして考えられます。 <TABLE> <TBODY>
JavaScript で XML を読み込む
DOMParser で XML を DOM ツリーに変換する Firefox で XMLを解析し、DOM ツリーを生成するには、DOMParser を使う。 Parsing and serializing XML – MDC によると、 Mozilla は現時点では W3C の Document Object Model Load and Save に対応していない ( bug 155749) ので、DOM ツリーをシリアライズおよびデシリアライズするには次の Mozilla 専用のインターフェイスを使うのが最も簡単です。… DOMParser - XML を文字列から DOM ツリーにパースする 例えば、「名前」と「年齢」を含む XML から、名前のみを抽出する。 cf. 文字列を DOM ツリーにパースする var theString = '<persons>' + '<person>
htmlソースからDOM生成用のJavaScriptコードを吐くツール【DOM Tool】｜JavaScriptプログラムメモ｜プログラムメモ
◆ DOM Tool http://muffinresearch.co.uk/code/javascript/DOMTool/ 便利です。 htmlソースを入力して【Create DOM Statements】ボタンを押すと DOM生成用のJavaScriptコードを吐いてくれます。 例：＜div id="text"＞＜/div＞というhtmlコードを JavaScript で実行したい。 HTML： <div id="test"></div> OUTPUT： var div1=document.createElement('div'); div1.setAttribute('id','test');
JavaScript Kit- DOM (Document Object Model) Reference
The DOM (Document Object Model) gives you generic access to most elements, their styles and attributes in a document. This is a no-nonsense, easy to follow DOM reference for JavaScript. Note that it's a work in progress as I continue to expand upon it over time. Enjoy! DOM Window Reference Window properties Window methods DOM Document Object Reference Document object properties Document object met
addEventListener の順番 - m2
(function(){ function a() {alert('a')} function b() {alert('b')} function c() {alert('c')} window.addEventListener('click', a, false); window.addEventListener('click', b, false); window.addEventListener('click', c, false); window.addEventListener('click', a, false); })() opera -> b, c, a; firefox -> a, b, c;
はてなブログ | 無料ブログを作成しよう
セメントドリンク、ブラウン管、吊るされた収納、OMORIカフェ、くり抜き、どや顔の初音ミク パチミラ福岡に出演する縁で博多に行きました。 楽しかったのでその時の写真をアップロードします。 博多駅のハートポスト 手描きのグリッチ カニの丸揚げ(おいしかった) フレッシュセメント という名前の飲み物(おいしかった)ごま+バナナスムージーっぽかった？ 泡系…
JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
![JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e43158a9b02ff4438d55128491865b833395bd4d/height=288;version=1;width=512/https%3A%2F%2Froundup-inc.co.jp%2Fwp-content%2Fuploads%2F2019%2F09%2F9106fa4d7b0fdf2534aa97dea102e186.png)
JavaScript/DOM » イベント » eventオブジェクト（イベント情報の取得） | PHP & JavaScript Room
サンプルを見る<script type="text/javascript"> /* イベントの型を取得 */ function getEventType(event){ var frmObj=document.frmevent; frmObj.elements["txt"].value=event.type; } </script> <form action="#" name="frmevent"> <input type="text" onFocus="getEventType(event)" /> <input type="checkbox" onclick="getEventType(event)" /> <select onchange="getEventType(event)"> <option value="">▼選択してください</option> <o
JavaScriptの動かないコード (中級編) iframe内にDOMアクセスできないエラー - 主に言語とシステム開発に関して
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： tenki.htmlの中に，天気が書かれている。 index.htmlのインラインフレーム内に tenki.html を表示して，その内容を解析する。 ※２つのHTMLは，同じフォルダ上にある。 index.html <input type="button" value="クリックして天気を表示" onClick="f()"> <br> <!-- ここに tenki.html を表示します。 --> <iframe id="ifr"></iframe> <script language="JavaScript"> function f() { // iframeを取得 var e_ifr = document.getElementById( "ifr" ); // ifram
高速な CSS セレクタエンジン「Sizzle」「Peppy」を試す - WebOS Goodies
最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、本日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲
JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(前編): CodeWeb
「WEB2.0へ繋がるイベントパンドラのまとめ」とかタイトルにつけてみようかと思ったけど大嘘つきになるのでやめた。 最近HTMLソース内に極力JavaScriptのソースを書かないでプログラムを組むように心がけてるので、ここらで一度自分用にまとめてみようかと思って今回はイベントハンドラ（？）について色々書いてみました。先にオチを言ってしまいますけど、最終的にはprototype-jsのEvent.observe使ってしまいますので内容にあまり期待しないように。 では、「テキストボックスの内容を下のテキストエリアにコピーする」というサンプルを使って長々と無駄に語っていきます。しばらくブログ更新してなかったので文章が変なのは仕様です。 これまでのJavaScript まず、従来のJavaScriptだとこんな感じです。とくに何も説明する必要もないと思います。 サンプル ソース <script
JavaScriptでHTMLをダイナミックに書き換える 前編
もともとは存在しなかったタグ要素を新たに追加したり、変更、削除するテクニックを学ぶ。こうした処理ができるのはDOMならではの魅力だ。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。 DOMスクリプティングでは、HTMLをJavaScriptから自由自在に書き換えられる点が大きな魅力です。これまで、HTMLに存在する要素の参照方法や属性の扱い方を学んできましたが、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jhop.me
Onextrapixel
Loading...