7
同じ質問が本家にありますね。
大分古いですが。
Javascript isDOM — How do you check if a Javascript Object is a DOM Object?
完全な回答はリンク先を参照していただくとして(回答そのものはそんなに長くありません)、前半だけ引用します
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
//Browsers not supporting W3 DOM2 don't have HTMLElement ...
6
結論から言えば、firstChildではなくfirstElementChildにすれば解決します。
firstChildはElementに限定せずノードを返します。<div id="childcatch">と<span>a</span>の間に改行と空白があるため、そこにtext nodeが作成され、firstChildとなります。そしてtext nodeはinnerHTMLプロパティを持たないので、undefinedが返ってきたということです。
6
ぐぐってみると、この言葉の出所としては「リアルな DOM はなぜ遅いのか」という記事あたりではないかと思います。
仮想DOMを使っても、仮想DOMから実DOMを操作しているわけで、最適化されたJavaScriptを使って実DOMを操作するよりも速くなることはありません。
この言葉の意味は、仮想DOMを使った場合は、フロント実装者が気にしなくても差分のみをレンダリングしてくれるので高速になる。使わない場合は、実装者がDomの差分を考えて、コードを組む必要があるが最適なコード書くのは難しいということです。
詳しくは、記事を読んでもらうのが一番いいと思いますが、正確ではないですが要約すると次のようになります。
レンダリングは、次のような処理をしていて、ブラウザーの表示では一番重い処理になる。
...
5
Angular.js に isElement があったなと思ったので、そっちのソースを追ってみました。
function isElement(node) {
return !!(node &&
(node.nodeName // we are a direct element
|| (node.prop && node.attr && node.find))); // we have an on and find method part of jQuery API
}
Element であるか → nodeName を持つか
jQuery でラップされた要素であるか → prop/attr/find を持つか
...
4
getElementById
IDはそのページで唯一でなければならないので、(もしあれば)結果は1つのエレメントであり[0]は不要です。
getElementsByClassName
結果はノードリスト(配列の様に扱える)であり、
例え結果が1つのエレメントであっても[0]が必要です(値が1つの配列と同じ意味)。
document.body は、
body要素を意味する(例えばid="foo"をbody要素に付ければdocument.body === document.getElementById("foo")はtrueになる)ただ一つのエレメントですので不要です。
html 要素 から引用
許可された内容 ひとつの <head> 要素と、それに続くひとつの <...
3
WebKit/Blinkの内部的には擬似要素は特殊なElementとして実装されています。しかしながら、通常のDOMツリーとは別の方法でくっついているので、開発者は実装方法を気にする必要はないと思います。
テキスト選択できないのは、Rangeオブジェクトで表現できないからです。
http://trac.webkit.org/browser/trunk/Source/WebCore/dom/PseudoElement.h
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/dom/PseudoElement.h
3
文字列が返されるわけではなく、HTMLElementというオブジェクトが返されています。オブジェクトなので、例えばtagNameプロパティを持っておりその値は"LI"となっているはずです。このオブジェクトをconsole.log()で文字列化する際にouterHTMLの内容が出力されたに過ぎません。
3
おおざっぱに言うと、暇なときにイベントが発火します。1つの要素に対して複数のイベントが溜まることはありません。
規格にのっとって説明すると(12.2. Scrolling)、ブラウザがスクロール処理を行うとスクロールした要素が pending scroll event targets に溜められます。すでに要素が pending scroll event targets に入っている場合は何もしません。このため、どんなにたくさんスクロールしても、後述の処理が始まるまでは最大1つの scrollイベントしか予約されません。
イベントループに入ったときに、run the scroll steps が起動され、pending scroll event targets に対して scroll イベントを発火します。
...
2
解決しました。
原因はlibxmlでした。
ローカルのlibxmlのバージョンが2.8.0
サーバのlibxmlのバージョンが2.7.6でした。
そしてこのchangelogによると、
2.8.0のバージョンにて
HTML parser error with <noscript> in the <head>
head内のnoscriptのパーサーエラーが直されたとのこと。
なので2.8.0にバージョンを上げる事で解決しました。
まさかCのライブラリのバグだったとは、、、たどり着くのにかなり時間を要しました。。。
2
単純に考えれば、最初にイベントが発火したときにイベントハンドラ自身を削除することで実現可能です。イベントハンドラ内部でremoveEventListenerを呼べばいいかと思います。ヘルパーを作ればこんなかんじです。
const addOnceEventListener = function (el, evt, listener, capture) {
capture = !!capture;
const __listener = function () {
listener.apply(this, arguments);
el.removeEventListener(evt, __listener, capture);
};
el....
2
実装依存
結論からいえば、実装依存ではないかと思います。
4.4.2.1. wheel - UI Events (日本語訳)
注記: UA や入力装置によっては、ホイールが回される速度もデルタ値に影響し得る — 高速になる程 高いデルタ値を生産するように。
スクロール処理
12.2. スクロール処理 - CSSOM View Module (日本語訳)
12.2. Scrolling - CSSOM View Module
検証
手元の環境で検証した限りでは、scroll イベントは wheel イベント、keydown イベントと連動して発火しているように見えます。
キーボードで同じキーを押し続けた場合、keydown イベントも連続して発火するのが一般的なWebブラウザの動作のようですが、...
2
Google Chromeの「Event Listener Breakpoints」機能を使用して、クリック等の操作を起点とした処理のトレースを取る事ができます。
Google Chromeの開発者ツールを開く(F12)
Sourceタブを開く
Event Listener Breakpoints ペインを開き、Mouse → click をチェックする。
この状態で要素をクリックすると、実行されるJavaScriptソースコード上で処理が停止するので、F10等で処理をステップ実行させて、問題箇所を特定することができるかと思います。
Pause Your Code With Breakpoints | Tools for Web Developers | Google Developers
...
2
状況によって対策は変わります。いくつかありがちな対策を書いてみます。
■ <input type=file> に id 属性をつけれられる場合
document.getElementById('id-of-input-type-file');
■ Document内にクラスa4を持つ要素が2つ以上存在しないことが保証されている場合
document.getElementsByClassName('a4')[0]
■ hoge内にクラスa4を持つ要素が2つ以上存在しないことが保証されている場合
hoge.getElementsByClassName('a4')[0]
■ document内に<input type=file>が2つ以上存在しないことが保証されている場合
...
1
するとコンソールに出力された結果は以下のようになります。
どちらも親から見た子をあらわしているはずです。
いいえ。
前者は飽くまで親である<ul>を表現するHTMLUListElementオブジェクトをコンソールに表示しただけです。コンソールが気を利かせて<ul>の子供も確認できるようになっていますが、それはコンソールの機能であって、あなたが書いたコード console.log(parent) は「子」を表現しているわけではありません。
後者は「parentのすべての子供ノード」を表現するHTMLCollectionオブジェクトをコンソールに表示した結果です。base.children は1つの値しか返せないので、...
1
Mozilla による childNodes のドキュメントには以下のように書かれています。
childNodes にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに ParentNode.children を使用してください。
HTML 側に改行やスペースなどのテキストが入ると、テキストノードが増えるので childNodes のインデックスがずれます。下の例でも、エラーは出ませんが出力が変わります。
let x = document.getElementById("foo").childNodes[1].childNodes[0];
console.log(x);
<form id="foo"&...
1
こちらの記事に書かれているやり方はどうですか?
Chromeのデバッガで各要素のEventListenerを調べられます。
要素に設定されているイベントを調べよう
1
html5が付けられているので別のアプローチとして、document.querySelector()を使用することで、document.getElementById()よりも効率よく検索をすることができます。
エレメントの最初の子要素を取得
をCSSセレクターで表現すると#childcatch > *:first-childとできますので
function findElement() {
var child = document.querySelector("#childcatch > *:first-child");
alert(child.innerHTML);
}
と書けます。(DOMはNodeを対象とするためfirstChildでは意図しない結果となりますが、...
1
xml文書では、<? ではじまり?>で終わる構文のことを処理命令(Processing Instruction)と呼びます。
今回の質問にあるスタイルシートの記述はこの処理命令にあたります。
DOMDocumentクラスにはあらかじめこの処理命令構文を記述するためのメソッドcreateProcessingInstructionが用意されていますので、こちらを使って実現できるかと思います。
function generate($file=null){
if( is_null($file) ) {
header("Content-Type: text/xml; charset=utf-8");
/* 処理命令構文の生成 */
$...
1
WebBrowser.Documentプロパティから辿れるクラスは全てCOMをラップしたものに過ぎず、提供されていない機能にアクセスしたい場合はアンマネージインターフェイスへのポインターからアクセスする必要があります。
これらオブジェクトはDOMを表すものですが、DOMはセキュリティのためフレームを超えてアクセスすることができないよう制限されています。
これを回避するためにはDOM外からアクセスする必要があります。具体的には
HtmlDocument.GetElementById()などで目的のフレームの要素(HtmlElement)を取得する
HtmlElement.DocElementからアンマネージインターフェイスへのポインターを得る
...
1
setAttribute() を二回呼べばいいのではないでしょうか。
$marker->setAttribute('lat', '35.507456');
$marker->setAttribute('lng', '139.61758499999996');
なおマニュアルのコメントにサンプルコードが書かれていましたから、こちらも参考になるかと思います。
PHP: DOMDocument - Manual
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
dom × 22javascript × 14
html × 6
php × 4
c# × 2
css × 2
c++ × 1
jquery × 1
visual-studio × 1
html5 × 1
apache × 1
ajax × 1
google-chrome × 1
reactjs × 1
xml × 1
typescript × 1
xpath × 1
google-chrome-devtools × 1