[dom] タグが付いた質問
DOM(Document Object Model)は、HTML や XML文書用のAPIです。 ドキュメントの論理構造へアクセスし操作する方法を定義します。このタグは、XML、HTML の DOM を介したプログラミング言語からの操作に関する質問に使用してください。 HTML、JavaScript、または SAX の省略形として使用しないでください。タグを複数使用すれば、言語とマークアップの両方を表すことができます。
28
件の質問
9
票
1
回答
4,535
閲覧数
仮想DOMを使うと早くなる理由がいまいちわかりません
実DOMを操作するよりも仮想DOMを使ったほうが速いという話をききますが、
実際に早くなる理由がいまいちよくわかりません。
変更前と変更後を比較して差分を変更するから、という説明を聞くと納得しそうになりますが、
DOM全体でなく、DOMの一部を再レンダリングするブラウザの機能ををうまいこと使うという意味なのでしょうか。
そういった場合にどういったjavascriptの関数が実行されるのかなど、...
5
票
2
回答
1万
閲覧数
変数がDOM要素かどうかを判定する方法
event.target には click などのイベント発生時にイベント発生元のDOM要素がセットされていると思いますが、jQuery の ajax() を非同期で実行した場合は XMLHttpRequest オブジェクトが入っていました。
変数の値がDOM要素の場合だけ特定の処理を行いたいです。
event.target に限らず、変数・...
4
票
2
回答
2万
閲覧数
あるDOM要素に対してクリック等した時に実行されるjsを突き止める方法
たとえば「要素Xをクリックしたら何かしらの問題が発生する」といったバグの解析時に「クリックされた時にどのjsファイルの何行目あたりが実行されるか」が知りたいのですが、いい方法は無いでしょうか?
現状では、やむなく要素Xのidやclass値でgrepをかけてしらみ潰しに調べています。
ポイントは、各種ライブラリ内部のjsというより、現在調査中のブロジェクトのjsファイル・...
3
票
2
回答
1,734
閲覧数
リサイズした際、指定クラス名の(画面上の)横幅サイズを取得したい
前提
・レスポンシブサイト
<div class="hoge">
・hogeクラスは複数存在するが、全て同じサイズの動き(画面幅に応じた適切な幅で表示)
知りたいこと
・リサイズする度ごとに、画面上の「div hogeクラス」サイズを取得したい
※Chromeコンソール画面で、指定div要素にマウスオーバーした際に表示されるサイズ(オリジナルではなく画面上の表示サイズ)...
2
票
2
回答
4,220
閲覧数
firstChild で取得した子要素の innerHTML が undefined になっている
ボタンを押下後、エレメントの最初の子要素を取得し、その要素の内容(例:a)をダイアログで表示したいのですが、undefinedと表示されます。どう修正すればよろしいでしょうか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>...
2
票
1
回答
262
閲覧数
CSS疑似要素は仮想DOMなのでしょうか? WebKit的にはどういう扱いなのでしょうか?
CSS疑似要素(例えば::before)を作成すると、Chromeコンソール画面では常に::beforeと表示されます。
また、画面に疑似要素指定内容は表示されますが、テキスト選択も出来ません。
この時、DOM はどうなっているのでしょうか?
疑似要素作成=仮想DOM 作成なのでしょうか?
あるいは、そもそも疑似要素はDOM ではない?
疑似要素ってレンダリングする際、...
2
票
1
回答
3,228
閲覧数
C#で個別のFrame内のDocmentを取得するにはどうすればよいのでしょうか?
概要
次のような構造を持つオブジェクト内のFrameのDocumentの内容(★印)を取得したいです。
wbm
Control
currentDocument
Document
Window
Frames
htmlFramesCollection2
Document
Body
...
2
票
1
回答
5,959
閲覧数
DOMのsetAttribute()メソッドに属性を2つ加えたい!
現在、PHPで以下のXMLファイルの作成をしようと考えており、
<?xml version="1.0" encoding="utf-8"?>
<root>
<MarkerData>
<marker lat="35.507456" lng="139.61758499999996">
<icon>atlas</...
1
票
2
回答
5,310
閲覧数
scrollイベントはいつ発火する?
次のコードを実行してみて、スクロールバーを動かす速さによってコールバックが呼ばれる回数が異なることを知りました。(速ければ少なく、遅ければ多い)
window.onscroll = () => {
console.log("scrolled");
};
スクロールイベントはどのような条件が揃うと発火するのでしょうか?
scroll - Event reference | ...
1
票
1
回答
1,276
閲覧数
typescriptでform要素を取得したい
実現したいこと
valueの取得
発生している問題・エラーメッセージ
プロパティ 'value' は型 'Element' に存在しません。
該当のソースコード
document.querySelector("#id").value
試したこと
補足情報(FW/ツールのバージョンなど)
typescript:4.7.4
tsc:4.6.4
esnext
1
票
2
回答
445
閲覧数
オブジェクトの初期化中にthisで他のプロパティを使うとエラーになる
現在javascriptとHTMLを使ってある機能を作ってるんですけど、制作過程でオブジェクトの定義に関するエラーがあり、抜け出せません。これを解決する方法を教えて下さい。
エラー内容
test.html:23 Uncaught TypeError: Cannot read properties of undefined (reading 'options')
at test.html:...
1
票
2
回答
1,354
閲覧数
n番目のul要素の最後のli要素を取得したい
実現したいこと
n番目の ul 要素の最後の子要素のテキストを取得したいです。
現状では ul 要素の最後の子要素のテキストを取得までできています。
該当のソースコード
var lastChild = document.querySelector('ul:last-child');
console.log(lastChild);
console.log(lastChild....
1
票
1
回答
1,177
閲覧数
一度だけ呼び出されるイベントハンドラを設定するには?
現在次のようにイベントハンドラを設定しているのですが、これを一回だけ呼び出されるようにするにはどうするとよいでしょうか?
let elem = document.querySelector('...');
elem.addEventListener('click', e => {
...
});
1
票
1
回答
427
閲覧数
HTML要素の textContent に `?.` 演算子で代入できない
実現したいこと
TypeScriptで、HTML要素を取得して操作したい
発生している問題・エラーメッセージ
代入式の左辺には、省略可能なプロパティ アクセスを指定できません。
該当のソースコード
const pref = document.getElementById("prefectures");
pref?.textContent = "hello world&...
0
票
2
回答
159
閲覧数
JavaScriptでタグを含む要素が返ってくる
const base = document.getElementById('parent');
const children = base.children;
console.log(children[0]);
console.log(children[1]);
console.log(children[2]);
下に記述したHTMLの <ul> ...
0
票
1
回答
1,176
閲覧数
appendChildする際、親要素に[0]を付与するのはどんな時? getElementsByClassNameでは必須?
appendChildする際、親要素に[0]を付与する条件がよく分かりません
getElementById
・[0]不要?
var p = document.createElement("p");
document.getElementById('target').appendChild(p);
getElementsByClassName
・[0]必要?
var p = document....
0
票
2
回答
602
閲覧数
hoge.childNodes[1].childNodes[0], を改行にも対応するには?
「圧縮したHTMLの状態」では正常動作するのですが、HTMLを整形展開すると、下記エラーとなります。
Uncaught TypeError: Cannot read property 'childNodes' of undefined
hoge.childNodes[1].childNodes[0],
・恐らく改行が入るからだと思うのですが、改行にも対応するにはどうすれば良いですか?
...
0
票
1
回答
4,120
閲覧数
C++でのlibxml2とXpathを使用したxml解析
XMLのTEXTを更新したいのですが、DOMが全く変化しません。
/**
* xmlDocPtr &node 元のDOM
* string text 挿入するTEXT
* xmlChar *xpath_expr 更新する対象
**/
void DomParser::textUpdate(xmlDocPtr &node, string text, ...
0
票
1
回答
328
閲覧数
HTMLCollectionとは?
HTML
<ul id="parent">
<li id="first">1番目</li>
<li id="second">2番目</li>
<li id="third">3番目</li>
</ul>
JS
const ...
0
票
1
回答
177
閲覧数
noscriptタグが、サーバ環境でのみ、bodyの中に入ってしまう現象
私のPHPプロジェクトで以下のようなテンプレートがあります。(bodyの中身やheadの中身はわかりやすいように取り除いています。)
<!DOCTYPE html>
<head>
<noscript></noscript>
</head>
<body>
</body>
</html>
...
0
票
1
回答
223
閲覧数
GoogleChromeの拡張機能Tampermonkey(UserScriipt)を使用して、ダウンロードファイル名を希望のものにしたい。
GoogleChromeの拡張機能Tampermonkey(UserScriipt)を使用して、ダウンロードファイル名を希望のものにしたい。
現在は、
ページ内にダウンロードボタンがあり、押すとjavascriptが走り、サーバーサイドではPHPが走って、CSVファイルが生成される。そして、Windowsの名前をつけて保存ダイアログが表示される。
希望は、
この「...
0
票
1
回答
301
閲覧数
DOMDocument に <?xml-stylesheet ... ?> を追加するには?
<?php class SitemapGenerator{
private $sitemap;
private $urlset = array();
function __construct(){
$this->sitemap = new DOMDocument('1.0', 'UTF-8');
$this->...
0
票
1
回答
215
閲覧数
PHP DOMDocument HTMLエンティティ化
下記のコードで日本語部分がエンティティ化されてしまいます。
$newdoc->importNode($el, true) で発生しているようなのですが、
理由と対策を教えてください。
$orgdoc = new DOMDocument;
$orgdoc->loadXML("<old><span>あいうえお1</span><span&...
0
票
1
回答
288
閲覧数
PHP DOMDocument 要素の変更
親の要素名oldをnewに変更したいです。
oldの子要素は何階層も複数あるものとします。
<old><span>test1</span><span>test2<span>test3</span></span></old>
↓
<new><span>test1</span&...
0
票
1
回答
90
閲覧数
TypeScriptの構文 (node: NoddeType): node is VNodeが分からない。
以下の記事を参考に仮装DOMについて勉強しているのですが、仮想DOMからリアルDOMに反映する箇所のコードの構文がよく分からないです。
(node: NodeType)は辞書型アクセスをしているのでしょうか?
ifは省略されているのでしょうか?
@paramも何を示しているのか分からないです。
exportとある箇所は後から使用するための関数になるのでしょうか?
仮想DOMは本当に“速い”のか? ...
0
票
1
回答
9,057
閲覧数
C#側からすでに開いているEdge画面を操作する方法についてご教示願います。
C#側からすでに開いているEdge画面を操作する方法についてご教示願います。
やりたいこと
①すでに開いているEdge(複数画面)から、一つの必要な画面を特定する
②Edge画面のDOMを取得する
③Edge画面の項目の値を検証し、間違ったら、該当項目に色を付ける
④C#からEdge画面の遷移を発生させ、必要なデータを取得してから、
元のEdge画面に戻る。
⑤Edgeの画面でのボタン押下(...
0
票
1
回答
445
閲覧数
PCのChromeとiPhoneのSafariとで表示が異なる原因について
入力フォームのfocusの位置が異なる件についての質問です。
Windows10のChromeでは入力フォームのfocusが画面上の一番上に表示されます。
iPhoneのSafariだと1つ下のフォームになっています。
調査したところ、どちらも一番上のフォームと二番目のフォーム、両方に<input>がautofocusに設定されていました。
なぜ、...
0
票
0
回答
932
閲覧数
XPathでbody要素のテキストだけを取得する際、JavaScriptタグ内容だけは削除したい
意味はあまり分かっていないのですが、とりあえず下記のように書いたら、body要素の(恐らくタグを除いた)テキスト部分だけを取得できたのですが、
$crawler->filterXPath('//body')->each(function (DomCrawler $node) use ($url) {
$result = trim($node->text());
});
...