7
票
仮想DOMを使うと早くなる理由がいまいちわかりません
ぐぐってみると、この言葉の出所としては「リアルな DOM はなぜ遅いのか」という記事あたりではないかと思います。
仮想DOMを使っても、仮想DOMから実DOMを操作しているわけで、最適化されたJavaScriptを使って実DOMを操作するよりも速くなることはありません。
この言葉の意味は、仮想DOMを使った場合は、フロント実装者が気にしなくても差分のみをレンダリングしてくれるので高速になる。...
6
票
firstChild で取得した子要素の innerHTML が undefined になっている
結論から言えば、firstChildではなくfirstElementChildにすれば解決します。
firstChildはElementに限定せずノードを返します。<div id="childcatch">と<span>a</span>の間に改行と空白があるため、そこにtext nodeが作成され、firstChildとなります。そしてtext ...
4
票
承認済み
JavaScriptでタグを含む要素が返ってくる
文字列が返されるわけではなく、HTMLElementというオブジェクトが返されています。オブジェクトなので、例えばtagNameプロパティを持っておりその値は"LI"となっているはずです。このオブジェクトをconsole.log()で文字列化する際にouterHTMLの内容が出力されたに過ぎません。
4
票
承認済み
appendChildする際、親要素に[0]を付与するのはどんな時? getElementsByClassNameでは必須?
getElementById
IDはそのページで唯一でなければならないので、(もしあれば)結果は1つのエレメントであり[0]は不要です。
getElementsByClassName
結果はノードリスト(配列の様に扱える)であり、
例え結果が1つのエレメントであっても[0]が必要です(値が1つの配列と同じ意味)。
document.body は、
body要素を意味する(例えばid="...
4
票
承認済み
あるDOM要素に対してクリック等した時に実行されるjsを突き止める方法
Google Chromeの「Event Listener Breakpoints」機能を使用して、クリック等の操作を起点とした処理のトレースを取る事ができます。
Google Chromeの開発者ツールを開く(F12)
Sourceタブを開く
Event Listener Breakpoints ペインを開き、Mouse → click をチェックする。
この状態で要素をクリックすると、...
3
票
承認済み
scrollイベントはいつ発火する?
おおざっぱに言うと、暇なときにイベントが発火します。1つの要素に対して複数のイベントが溜まることはありません。
規格にのっとって説明すると(12.2. Scrolling)、ブラウザがスクロール処理を行うとスクロールした要素が pending scroll event targets に溜められます。すでに要素が pending scroll event targets ...
2
票
承認済み
noscriptタグが、サーバ環境でのみ、bodyの中に入ってしまう現象
解決しました。
原因はlibxmlでした。
ローカルのlibxmlのバージョンが2.8.0
サーバのlibxmlのバージョンが2.7.6でした。
そしてこのchangelogによると、
2.8.0のバージョンにて
HTML parser error with <noscript> in the <head>
...
2
票
scrollイベントはいつ発火する?
実装依存
結論からいえば、実装依存ではないかと思います。
4.4.2.1. wheel - UI Events (日本語訳)
注記: UA や入力装置によっては、ホイールが回される速度もデルタ値に影響し得る — 高速になる程 高いデルタ値を生産するように。
スクロール処理
12.2. スクロール処理 - CSSOM View Module (日本語訳)
12.2. Scrolling ...
2
票
hoge.childNodes[1].childNodes[0], を改行にも対応するには?
状況によって対策は変わります。いくつかありがちな対策を書いてみます。
■ <input type=file> に id 属性をつけれられる場合
document.getElementById('id-of-input-type-file');
■ Document内にクラスa4を持つ要素が2つ以上存在しないことが保証されている場合
document....
2
票
オブジェクトの初期化中にthisで他のプロパティを使うとエラーになる
主に this を使っている部分に問題があります。
関数(function)の外にある this は グローバルオブジェクトであり、意図したオブジェクトを指していません
そもそも this を使っている部分の値は、ユーザーの選択によって初期化時から変わっている可能性があるので、呼ばれるたびに求める必要があります
よって、this を用いている部分を関数 (メソッド)にすると解決します
...
2
票
承認済み
HTMLCollectionとは?
するとコンソールに出力された結果は以下のようになります。
どちらも親から見た子をあらわしているはずです。
いいえ。
前者は飽くまで親である<ul>を表現するHTMLUListElementオブジェクトをコンソールに表示しただけです。コンソールが気を利かせて<ul>の子供も確認できるようになっていますが、それはコンソールの機能であって、あなたが書いたコード console....
2
票
承認済み
typescriptでform要素を取得したい
こんにちは
英語版にありましたので、ここを参考してください:リンク
typescript は強いタイプなのでタイプを転換してください。
プロパティ 'value' は型 'Element' に存在しません。この言葉は既に分かりやすいと思いますが、Elementタイプではvalueという属性はありません、つまりインスタンスの本当のタイプに明記しないといけないことです。
転記になりますが、...
1
票
承認済み
GoogleChromeの拡張機能Tampermonkey(UserScriipt)を使用して、ダウンロードファイル名を希望のものにしたい。
GoogleChromeの拡張機能Tampermonkey(UserScriipt)を使用して、ダウンロードファイル名を希望のものにしたい。
「Tampermonkey(UserScriipt)を使用して」という要望に対する直接の答えではありませんが、クライアントスクリプト(XMLHttpRequest とか fetch API)を使ってダウンロードすれば、その際ファイル名を指定できますので、...
1
票
承認済み
HTML要素の textContent に `?.` 演算子で代入できない
?. の意図と問題
pref に付いている「?.」はオプショナルチェーンという演算子です。質問のコードでの意図は、
getElementById は null を返す可能性がある
よって pref は null である可能性がある
null のプロパティに通常の方法(. など)でアクセスしてしまうとエラー(例外)になる
エラーを避けるため、?. を使おう
といった所だと思われます。しかし、...
1
票
JavaScriptでタグを含む要素が返ってくる
例としている<ul>はメモリ上では以下のようなツリー構造になり、<ul>の子供はテキストではありません。
HTMLUListElement
┣ HTMLLIElement
┃ ┗ Text "1番目"
┣ HTMLLIElement
┃ ┗ Text "2番目"
┗ HTMLLIElement
┗ Text "3番目"
...
1
票
n番目のul要素の最後のli要素を取得したい
Selectors API
Selectors APIであれば、下記のセレクタを用いて実装可能です。
:nth-of-type() - CSS: カスケーディングスタイルシート | MDN
:last-child - CSS: カスケーディングスタイルシート | MDN
Selectors Level 4 (日本語訳)
コード
'use strict';
console.log(...
1
票
n番目のul要素の最後のli要素を取得したい
document.getElementsByTagName('ul')[2] によって得られるのは Element ノードです[1]。
§ 4.2.10.2. Interface HTMLCollection[1]
interface HTMLCollection {
readonly attribute unsigned long length;
getter Element? ...
1
票
承認済み
hoge.childNodes[1].childNodes[0], を改行にも対応するには?
Mozilla による childNodes のドキュメントには以下のように書かれています。
childNodes にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに ParentNode.children を使用してください。
HTML 側に改行やスペースなどのテキストが入ると、テキストノードが増えるので ...
1
票
あるDOM要素に対してクリック等した時に実行されるjsを突き止める方法
こちらの記事に書かれているやり方はどうですか?
Chromeのデバッガで各要素のEventListenerを調べられます。
要素に設定されているイベントを調べよう
1
票
firstChild で取得した子要素の innerHTML が undefined になっている
html5が付けられているので別のアプローチとして、document.querySelector()を使用することで、document.getElementById()よりも効率よく検索をすることができます。
エレメントの最初の子要素を取得
をCSSセレクターで表現すると#childcatch > *:first-childとできますので
function findElement()...
Only top scored, non community-wiki answers of a minimum length are eligible
関連するタグ
dom × 28javascript × 17
html × 10
php × 6
typescript × 3
c# × 2
css × 2
c++ × 1
jquery × 1
visual-studio × 1
apache × 1
reactjs × 1
google-chrome × 1
ajax × 1
xml × 1
chrome-extension × 1
xpath × 1
google-chrome-devtools × 1