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

Document Object Model(DOM)は、XMLやHTMLなどのマークアップ言語の要素をプログラムで参照する方法です。[javascript]またはDOMパーサーを持つ他のプログラミング言語で使用します

11
DOMの重複IDをチェックするためのjQuery
ASP.NET MVCでアプリケーションを作成しています。従来のASP.NETとは対照的に、生成されたページですべてのIDを作成する責任ははるかに大きくなります。ASP.NETは厄介ですが、一意のIDを提供します。 重複するIDがないかドキュメントをチェックするための簡単なjQueryスクリプトを追加したい それらはDIVS、画像、チェックボックス、ボタンなどのIDです。 <div id="pnlMain"> My main panel </div> <div id="pnlMain"> Oops we accidentally used the same ID </div> 不注意なことをしたときに警告するだけの、セットアンドフォーゲットタイプユーティリティを探しています。 はい、私はこれをテスト中にのみ使用し、代替手段(firebugプラグインなど)も歓迎します。
106 jquery  dom 

21
scrollIntoViewスクロールしすぎます
divが含まれるテーブル行を含むスクロールバーがデータベースから動的に生成されるページがあります。テーブルの各行は、リンクのように機能します。これは、動画プレーヤーの横にあるYouTube再生リストに表示されるようなものです。 ユーザーがページにアクセスすると、ユーザーがいるオプションはスクロールdivの上部に移動することになっています。この機能は動作しています。問題は、それが少しだけ行き過ぎていることです。それらがオンになっているオプションと同様に、高さが約10pxです。そのため、ページにアクセスし、URLを使用して、選択されたオプションを識別し、そのオプションをスクロールdivの上部にスクロールします。注:これはウィンドウのスクロールバーではなく、スクロールバー付きのdivです。 このコードを使用して、選択したオプションをdivの一番上に移動します。 var pathArray = window.location.pathname.split( '/' ); var el = document.getElementById(pathArray[5]); el.scrollIntoView(true); divの上に移動しますが、10ピクセルほど上に移動します。誰でもそれを修正する方法を知っていますか?
106 javascript  dom  scroll 

6
SVGはテキスト要素の幅を取得します
私はSVGファイルのECMAScript / JavaScriptに取り組んでいて、要素のwidthand を取得して、それを囲む長方形のサイズを変更できるようにする必要があります。HTMLでは要素のおよび属性を使用できますが、これらのプロパティは使用できないようです。heighttextoffsetWidthoffsetHeight これが私が作業する必要があるフラグメントです。テキストを変更するたびに長方形の幅を変更する必要がありますがwidth、text要素の実際のサイズ(ピクセル単位)を取得する方法がわかりません。 <rect x="100" y="100" width="100" height="100" /> <text>Some Text</text> 何か案は?
105 javascript  dom  text  svg 

9
JavaScriptによるCSS値の変更
JavaScriptでインラインCSS値を設定するのは簡単です。幅を変更したい場合、次のようなhtmlがあります。 <div style="width: 10px"></div> 私がする必要があるのは: document.getElementById('id').style.width = value; インラインスタイルシートの値が変更されます。インラインスタイルがスタイルシートをオーバーライドするため、通常これは問題ではありません。例: <style> #tId { width: 50%; } </style> <div id="tId"></div> このJavascriptを使用する: document.getElementById('tId').style.width = "30%"; 私は以下を得ます: <style> #tId { width: 50%; } </style> <div id="tId" style="width: 30%";></div> これは問題です。インライン値を変更したくないだけでなく、設定する前に幅を探した場合、 <div id="tId"></div> 返される値はNullであるため、ロジックを実行するために何かの幅を知る必要があるJavascriptがある場合(幅を特定の値ではなく1%増やします)、文字列 "50%を期待するときにNullを返します「実際には機能しません。 だから私の質問:インラインに配置されていないCSSスタイルの値があります。これらの値を取得するにはどうすればよいですか?IDを指定して、インライン値の代わりにスタイルを変更するにはどうすればよいですか?
105 javascript  html  css  ajax  dom 

3
文字列へのXMLドキュメント
XMLドキュメント(org.w3c.dom.Document)の文字列表現を取得する最も簡単な方法は何ですか?つまり、すべてのノードが1行になります。 例として、 <root> <a>trge</a> <b>156</b> </root> (これは単なるツリー表現であり、私のコードではorg.w3c.dom.Documentオブジェクトなので、文字列として扱うことはできません) に "<root> <a>trge</a> <b>156</b> </root>" ありがとう!
104 java  xml  string  dom  xmldocument 

13
兄弟ノードを選択する方法はありますか?
パフォーマンス上の理由から、選択したノードの兄弟ノードのみを選択する方法を見つけようとしています。 例えば、 <div id="outer"> <div id="inner1"></div> <div id="inner2"></div> <div id="inner3"></div> <div id="inner4"></div> </div> inner1ノードを選択した場合、その兄弟inner2-4ノードにアクセスする方法はありますか?
104 javascript  dom  siblings 


6
document.querySelectorAllが実際の配列ではなくStaticNodeListを返すのはなぜですか?
私document.querySelectorAll(...).map(...)はFirefox 3.6でさえも実行できないだけでなく、答えを見つけることができないというバグを抱えています。そのため、このブログからの質問をSOにクロスポストすると思いました。 http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/ アレイを取得できない技術的な理由を知っている人はいますか?または、なぜStaticNodeListは、あなたが使用できるようにアレイから継承していないmap、concatなど、? (ところで、必要な機能が1つだけの場合は、次のようなことを行うことができNodeList.prototype.map = Array.prototype.map;ますが、この機能が(意図的に?)そもそもなぜブロックされているのですか?)

13
CSSで<select>メニューの<option>を非表示にする方法は?
私はクロームが、それはそう、私は非表示にすることができないことを実現しました&lt;option&gt;で&lt;select&gt;。Firefoxはそうします。 &lt;option&gt;検索条件に一致するを非表示にする必要があります。Chromeウェブツールではdisplay: none;、JavaScriptによって正しく設定されていることがわかり&lt;select&gt;ますが、メニューをクリックすると表示されます。 &lt;option&gt;メニューをクリックしたときに、検索条件に一致するを表示しないようにするにはどうすればよいですか?ありがとう!
103 javascript  jquery  css  dom 


3
innerHTMLは非同期ですか?
私は自分を馬鹿にしないでほしいと思いますが、次の2行のコードで何が起こっているのかを理解しようとしています。 document.body.innerHTML = 'something'; alert('something else'); 私が観察しているのは、HTMLが更新される前(または更新されているがページが更新/再描画されていないなど)の前にアラートが表示されることです。 このコードペンをチェックして、私の意味を確認してください。 でも置くことに注意してくださいalertにはsetTimeout(..., 0)役立ちません。innerHTML実際にページを更新するには、より多くのイベントループが必要のようです。 編集: Chromeを使用していることを忘れて、他のブラウザをチェックしていません。Chromeでのみ表示されるようです。それにもかかわらず、なぜそれが起こっているのか私はまだ興味があります。

6
getElementsByClassNameを正しく反復する方法
私はJavascriptの初心者です。 私はを介してWebページを初期化しています。window.onloadクラス名(slide)で要素の束を見つけ、いくつかのロジックに基づいてそれらを異なるノードに再配布する必要があります。Distribute(element)要素を入力として受け取り、配布を行う関数があります。私はこのようなことをしたいです(例えばここまたはここで概説されているように): var slides = getElementsByClassName("slide"); for(var i = 0; i &lt; slides.length; i++) { Distribute(slides[i]); } ただし、getElementsByClassName実際には配列を返さないため、これは私にとって魔法ではありませんが、、NodeListつまり ...これは私の推測です... ...関数内で変更されていますDistribute(DOMツリーがこの関数内で変更されており、特定のノードの複製が行われます)。For-eachループ構造も役に立ちません。 可変スライドは実際には決定論的ではなく、反復ごとに長さと要素の順序が大きく変化します。 私の場合、NodeListを反復処理する正しい方法は何ですか?一時的な配列を埋めることを考えていましたが、その方法がわかりません... 編集: 私が言及するのを忘れていた重要な事実は、別のスライドの中に1つのスライドがあるかもしれないということです。これはslides、ユーザーAlohciのおかげで見つけたばかりの変数を変更するものです。 私の解決策は、最初に各要素を配列に複製し、Distribute()その後配列をono-by-oneに渡すことでした。
100 javascript  html  dom 

9
Jqueryを使用して親divのIDを見つける
私はこのようないくつかのhtmlを持っています: &lt;div id="1"&gt; &lt;p&gt; Volume = &lt;input type="text" /&gt; &lt;button rel="3.93e-6" class="1" type="button"&gt;Check answer&lt;/button&gt; &lt;/p&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; そして、このようないくつかのJS: $("button").click(function () { var buttonNo = $(this).attr('class'); var correct = Number($(this).attr('rel')); validate (Number($("#"+buttonNo+" input").val()),correct); $("#"+buttonNo+" div").html(feedback); }); ボタンにclass = "1"を付ける必要がなかった場合(数値クラスが無効であることはわかっていますが、これはWIPです!)なので、親divのID。実際には、このようなセクションが複数あります。 ボタンの親であるdivのIDを見つけるにはどうすればよいですか。 答えをボタンコードに格納するためのよりセマンティックな方法は何でしょうか。私はこれをできるだけ簡単に、プログラマー以外の人が物事を壊すことなくコピーアンドペーストできるようにしたいと思います!
99 jquery  dom  semantics 

3
シャドールートとは
Google Chromeの開発者ツールで、タグの#shadow-root下に右が表示され&lt;html lang="en"&gt;ます。それは何をし、何に使用しますか?FirefoxでもIEでも表示されません。Chromeでのみ、これは特別な機能ですか? 私は、それを示して、それを開くと&lt;head&gt;し、&lt;body&gt;かつ横に名前のリンクrevealクリックすることで、それが指す&lt;head&gt;と&lt;body&gt;、何もありません。

7
DOM内のJavaScript移動要素
&lt;div&gt;ページに3つの要素があるとします。最初と3番目の位置を入れ替えるにはどうすればよい&lt;div&gt;ですか?jQueryは問題ありません。
97 javascript  jquery  dom 

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.