タグ付けされた質問 「dom」

私はドキュメントフラグメントとDOMリフローについて読んでいて、DOM要素に追加するまで、どちらもDOMに存在しないように見えるため、どのようにdocument.createDocumentFragment違うのか疑問に思いdocument.createElementました。 私はテスト（下記）を行い、すべて同じ時間（約95ms）かかりました。推測では、これは要素にスタイルが適用されていないためである可能性があり、おそらくリフローされていません。 とにかく、以下の例に基づいて、DOMに挿入するときではcreateDocumentFragmentなくなぜ使用する必要があるのかcreateElement、2つの違いは何ですか？ var htmz = "<ul>"; for (var i = 0; i < 2001; i++) { htmz += '<li><a href="#">link ' + i + '</a></li>'; } htmz += '<ul>'; //createDocumentFragment console.time('first'); var div = document.createElement("div"); div.innerHTML = htmz; var fragment = document.createDocumentFragment(); while (div.firstChild) { fragment.appendChild(div.firstChild); } $('#first').append(fragment); console.timeEnd('first'); …

97 javascript  dom 

Наэтотвопросестьответынаスタックオーバーフローнарусском：КакзаблокироватьпользовательскуюфункциюдлясобытиякопированиявJS？ 質問：divなどのオブジェクトのすべてのイベントを完全に削除する方法はありますか？ 編集：私はdiv.addEventListener('click',eventReturner(),false);イベントごとに追加しています。 function eventReturner() { return function() { dosomething(); }; } EDIT2：動作している方法を見つけましたが、私の場合は使用できません： var returnedFunction; function addit() { var div = document.getElementById('div'); returnedFunction = eventReturner(); div.addEventListener('click',returnedFunction,false); //You HAVE to take here a var and not the direct call to eventReturner(), because the function address must be the same, and it …

97 javascript  events  dom 

すべての画像がjQueryイベントを介して読み込まれたことを検出することは可能ですか？ 理想的には、 $(document).idle(function() { } または $(document).contentLoaded(function() { } しかし、私はそのようなことを見つけることができません。 私はこのようなイベントを添付することを考えました： $(document).ready(function() { var imageTotal = $('img').length; var imageCount = 0; $('img').load(function(){if(++imageCount == imageTotal) doStuff();}); } しかし、画像の読み込みに失敗すると、これは壊れますか？メソッドが適切なタイミングで呼び出されることが非常に重要です。

96 jquery  dom 

Javascript：ノード（要素またはドキュメント）のDOM表現があり、その文字列表現を探しています。例えば、 var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); 収まるはずです： get_string(el) == "<p>Test</p>"; 単純なものは見当たらないという強い気持ちがありますが、IE、FF、Safari、Operaで機能するメソッドが見つかりません。したがって、outerHTMLはオプションではありません。

96 javascript  string  dom  cross-browser  element 

JavaScriptオブジェクトをHTML要素に関連付けたいのですが。これを行う簡単な方法はありますか？ HTML DOMがsetAttributeメソッドを定義していることに気づき、これは任意の属性名に対して定義されているように見えます。ただし、これは文字列値のみを設定できます。（もちろん、これを使用してキーを辞書に格納できます。） 詳細（私は主に一般的な質問に興味があります）： 具体的には、ツリー内のノードを表すHTML要素があり、ドラッグアンドドロップを有効にしようとしていますが、jQueryドロップイベントでは、ドラッグアンドドロップされる要素しか表示されません。 イベントハンドラーに情報を取得するための通常のパターンは、JavaScriptオブジェクトの作成と同時にHTML要素を作成し、これらのJavaScriptオブジェクトを閉じることによってイベントハンドラーを定義することですが、これではうまくいきません。ケース（ドラッグの開始時に入力されるグローバルオブジェクトを使用できますが、これは少し厄介に感じられます）。

96 javascript  dom 

HTMLノードのリストを受け入れるJavascript関数がありますが、Javascript配列が期待され（その上でいくつかのArrayメソッドが実行さDocument.getElementsByTagNameれます）、DOMノードリストを返す出力をフィードします。 最初、私は次のような簡単なものを使用することを考えました： Array.prototype.slice.call(list,0) そして、それはすべてのブラウザで正常に動作しますが、もちろんInternet Explorerは "JScriptオブジェクトが必要です"というエラーを返します。 Document.getElement*メソッド関数呼び出しのターゲットとして十分なJScriptオブジェクトではないため、正常に機能します。 警告：Internet Explorer固有のコードを書いてもかまいませんが、サードパーティのWebサイトに埋め込むウィジェットを作成しているため、JQueryなどのJavaScriptライブラリを使用することはできません。クライアントの競合が発生します。 私の最後の溝は、DOMノードリストを反復処理して自分で配列を作成することですが、それを行うためのより良い方法はありますか？

96 javascript  html  dom 

PHP DOM実装で特定のDOMNodeのinnerHTMLを取得するためにどの関数を使用しますか？誰かが信頼できる解決策を与えることができますか？ もちろん、outerHTMLも同様です。

95 php  dom  innerhtml 

ページの読み込み時にカーソルを特定の入力ボックスにフォーカスするにはどうすればよいですか？ 初期のテキスト値を保持し、入力の最後にカーソルを置くことは可能ですか？ <input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

95 javascript  html  dom  xhtml 

次のHTMLがあるとします。 <div><span><b>This is in bold</b></span></div> div自体を含む、divのHTMLを取得したいと考えています。Element.innerHTMLは以下のみを返します： <span>...</span> 何か案は？ありがとう

94 javascript  html  dom 

DOMオブジェクトにプロパティを設定することを主な目的とするメソッドがあります function (el) { el.expando = {}; } ESLintにno-param-reassignエラーをスローさせるAirBnBのコードスタイルを使用します。 エラー関数パラメーター 'el'への割り当てno-param-reassign AirBnBのコードスタイルに準拠しながら、引数として渡されたDOMオブジェクトを操作するにはどうすればよいですか？ 誰かが別の問題/* eslint react/prop-types: 0 */を参照することを使用することを提案しましたが、私が間違っていない場合、これは反応には当てはまりますが、ネイティブDOM操作には当てはまりません。 また、コードスタイルを変更するのは正解ではないと思います。標準スタイルを使用する利点の1つは、プロジェクト間で一貫したコードがあり、ルールを自由に変更できることは、AirBnBのような主要なコードスタイルの誤用のように感じることだと思います。 参考までに、私はGitHubでAirBnBに質問しました。彼らは、問題＃766でこれらのケースに行く方法を彼らがどう思うかを尋ねました。

94 javascript  dom  eslint 

これは非常に大きなテーブル（3000行）のコンテンツを削除するための高速な方法であると思いました。 $jq("tbody", myTable).remove(); しかし、Firefoxで完了するまでに約5秒かかります。私は何かばかげたことをしていますか（ブラウザに3000行をロードすることを除いて）？それを行うより速い方法はありますか？

93 javascript  jquery  dom 

この単純なHTMLを見てください。 <div id="wrap1"> <iframe id="iframe1"></iframe> </div> <div id="warp2"> <iframe id="iframe2"></iframe> </div> #wrap2がの前になるようにラップを移動したいとし#wrap1ます。iframeはJavaScriptによって汚染されています。私はjQuery .insertAfter()とを知ってい.insertBefore()ます。ただし、これらを使用すると、iFrameはHTML、JavaScript変数、およびイベントをすべて失います。 以下がiFrameのHTMLだとします。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // The variable below would change on click // This represents changes on variables after the code is loaded // These changes should remain after the iFrame is moved …

93 javascript  jquery  dom  iframe 

DOMに関しては、HTMLCollections、オブジェクト、配列の間で常に混乱していました。例えば... 違いは何ですか document.getElementsByTagName("td")とは$("td")？ $("#myTable")そして、$("td")オブジェクト（jQueryのオブジェクト）です。console.logにも横にDOM要素の配列が表示されるのはなぜですか。また、それらはオブジェクトではなく配列ではありませんか。 とらえどころのない "NodeLists"とは何ですか、どのように選択するのですか？ 以下のスクリプトの解釈も提供してください。 ありがとうございました [123,"abc",321,"cba"]=[123,"abc",321,"cba"] {123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...} Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...} document.links= HTMLCollection[a #, a #] document.getElementById("myTable")= <table id="myTable"> document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow] document.getElementsByTagName("td")= HTMLCollection[td, td, td, td] $("#myTable")= Object[table#myTable] $("td")= Object[td, td, td, td] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML …

93 javascript  jquery  dom 

式は同じものElement.getAttribute("id")をElement.id好み、同じものを返します。 HTMLElementオブジェクトの属性が必要な場合、どちらを使用する必要がありますか？ getAttribute()andのようなこれらの方法でクロスブラウザの問題はありますsetAttribute()か？ または、オブジェクトプロパティに直接アクセスする場合とこれらの属性メソッドを使用する場合のパフォーマンスへの影響はありますか？

92 javascript  html  dom 

この質問がすでに回答されている場合は、お詫び申し上げます。解決策を探してみましたが、自分のコードに適したものは見つかりませんでした。私はまだjQueryを初めて使用します。 2つの異なるページに2種類のスティッキーメニューがあります。これが両方のコードです。 $(document).ready(function () { var contentNav = $('.content-nav').offset().top; var stickyNav = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > contentNav) { $('.content-nav').addClass('content-nav-sticky'); } else {; $('.content-nav').removeClass('content-nav-sticky') } }; stickyNav(); $(window).scroll(function () { stickyNav(); }); }); $(document).ready(function () { var stickyNavTop = $('.nav-map').offset().top; // var contentNav = $('.content-nav').offset().top; …

91 javascript  jquery  html  css  dom