DOM

このタグでブログを書く

言葉の解説

ネットで話題

DOM

(コンピュータ)

【どむ】

Document Object Modelの略称で、W3Cによって策定・勧告される、HTMLとXMLのための標準化されたAPI。文書の論理構造と、プログラムから文書にアクセスし操作するため手段を定義する。様々なモジュールによって構成されており、2006年現在Level 1からLevel 3までの仕様が勧告されている。

プラットフォームやプログラム言語に依存しないインタフェースとして設計されているが、WebブラウザごとのダイナミックHTMLの非互換性を緩和するために生まれた経緯からJavaScriptで、またJavaでよく利用される。

簡単な書き方

function 関数()
{
document.getElementById("DIVタグ名").innerHTML="書き換え後の内容";
}
<div id="DIVタグ名">書き換え前の内容</div>

書き換え後の内容はHTMLを認識するのでテキストボックスやテキストエリアなどの入力内容を出力するとおもしろい。

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

The light of hope to the other side of the tunnel - Kotsu Kotsu To -•1ヶ月前

PostMessage , Cross-Window-Communication Misconfig ( from out-of-scope to P2 with 5x reward ) から学ぶ

ソース： mouhannadalhmedi.medium.com 脆弱性：XSS, CORS 訳：周知のとおり、最新の Web アプリケーション、特にSPA を備えた Web アプリケーションは、クライアント側のアプリケーションに大きく依存しています。分析、支払い処理、認証、チャットサービスなどのコミュニケーションツールなど、多数のサードパーティサービスを備えていないクライアント側アプリケーションを見つけることはほとんどありません。クロスオリジン通信が付属しています。ほとんどの場合、これらのサービスはサードパーティプロバイダーでホストされているため、異なる「オリジン」たとえ…

#XSS#CORS#DOM

ネットで話題

808ブックマークやはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog

mizchi.hatenablog.com

802ブックマーク Explore DOM Events

domevents.dev

720ブックマークなぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita

qiita.com

blog.nkzn.net

591ブックマークリアルな DOM はなぜ遅いのか - steps to phantasien これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚...

blog.dodgson.org

550ブックマーク W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血

momdo.hatenablog.jp

535ブックマーク JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー

gigazine.net

528ブックマーク【ハウツー】Webデバッガに新星登場!? 操作を記録し、イベント/DOMを一発解析 - FireCrystal (1) FireCrystalとは | エンタープライズ | マイコミジャーナル複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「ど...

journal.mycom.co.jp

508ブックマーク JavaScriptのDOM Core基礎 - 三等兵

sandai.hatenadiary.org

関連ブログ

opuesto / Tate’s Official Blog•3ヶ月前

合法≠普通

本格的にスタートした‥ 『二拠点生活』‥‥ 二週目をクリアしました。ですが‥ 早速、身体に異変が‥。忘れない内に、 noteに書き残しておきました。 note.com 能登地震関連のニュースは、もちろん続いていますが、例の‥”政治と金”の問題も‥。「法‥とは‥」と‥日々考えてしまいます。 ”法が人を守るんじゃない人が法を守る” この名台詞が、頭の中をグルグルと回っています‥。「検察とは‥」と‥日々考えてしまいます。今回の7人の不起訴‥ 東京高検検事長の畝本直美（うねもとなおみ）氏。ちなみに‥ 旦那さんは、元検事長の‥畝本毅氏。旦那さんは‥ 森友事件を不起訴に‥。…

#東京高検検事長#畝本直美#不起訴#DOM#長寿庵#蕎麦呑み#喫煙可#ハンバーグ#喫茶店#政治と金

Web系開発メモ•3ヶ月前

JavaScript ドキュメントの読込完了時に処理を実行する方法

JavaScript を使って、ドキュメントやリソース（CSSや画像など）の読み込みが完了した時に処理を実行する方法を書いていきます。目次実行方法実行順序使い分け jQueryについて 1. 実行方法ドキュメントの DOMContentLoaded を使うと、HTMLの読み込み（DOMの解析）が完了した時に処理を実行することができます。 document.addEventListener('DOMContentLoaded', (event) => { // 処理を記述 }); また、ウィンドウの load を使うと、全てのリソース（スタイルシートや画像など）が読み込まれた後に処理を…

#JavaScript#JS#DOM

The light of hope to the other side of the tunnel - Kotsu Kotsu To -•5ヶ月前

Digging Deep Into Dom XSS からXSS DOM を学ぶ

ソース： medium.com 脆弱性：XSS DOM 訳： Burp suite pro を使用すると、それがいくらか簡単になりますが、それでもスキャン結果を解釈して脆弱性を悪用できる必要があります。多くのハッカーが失敗するのはここです。これは遊びでやるものではなく、真剣なビジネスです。この脆弱性は検出が難しいため気づかれないことが多く、実稼働環境では非常に一般的であることを意味し。ラボがまだ存在しない場合は、DOM XSS ラボがすぐに続きますが、最初にテキストの壁を突破する必要があります。 DOM XSSとはこの質問に取り組むには、まず DOM とは何なのかを答える必要がありま…

#DOM#XSS

のーとそーだこーど。•7ヶ月前

【初級編DAY14】Web制作初心者のためのJavaScript基礎講座（DOM操作）

サイトに動きを付けるためにはJavaSprictでDOM操作することで動きをつけることができます。DOM操作について学んでいきましょう！ DOM操作とは HTML要素の取得最初に一致したセレクタ要素を取得【document.querySelector】一致したすべてのセレクタ要素を取得【querySelectorAll】各セレクタで呼び出す【getElementsBy～】キー、プロパティを絞る Javascript で動きを付けるタイトル文字書き換えタグ、要素の追加【createElement、setAttribute、appendChild】ボタン操作、アクション操作【clic…

#DOM#querySelector#querySelectorAll#getElementsBy～#createElement#setAttribute#appendChild#window.onload#addEventListener

学習用ブログ•1年前

レンダリング (Rendering)とは

Reactのレンダリング（Rendering）は、Reactコンポーネントが画面上に表示されるプロセスです。 Reactでは、コンポーネントの状態やプロパティ（props）の変更に応じて、再レンダリングがトリガーされます。 Reactのレンダリングの主な特徴は次のとおりです。初回のレンダリングコンポーネントが最初に画面に表示される際、または親コンポーネントからの再レンダリングの結果として、コンポーネントの初回のレンダリングが行われます。この際、コンポーネントの JSX（JavaScript XML）コードが仮想DOM（Virtual DOM）に変換されます。仮想DOMの更新コンポーネ…

#react#レンダリング#コンポーネント#プロパティ#DOM

goruchan’s blog•1年前

JavaScript入門〜DOMとは〜

DOMとは DOMオブジェクトの操作方法ノードの作成と追加参考 DOMとは DOM (Document Object Model) は HTML や XML 文書を取り扱うための API 。 DOM では、ドキュメントに含まれる要素やテキストデータをオブジェクトとして扱い、ドキュメントはオブジェクトが階層的に組み合わせられたものと識別する。 DOM ではドキュメントを構成するオブジェクトのことをノードと呼び、ノードは大まかに要素ノード、テキストノード、属性ノードの３タイプがある。例えば、次のような HTML があるとする。 <!DOCTYPE HTML> <html> <head> <t…

#JavaScript#DOM

アイストマトバズーカのゲーム制作日記•2年前

JavaScriptさわってみる６回目(; ･`д･´) 必須の知識"DOM"とやら

こんにちは。 JavaScript さわってみる企画 (番外編を除くと) ６回目。５回目と同じような用語とか概念みたいなハナシになります。 ※毎度申し訳ありませんが初心者の勝手な解釈を書いただけの記事ですので情報の正確性は保証致しません。本記事の情報によるトラブル等、一切の責任を負いかねます。この企画は入門書を読みながらコードを書いてみたりネットを調べてみたりしているのですが、こういう概念的な説明のところを読むのってなかなか理解し難くて辛いです(;´Д｀) まだ全６章あるうちの３章で"JavaScriptの基礎"っていうテーマ。ただ４章以降は実践的でゲームを作り始めちゃってる感じなのでこの企…

#JavaScript#プログラミング初心者#DOM#Document Object Model#要素の取得

sai_dive IL•3年前

【JavaScript】DOM関連用語

DOMとは? Document Object Model JavaScriptのプログラムから、ウェブページにアクセスしてページを操作、利用することを可能にする仕組み DOMツリーとは? HTMLドキュメントをツリー構造として表現ノードとは? DOMツリーを形成する一つ一つのオブジェクト Windowオブジェクトとは？ブラウザを操作するための機能を集めたオブジェクトブラウザオブジェクトの階層構造の最上位に位置 ## Documentオブジェクトとは？ - Windowオブジェクト内に表示された、HTMLで表現されているコンテンツを保持しているオブジェクト - Window内に表示されたド…

#JavaScript#DOM

dosyaburi•3年前

JavaでXMLデータ扱うの何だか難しそうだと思ってたけど実際やってみたら超簡単だった

XMLとは Javaでの扱い方(DOM) デモコード import クラス create() //XMLデータの作成 writeFile //ファイル保存 readFile //ファイル読み込み print //コンソール出力実行 XMLとはこんなやつです。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <parent> <child> <element>data1</element> <element>data2</element> </child> </parent>よく見るとファイル構造と何となく似ています。 paren…

#Java#XML#DOM

マンガ•20時間前

私の彼氏は、かわいいけど世界でいちばんかっこいい【マイクロ】 6巻マンガ

ここでは「私の彼氏は、かわいいけど世界でいちばんかっこいい【マイクロ】 6巻」が読める電子書籍サイトをまとめています。スマホやタブレットで気軽に読みたい方は、参考にしてください。「私の彼氏は、かわいいけど世界でいちばんかっこいい【マイクロ】 6巻」の配信状況私が「私の彼氏は、かわいいけど世界でいちばんかっこいい【マイクロ】 6巻」の配信状況を調べたかぎり、2023/10/02時点では以下のサイトで読めるようになっていました。無料作品配信状況リンクまんが王国10,000作品～110ポイント読むちなみに、上記サイトで見られる他のマンガ作品はこんな感じです。まんが王国で読めるマンガ例 ※タップ…

本・花・鳥（ほん・か・どり）•1日前

ルリタテハ＆今日の独り言

野鳥観察会開始前、観察センターにて。 2024年4月22日の独り言昨日、セッカの「ヒッヒッヒッチャッチャッチャッ」を今季初聞きしたんだった。細かくショボショボ降る雨って鬱陶しい。こういういい加減なやり方が押し通ってしまうのが当たり前になってしまいましたな。【引用】裏金問題、森喜朗氏の聴取内容「記録はない」岸田首相が説明(毎日新聞) https://news.yahoo.co.jp/articles/85d8d77055628c1cb3087b44e8a7186c16bbe8f1?source=sns&dv=pc&mid=other&date=20240422&ctg=dom&bt=t…

世迷言ラボの世迷言•1日前

アウトプットってどうやったらできるようになるん？？？半歩前進するための考え方

「エンジニアたるものブログ等でアウトプットせい！」みたいな風潮あったりしませんか？ブログ書いている私が言うのもアレですが、けっこう辛いと感じる人も多いと思っています。一方でどうやったらアウトプットできるようになるか、いい感じにまとまっている情報ってあんまりなくて、いろいろすっ飛ばして「学んだことをブログに書いてみよう」で終わってたりします。 0から0.5に進むための考え方を紹介します。

もふもふ技術部•1日前

Rails7 に React + TypeScript を導入する

Rails7のアプリでJSのビルドツールはesbuildを使用します。環境構築の方法はこちらを参照ください↓↓ www.mof-mof.co.jp ReactとTypeScriptをインストールする以下のコマンドで必要なパッケージをインストール yarn add typescript react react-dom react-router-dom @types/react @types/react-dom @types/react-router-dom package.json のビルドスクリプトの末尾に --loader:.js=jsx を追記例） "build:js": "esbu…

トマシープが学ぶ•2日前

ローカルでreactの環境構築～AntDesignの表示まで

今までUdemyではcodesandboxとか会社で用意されてたstorybook上でやっていたけど、自分で１からローカルに環境作る。環境構築編集ページ遷移ボタン押したらページ遷移 AntDesign使う最後に環境構築どれもnpmをつかってるけどyarnでやっている記事はないのか？ qiita.com zenn.dev たぶん絶対入れないといけないnode.jsを入れたらnpmが入るからわざわざyarnを入れる必要がない？？ nodejs.org zenn.dev あとnext.jsというフレームワークを使いたい。のでとりあえずこの記事の手順でやった。 zenn.dev Node…

コミックス新刊情報！•2日前

2024年4月22日のコミックス新刊情報

Comic Library から2024年4月22日のコミックス新刊情報をお知らせします★ 2024年4月22日のコミックス新刊情報四畳半王妃II ~マリー・アントワネット転生王妃のやり直し~ (シルフコミックス) 深夜0時のアントルメ1 (シルフコミックス) バイト先の先輩が高校生じゃなかった話 1 ヴァニタスの手記 11巻通常版 (デジタル版ガンガンコミックスJOKER) 30歳まで童貞だと魔法使いになれるらしい（14） 30歳まで童貞だと魔法使いになれるらしい（14）特装版ドラマCD付きヴァニタスの手記 11巻特装版小冊子“Brocante”付き (デジタル版ガンガンコミックス…

backyard of 伊勢的新常識•2日前

Firebase AuthenticationでLogin with Discordを実現する

Firebase Authenticationでは様々な認証を簡単に導入することができ、Google、Apple、Faccebookといったよく利用されるサービスを統合した認証のほかに、カスタムの認証システムと統合することもできます。これを利用して、Discordのアカウントを使ってログインするWebサービスを、Firebase HostingとFirebase Functionsを統合して作ってみたいと思います。Discordでは一般的なOAuth 2.0ののフローでサービスにログインすることができますので、これを使ってFirebase Authenticationにユーザーを登録してログ…

によのITエンジニアもど記•2日前

自宅にNutanixを導入しちゃった話

突然ですが自宅にラックマウントサーバーを導入してしまいました。いきさつ以前から古めのPCにNutanix CEを入れて遊んでいたのでNX Hardware(というのが正式名称なのかは不明)がヤフオクとかで手に入る状況になったらポチろうと思っていたら、世代の中でも最小スペックのNX-1175S-G5が送料入れて16,000円弱といい感じのお値段で出品されていたので色々と考えた（置く場所、音、電気代とか）挙げ句落札してしまいました。他に入札者が居なかったので、そのままの価格で落札しました。着荷から試運転までデカい段ボールに丸められた新聞紙が大量に敷き詰められた中に入って届きました。ゴミの…

メモ的な思考的な•2日前

React + react-chartjs-2 + Chart.js を使って、Pie chart を表示してみた

Reactアプリで Pie chart (円グラフ)を表示したくなったので調べたところ、以下の記事がありました。 Front-end data tools — the awesome list LLMと相性のいいReactのChartライブラリを考察してみた🦜 | 株式会社AI Shift 上記では色々なライブラリが紹介されていましたが、今回はWebに情報の多そうな Chart.js を使ってみることにしました。 Chart.js | Open source HTML5 Charts for your website 次に、Chart.jsをReactで扱う方法を調べたところ、 react-c…

テックブログです•3日前

React Testing LibraryでReactコンポーネントを基本的なテストをする方法

React Testing Libraryで基本的なReactコンポーネントをテストする使い方を説明します。 React Testing Libraryとは Reactコンポーネントをレンダーして要素をテストする方法要素を取得する方法 Reactコンポーネントのインタラクションテストをする方法 APIから非同期でデータ取得するコンポーネントをテストする React Hooksのテスト方法スナップショットテストより高度なことをしたい場合 React Testing Libraryとは React Testing Libraryは、Reactコンポーネントをテストするためのシンプルなユーティ…

IT技術早わかりくん•4日前

スクレイピングとは

スクレイピング（Scraping）とは、Webサイトから必要なデータを自動的に抽出・収集する技術を指します。これは、Webページの構造や内容を解析し、目的のデータを取り出すプロセスです。スクレイピングの主な目的は以下の通りです： 1. データ収集の自動化：手動でデータを収集するのは時間がかかり、非効率的です。スクレイピングを使えば、大量のデータを短時間で収集できます。 2.競合分析：競合他社のWebサイトから価格情報や製品情報を収集し、自社の戦略策定に役立てることができます。 3. 市場調査：消費者の声や評判をソーシャルメディアやレビューサイトから収集し、市場動向の把握やマーケティング戦略の…

マンガ•4日前

バンオウ-盤王- 3巻マンガ

ここでは「バンオウ-盤王- 3巻」が読める電子書籍サイトをまとめています。スマホやタブレットで気軽に読みたい方は、参考にしてください。「バンオウ-盤王- 3巻」の配信状況私が「バンオウ-盤王- 3巻」の配信状況を調べたかぎり、2023/10/02時点では以下のサイトで読めるようになっていました。無料作品配信状況リンクまんが王国10,000作品～646ポイント読むちなみに、上記サイトで見られる他のマンガ作品はこんな感じです。まんが王国で読めるマンガ例 ※タップで確認星天のオルドタルク帝国後宮秘史安全運転で転生（トバ）します【単話売】ユメオチ～ユメで僕らは恋にオチる～溺愛ルームシェア～初…

/ft/'s blog•4日前

Qubes OS 4.2: Fedora テンプレートを新規インストール

Qubes OSの4.2系で新規にFedoraテンプレートをインストールして、既存のキューブをその新しいテンプレートベースにスイッチする方法を解説します。今回の記事では元の Fedora 38 から Fedora 39テンプレートに切り替える作業を行っていきます。記事執筆時点の最新のQubes ISO - Version 4.2.1では既に fedora 39のテンプレートが入っているので下記の作業は必要ありません。 Qubes Template Manager で fedora-39-xfce をインストール fedora-39-xfce テンプレートのアップデート fedora-39-x…

《2024❗️》台風1号たまご米軍最新予想・気象庁天気図情報•4日前

《2024》台風1号たまご:発生していません

Tweet 上にある Facebook「いいね！」ボタンを押して頂いた皆様、ありがとうございます！大変感謝しております。出典：高知大学気象情報頁https://goo.gl/RS4XBQを加工して使用出典：earth :: 地球の風、天気、海の状況地図https://bit.ly/3xWJ1mzを加工して使用降水量予想変化（南西諸島）：https://goo.gl/gkXD4J降水量予想変化（中日本）：https://goo.gl/br7VG4 Yahoo天気：台風情報 - Yahoo!天気・災害NHK ニュース : https://goo.gl/1eQzcE // ▶︎ 台風の動…

本・花・鳥（ほん・か・どり）•4日前

4月11日の遊行寺にて＆二日間の独り言

2024年4月18日の独り言なんでオレのことがそんなに分かるのか（笑）。【引用】瑞閏は新たまねぎ！恥かしがり屋で人見知りな人。本心を隠して人付き合いをするため。我慢することが多い。顔では笑っているけど心で泣いている。 #あなたを春野菜に例えると https://4ndan.com/app/1321/r/6 そうやって公務員たたきをやってきた現状が今の日本じゃないの？【引用】越谷市職員が全国で“給料1位”に埼玉県知事「高すぎる」異例の苦言も…実際は高くない？ #ldnews https://news.livedoor.com/article/detail/26254170/ 2024年4月19…

関連ブログ

PostMessage , Cross-Window-Communication Misconfig ( from out-of-scope to P2 with 5x reward ) から学ぶ

ネットで話題

関連ブログ

合法≠普通

JavaScript ドキュメントの読込完了時に処理を実行する方法

Digging Deep Into Dom XSS からXSS DOM を学ぶ

【初級編DAY14】Web制作初心者のためのJavaScript基礎講座（DOM操作）

レンダリング (Rendering)とは

JavaScript入門〜DOMとは〜

JavaScriptさわってみる６回目(; ･`д･´) 必須の知識"DOM"とやら

【JavaScript】DOM関連用語

JavaでXMLデータ扱うの何だか難しそうだと思ってたけど実際やってみたら超簡単だった

私の彼氏は、かわいいけど世界でいちばんかっこいい【マイクロ】 6巻 マンガ

ルリタテハ＆今日の独り言

アウトプットってどうやったらできるようになるん？？？半歩前進するための考え方

Rails7 に React + TypeScript を導入する

ローカルでreactの環境構築～AntDesignの表示まで

2024年4月22日のコミックス新刊情報

Firebase AuthenticationでLogin with Discordを実現する

自宅にNutanixを導入しちゃった話

React + react-chartjs-2 + Chart.js を使って、Pie chart を表示してみた

React Testing LibraryでReactコンポーネントを基本的なテストをする方法

スクレイピングとは

バンオウ-盤王- 3巻 マンガ

Qubes OS 4.2: Fedora テンプレートを新規インストール

《2024》台風1号たまご:発生していません

4月11日の遊行寺にて＆二日間の独り言

私の彼氏は、かわいいけど世界でいちばんかっこいい【マイクロ】 6巻マンガ

バンオウ-盤王- 3巻マンガ