NodeListを配列に変換するのにArray.applyを使うのはどうか - rikubaのブログ
NodeListやHTMLCollectionを配列(Array)に変換する方法の一つに、Array.prototype.sliceを使う方法がある。 var array = Array.prototype.slice.call(document.getElementsByTagName('A')); でも、最近の実装であればArray.applyもその用途に使える。 var array = Array.apply(null, document.getElementsByTagName('A')); ES3ではFunction.prototype.applyの第二引数には配列(Array)かargumentsしか取れなかったけど、ES5でその制限が緩和され、NodeListなどの array like オブジェクトも渡せるようになった。 なお、IE8以下ではどちらの方法でもエラーになるので
JavaScript APIs you’ve never heard of (and some you have)
The document discusses several JavaScript APIs related to manipulating the DOM and CSS, including some newer APIs that the reader may be unfamiliar with. It describes APIs such as insertAdjacentHTML() and outerHTML for inserting and retrieving HTML, children and firstElementChild/lastElementChild for traversing element nodes, and matches() and getBoundingClientRect() for working with CSS selectors
insertAdjacentHTML everywhere | Blog | Chrome for Developers
If we want to insert content in a HTML document we have three ways to do it: Using DOM methods like createNode and appendChild Using Document Fragments Using innerHTML One can arguably say we also have document.write for few use cases. innerHTML has been standardized in HTML5 and with it a brother method insertAdjacentHTML which works as innerHTML but allows us to define more specifically where we
DOM MutationObserver – reacting to DOM changes without killing browser performance. – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. smaug The right link to the spec is http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers Also, the API will be un-prefix very soon. We want to
insertAdjacentHTML() Enables Faster HTML Snippet Injection – Mozilla Hacks - the Web developer blog
The following is a guest post by Henri Sivonen: In Firefox 8, we’ve added support for insertAdjacentHTML(). It’s an ancient feature of Internet Explorer that has recently been formalized in HTML5 and then spun out into the DOM Parsing specification. The bad news is that Firefox is the last major browser to implement this feature. The good news is that since other major browsers implement it alread
HTML Parsing with JavaScript - davidflanagan.com
The project I've been working on in Mozilla's research group is dom.js: an implementation of the browser DOM in JavaScript. I've gotten much of the core DOM 4 document tree functionality implemented, and have started on DOM features defined by the HTML spec. One of those features is the innerHTML property. And to implement it, I need an HTML parser. So I dove in and implemented one. Here are some
DOM操作の主流になるか！？ セレクタAPIを使いこなそう
連載目次 従来、JavaScriptでは、以下のようなメソッドを利用して、操作対象の要素を特定していた。 getElementByIdメソッド：IDの値をキーにノードを取得する。 getElementsByTagNameメソッド：要素名をキーにノードを取得する。 getElementsByClassNameメソッド：class属性の値をキーにノードを取得する。 しかし、この方法で複雑な構造のHTML文書から要素を取り出す場合、コードが複雑になりやすいという課題もあった。例えば、以下は従来のgetElementXxxxxメソッドを利用した要素の取得例だ。 上記のJavaScriptコードでは、奇数番目の要素を特定するために全てのインデックス番号をif文で判定させている。ほかにも属性値やclass属性によって要素を絞り込むならば、同じような判定式を書いた経験が読者諸氏にもあるだろう。「もっと簡
NodeLists and Arrays in JavaScript — Can Duruk
19 Jun 2011 JavaScript is an admittedly quirky language, and its almost array-like objects is one of the most glaring issues. And of all those array-like objects, NodeLists are one of the most commonly used ones array-like objects that beginners trip on when they use methods like document.getElementsByTagName(). In this post, I’ll try to explain what NodeLists are, how they relate to arrays in Jav
Element Traversal API - 三等兵
今更ながらJavaScriptのDOM Core基礎 - 三等兵の付け足し。あの記事長いので重くて開けない。 http://www.w3.org/TR/ElementTraversal/ なんぞ？ firstChildとかlastChildとかが便利になったやつ。空白ノードとかコメントノードとか無駄なノードをよけて、要素ノード(nodeTypeが1)しか手を出しません。 やってみる // js var oda = document.getElementById('love_story'); alert(oda.firstChild.nodeType); // 3(テキストノード) alert(oda.firstElementChild.nodeType); // 1 alert(oda.lastChild.nodeType); // 3(テキストノード) alert(oda.lastEle
DOMに要素が挿入される度にイベントを起こすDOMNodeInsertedの扱い方 - 三等兵
DOMに要素が挿入されたときを検出できるのがDOMNodeInsertedイベント。 たとえばajaxで特定の場所が表示されたらDOMに要素が挿入されたときや、ページング系のアドオンやユーザースクリプトでスクロールバーが下にきたら要素が挿入されたときなど、そういったときにイベントを発生させることができます。 要素が挿入されたかどうか検出するには自前でDOMを監視するコードを書く必要がありますが、このイベントを使えば簡単ですね。IE以外の主要なブラウザには実装されています。 しかしこれどうも確認してみたら非推奨になってるらしいんだけど。 http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted あれか。同期的だからかな。何もしらずに使うと面倒なことなりますからね。というかなりました。とはいえ、これに変わるものはない
Nicholas C. Zakas「getElementsByTagName()がquerySelectorAll()よりも高速な件」 - 以下斜め読んだ内容
NCZOnline 2010.9.28のエントリ Why is getElementsByTagName() faster that querySelectorAll()? querySelectorAll()で取得されるNodeListは更新されない（static）件について getElementsByTagName()と比較して 処理の重さや、重くなる訳を仕様書やWebKitの実装を参照しながら説明して この２つのメソッドの使いどころを手短に記す という主旨のエントリ 豆知識 Scott Schillerは今Yahoo!のフェロー id:amachangの2008.3.6のエントリ「IE8 で実装された Selectors API とは何か？」でquerySelectorAll()／getElementsByTagName()の違いは分かりやすく書かれてる 以下斜め読んだ内容 エントリ
$("div").append("<section>section</section>") できないらしいので色々調べてみた - latest log
追記: jQ的には解決していませんが、素の JavaScript を使った回避方法がわかりました。IE8以下では、オンザフライで作成した要素に対して innerHTML すると謎要素が作成されてしまうといった現象がでるため、一度要素片を、DOMツリー( body とかね ) にぶらさげてから innerHTML すると回避できました。 つまり、オンザフライな↓ではだめで… var div = document.createElement("div"); // 作る div.innerHTML = "<section>ほげー</section>"; // 突っ込む → ι(´Д｀υ) ↓のようにすると謎の挙動を回避できます。 var div = document.createElement("div"); // 作る document.body.appendChild(div); // あて
[JavaScript]addEventListenerを手軽に使おう / LiosK-free Blog
2007-12-05 カテゴリ: Client Side タグ: JavaScript JavaScriptのイベント処理は面倒くさい。 ブラウザごとにaddEventListenerとattachEventを使い分けたり、eventオブジェクトを引数として受け取るかwindow.eventとして受け取るかを考えたり、thisの扱いについて考えたりしなくてはいけないからだ。 ということで、すごく苦手意識を持っていたのだが、↓の関数を書いておくだけでほとんどのケースには対応できるってことに気づいた。 function observe(target, type, listener) { if (target.addEventListener) target.addEventListener(type, listener, false); else target.attachEvent('on'
artemis.ac
artemis.ac artemis.ac is owned by Tool Domains. Contact them directly! 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Finding an Ancestor DOM Node — SitePoint
slightlyoff/Promises · GitHub
ObjectをDOM変換する
Replacing text in the DOM… solved? – James Padolsey
Build and implement a single sign-on solution
IBM Developer
