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

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

9
JSでHTML文字列を解析する
私は解決策を探しましたが、何も関連性がなかったので、ここに私の問題があります: HTMLテキストを含む文字列を解析したい。JavaScriptでやりたいです。 このライブラリを試しましたが、文字列からではなく、現在のページのHTMLを解析しているようです。下のコードを試すと、ページのタイトルが変わるからです。 var parser = new HTMLtoDOM("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>", document); 私の目標は、文字列のように読んだHTML外部ページからリンクを抽出することです。 それを行うためのAPIを知っていますか?


11
C:\ fakepathを解決するには?
<input type="file" id="file-id" name="file_name" onchange="theimage();"> これが私のアップロードボタンです。 <input type="text" name="file_path" id="file-path"> これは、ファイルの完全パスを表示する必要があるテキストフィールドです。 function theimage(){ var filename = document.getElementById('file-id').value; document.getElementById('file-path').value = filename; alert(filename); } これが私の問題を解決するJavaScriptです。しかし、アラートの値では、 C:\fakepath\test.csv そしてMozillaは私にくれます: test.csv しかし、ローカルの完全修飾ファイルパスが必要です。この問題を解決するには? これがブラウザのセキュリティ問題が原因である場合、これを行う別の方法は何ですか?



30
JavaScriptオブジェクトがDOMオブジェクトであるかどうかをどのように確認しますか?
私は取得しようとしています: document.createElement('div') //=> true {tagName: 'foobar something'} //=> false 私のスクリプトではtagName、プロパティとして必要になることはなかったので、これを使用していました。 if (!object.tagName) throw ...; したがって、2番目のオブジェクトについては、簡単な解決策として次のことを思いつきました。;) 問題は、読み取り専用プロパティを適用しているブラウザーに依存していることです。 function isDOM(obj) { var tag = obj.tagName; try { obj.tagName = ''; // Read-only for DOM, should throw exception obj.tagName = tag; // Restore for normal objects return false; } catch (e) { return …
247 javascript  dom  object 

15
JavaScriptでDOMデータバインディングを実装する方法
この質問は厳密に教育的なものとして扱ってください。私はまだこれを実装するための新しい答えとアイデアを聞くことに興味があります tl; dr JavaScriptで双方向データバインディングを実装するにはどうすればよいですか? DOMへのデータバインディング DOMへのデータバインディングとは、たとえば、aプロパティを持つJavaScriptオブジェクトを持つことbです。次に、<input>(たとえば)DOM要素があると、DOM要素がa変化すると変化し、逆もまた同様です(つまり、双方向のデータバインディングを意味します)。 これは、これがどのように見えるかについてのAngularJSの図です: だから基本的に私は次のようなJavaScriptを持っています: var a = {b:3}; 次に、次のような入力(または他のフォーム)要素: <input type='text' value=''> 入力の値をa.b(たとえば)の値にしたいのですが、入力テキストが変更さa.bれたときにも変更したいと思います。場合はa.bJavaScriptでの変更は、入力が変化します。 質問 これをプレーンJavaScriptで実現するための基本的なテクニックは何ですか? 具体的には、次のことを参考にしてください。 オブジェクトに対してバインディングはどのように機能しますか? フォームの変更を聞くことはどのように機能しますか? テンプレートレベルでHTMLのみを変更することは簡単な方法で可能ですか?HTMLドキュメント自体のバインディングは追跡せず、JavaScript(DOMイベント、およびJavaScriptが使用されているDOM要素への参照を維持する)でのみ追跡したいと思います。 何を試しましたか? 私は口ひげの大ファンなので、テンプレートに使用してみました。ただし、MustacheはHTMLを文字列として処理するため、データバインディング自体を実行しようとすると問題が発生しました。これについて考えられる唯一の回避策は、HTML文字列(または作成されたDOMツリー)自体を属性で変更することでした。別のテンプレートエンジンを使用してもかまいません。 基本的に、手元の問題を複雑にしていて、簡単な解決策があると強く感じました。 注:外部ライブラリ、特に数千行のコードを使用する回答は提供しないでください。私はAngularJSとKnockoutJSを使用しました(そして好きです!)。私は「フレームワークxを使用する」という形式での回答を本当に望んでいません。理想的には、双方向のデータバインディングを自分で実装する方法を把握するために多くのフレームワークを使用する方法を知らない将来の読者が欲しいです。私は完全な答えを期待しているわけではありませんが、アイデアを理解してもらうためのものです。

9
DOM要素を最初の子として設定する方法は?
要素Eがあり、それにいくつかの要素を追加しています。突然、次の要素はEの最初の子であることがわかりました。トリックは何ですか、どのように行うのですか?Eは配列ではなくオブジェクトであるため、メソッドunshiftは機能しません。 長い道のりはEの子供たちを繰り返し、key ++を移動することですが、もっときれいな方法があると私は確信しています。


5
jQueryで既知のクラスを持つ親を見つける方法は?
私は<div>その中に他<div>の多くのを持ち、それぞれが異なる入れ子レベルにあります。すべての子<div>に識別子を与えるのではなく、ルート<div>に識別子を与えるだけです。次に例を示します。 <div class="a" id="a5"> <div class="b"> <div class="c"> <a class="d"> </a> </div> </div> </div> クラスに応答する関数をjQueryで記述し、dその親であるクラスのIDを見つけたいa場合、どうすればよいですか? $('.a').attr('id');複数のクラスが存在するため、単純に行うことはできませんa。私はその親の親の親のIDを見つけることができましたが、デザインが悪く、遅く、あまり多形的ではないようです(クラスのIDを見つけるために別のコードを記述する必要がありますc)。
242 javascript  jquery  html  dom  parent 

3
JavaによるDOM解析の正規化-どのように機能しますか?
このチュートリアルで、DOMパーサーのコードに以下の行を表示しました。 doc.getDocumentElement().normalize(); なぜこの正規化を行うのですか?ドキュメント を読みましたが、言葉が理解できませんでした。 すべてのTextノードを、このノードの下のサブツリーの完全な深さに配置します さて、誰かがこのツリーがどのように見えるかを(できれば写真で)見せてくれますか? 正規化が必要な理由を誰かが私に説明できますか? 正規化しないとどうなりますか?


4
offsetHeight、clientHeight、scrollHeightとは何ですか?
offsetHeight、clientHeightおよびscrollHeightまたはoffsetWidth、clientWidthおよびの違いは何scrollWidthですか? クライアント側で作業する前に、この違いを知っておく必要があります。そうでなければ、彼らの人生の半分はUIの修正に費やされます。 フィドル、または以下のインライン: function whatis(propType) { var mainDiv = document.getElementById("MainDIV"); if (window.sampleDiv == null) { var div = document.createElement("div"); window.sampleDiv = div; } div = window.sampleDiv; var propTypeWidth = propType.toLowerCase() + "Width"; var propTypeHeight = propType + "Height"; var computedStyle = window.getComputedStyle(mainDiv, null); var borderLeftWidth = computedStyle.getPropertyValue("border-left-width"); var borderTopWidth = …

10
jQueryを使用してリストをアルファベット順にソートするにはどうすればよいですか?
私はここで自分の深みから少し離れていますが、これが実際に可能であることを願っています。 リスト内のすべてのアイテムをアルファベット順に並べ替える関数を呼び出せるようにしたいのですが。 私はソートのためにjQuery UIを調べてきましたが、それはそうではないようです。何かご意見は?

5
子ノードを取得する最良の方法
JavaScriptには、任意の要素から最初の子要素を取得するためのさまざまなメソッドが用意されていますが、どれが最適ですか。つまり、動作に関しては、ブラウザ間の互換性が最も高く、高速で、包括的で、予測可能です。エイリアスとして使用するメソッド/プロパティのリスト: var elem = document.getElementById('container'); var child = elem.children[0]; var child = elem.firstElementChild; // == children[0] これはどちらの場合でも機能します。 var child = elem.childNodes[0]; // or childNodes[1], see below これは、フォームまたは<div>反復の場合です。テキスト要素に遭遇する可能性がある場合: var child = elem.childNodes; // treat as NodeList var child = elem.firstChild; 私ができる限り、firstChildからのNodeList childNodesをfirstElementChild使用し、を使用しchildrenます。私はこの仮定をMDNリファレンスに基づいています。 childNode要素ノードの最初の子要素への参照、またはnull存在しない場合。 速度の点では、firstElementChildは事実上への参照children[0]であり、childrenオブジェクトはすでにメモリ内に既に存在するため、違いがあってもほとんどありません。 私を投げるのはchildNodesオブジェクトです。これを使用して、テーブル要素のフォームを確認しました。childrenはすべてのフォーム要素をリストchildNodesしていますが、HTMLコードの空白も含まれているようです。 console.log(elem.childNodes[0]); console.log(elem.firstChild); 両方のログ <TextNode textContent="\n "> …

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