What is the difference between ˍˍˍ and ˍˍˍ in the front-end development? - this vs thatWhat is the difference between ˍˍˍ and ˍˍˍ in the front-end development?Star me on GitHub ● 1316★
Events and disabled form fields
I've been working on the web since I was a small child all the way through to the haggard old man I am to day. However, the web still continues to surprise me. Turns out, mouse events don't fire when the pointer is over disabled form elements, except in Firefox. Serious? Serious. Give it a go. Move the mouse from the blue area below into the disabled button: It's not like the disabled button eleme
Introduction to yo‑yo.js | Writing JavaScript
yo-yo is a module that creates and updates DOM elements. Instead of using a virtual DOM like react or virtual-dom, yo-yo uses the actual DOM to diff changes and make efficient updates yo-yo uses tagged template strings to create DOM elements. No JSX Because yo-yo uses tagged template strings, we don’t have to introduce a special HTML-like language. We can just write HTML inside the template string
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
配列に格納されているノードをドキュメント順(<html><head></head><body></body></html>この... - Yahoo!知恵袋
XPath エンジンをお作りでしょうか。 var nodes = [ doctype, meta2, body, head, meta1, html ]; // 重複なし // DOM Level 3 Core if ('undefined' !== typeof document.compareDocumentPosition) { nodes.sort(function (n1, n2) { var p = n1.compareDocumentPosition(n2); if (0 !== (p & Node.DOCUMENT_POSITION_DISCONNECTED)) { throw new Error; } if (0 !== (p & Node.DOCUMENT_POSITION_FOLLOWING)) { return -1; } return 1; }); } // DO
appendChild vs insertBefore | High Performance Web Sites
May 11, 2010 12:15 am | 43 Comments I’ve looked at a bunch of third party JavaScript snippets as part of my P3PC series. As I analyzed each of these snippets, I looked to see if scripts were being loaded dynamically. After all, this is a key ingredient for making third party content fast. It turns out nobody does dynamic loading the same way. I’d like to walk through some of the variations I found
Win2D 1.9.0 - new text features, high dynamic range colors, ink geometry, and Mandelbrot zooming demo - MSDN Blogs
Microsoft is holding an AI Agents Hackathon, and we want to see what you can build with Python! We'll have 20+ live streams showing you how to build AI agents with Python using popular agent frameworks and Microsoft technologies. Then, you can submit your project for a chance to win prizes, including a Best in Python prize!
window.frameElement - Web API | MDN
WindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 mozInnerScree
TextNodeにも使えるgetBoundingClientRect - gifnksmの雑多なメモ
JavaScript（というかDOM? CSSOM?）には getBoundingClientRect という便利なメソッドが用意されています。これを使えば，ある要素のviewport上の座標，つまりブラウザ画面の左上を原点とした座標上での要素の位置を取得することができます。これまでは d:id:gifnksm:20100729:1280429284 のgetOffset関数のように，offsetParentを辿っていく方法で位置を取得していました。また親要素に position: fixed; が指定されている場合などを考慮すると，d:id:gifnksm:20090506:1241630603 のように非常に長い関数を書かざるを得なかったりして，何かと面倒でややこしくて，できるだけ敬遠したい処理でした。複雑な関数を書いても，最終的に任意の文書に対して正しく動作するか結局よくわかりません
XUL Apps > Tips > 選択範囲のリンクを収集する ～ DOM2 RangeのcompareBoundaryPointsの使い方 - outsider reflex
X-0031 選択範囲のリンクを収集する ～ DOM2 RangeのcompareBoundaryPointsの使い方 2005/4/2 TBEの「選択範囲のリンクを全てタブで開く」などの機能で利用している「選択範囲内のリンクを収集する」処理についての解説です。DOM2 RangeのcompareBoundaryPointsの使い方の解説を含んでいますので、そこだけ見てもOKです。 処理の流れ 選択範囲の取得と、対応するRangeオブジェクトの取得 Rangeの中に含まれるリンクを収集する その1：元のDOMツリーと切り離して処理する場合 その2：元のDOMツリーの中で処理する場合 DOMツリーの走査 そのノードがRangeの中にあるかどうかを調べる 実際の判別 部分選択されたリンクに対する特別な処理 部分選択された「最初のリンク」を選択範囲内に含める 「選択されているようには見えない」リ
XPathとSelectorsAPIとgetElementsBy〜の使い分け - 素人がプログラミングを勉強していたブログ
微妙に役割の被っている、document.evaluateとSelectorsAPIを、どう使い分けるかという話。 僕は最近、 タグ名、クラス名、idで一発で取得できる場合は速度のためにgetElements系のものを使う。 XPathでできて、SelectorsAPIでできない時は、XPathを使う。 XPathでもSelectorsAPIでも出来るときは、特別な理由がない限りSelectorsAPIを使う。 のような感じで使い分けている。 クラス名を扱う時はSelectorsAPIを使う。 例えば、はてなキーワードを普通のリンクにするJavaScriptは、XPathを使うと var keywords = document.evaluate("descendant::a[contains(concat(' ',@class,' '),'keyword') or contains(con
XUL Apps > Tips > 要素の内部テキストを得る - outsider reflex
HTML を操作するスクリプトでは elem.innerHTML や elem.innerText のようなプロパティが使えれば便利なのですが、 Mozilla には innerText がありません。こういう場合、自分で似たような関数を作っておくと便利です。 以下は、再帰処理を使った例。 function getInnerText(node) { var nodes = node.childNodes, ret = []; for (var i = 0; i < nodes.length; i++) if (nodes[i].hasChildNodes()) ret.push(getInnerText(nodes[i])); else if (nodes[i].nodeType == Node.TEXT_NODE) ret.push(nodes[i].nodeValue); else i
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Range - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback Range インターフェイスは、ノードやテキストノードの部品を含むことができる文書の範囲を表します。 範囲は Document.createRange() メソッドにより生成することができます。また、 Selection オブジェクトの getRangeAt() メソッドや Document オブ
Selection - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback Selection オブジェクトは、ユーザーが選択したテキストの範囲、またはキャレットの現在の位置を表します。検査や操作のために Selection オブジェクトを取得するには、 window.getSelection() を呼び出してください。 ユーザーは、左から右（文書順）または右から左（文書
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sveltejs/svelte: web development for the rest of us
GitHub - 8th713/DOM-Promises-polyfill: DOM Promises polyfill
slightlyoff/Promises · GitHub
Window.scrollMaxY - Web API | MDN
掲示板/JavaScript質問板［過去ログ］/一覧/選択文字列部分のタグのid取得について - TAG index Webサイト