Hatena Blog Tags
はてなブログ トップ
Document Object Model
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Document Object Model

(コンピュータ)
【どきゅめんとおぶじぇくともでる】

→DOM

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

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

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

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

ネットで話題

もっと見る
68ブックマーク第7回　Ajax活用のためのDocument Object Model入門xtech.nikkei.com
54ブックマークDOM【Document Object Model】とは何かDOMとは何か 編集者 Jonathan Robie, Texcel Research 序論 文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。DOM仕様書においては「文書」という用語は...www.doraneko.org
50ブックマークDocument Object Model - Wikipediaja.wikipedia.org
36ブックマークDocument Object Model Events - 1.6.5. HTML event types1. Document Object Model Events Editors Tom Pixley, Netscape Communications Corp. 1.1. Overview of the DOM Level 2 Event Model The DOM Level 2 Event Model is designed with two main goals. The first goal is the design of a generic event system which allows registration of event handlers, describes...www.w3.org
34ブックマークDocument Object Model (DOM) - Web APIs | MDNdeveloper.mozilla.org
28ブックマークDocument Object Model (DOM) - Web APIs | MDNdeveloper.mozilla.org
20ブックマークDocument Object Model (DOM) SpecificationsDocument Object Model Level 3 Document Object Model Level 3 Core (W3C Recommendation) 7 April 2004, Arnaud Le Hors, Philippe Le Hégaret [errata] [implementation report] [issues list] [IPR Disclosures] Document Object Model Level 3 Load and Save (W3C Recommendation) 7 April 2004, Johnny Stenback [...www.w3.org
16ブックマークDocument Object Model/TextRangeTextRangeオブジェクトの位置と大きさを得られます。 rng.boundingLeft rng.boundingTop rng.boundingWidth rng.boundingHeight 例えば下のようなボタンの文字の、ドキュメントの上からの座標を得ます。 var rng = obj.createTextRange(); //objはボタン alert(rng.boundingTop); TextRange オブジェクトに対しコマンド...homepage3.nifty.com
15ブックマークDocument Object Model の部屋 - Personnelご案内 Personnelより、 とリンクを辿るとこの文書「 Document Object Model の部屋 」に行き着きます。 Site searchより、任意のキーワードを含んだサイト内の文書をリストアップできます（Googleを利用）。 Site mapより、このサイトの全体的な構造を把握できます。 この文書の恒久的なURIは、http://purl.org/jintric...members.jcom.home.ne.jp

関連ブログ

deve.K's Programming Primer - プログラミング初心者のための入門ブログ•2年前

JavaScriptを扱う前のDOMとは？ 基礎

初心者の方がJavaScriptを学び始める際に必ず理解するべきポイントの一つに、DOMがあります。 今回は、初学者の方にとって重要なポイントを押さえ、勉強時間を短縮するために、私がJavaScriptのDOMについて説明します。 DOMとは？ ブラウザを操作する？ 注意点 最後に DOMとは？ JavaScriptを学ぶ上で最も必要なのが、DOM（Document Object Model）です。 Webページにおいて、HTML、SVG、XMLなどのドキュメントは、すべてドキュメントと呼ばれます。 DOMは、これらのWebページをツリー構造で表現し、要素へのアクセスと管理を容易にします。 H…

#JavaScript#Document Object Model
deve.K's Programming Primer - プログラミング初心者のための入門ブログ•2年前

React 仮想DOM【Virtual DOM】の仕組み

本日は、初学者の方に向けて、仮想DOMとリアルDOMの違いについて解説します。Webサイトにおいて、DOMは非常に重要な役割を担っています。フロントエンドプログラミングにおいては、DOMの概念を理解することが欠かせません。しかしながら、Reactのようなフレームワークを使用する場合、仮想DOMという概念にも注目する必要があります。Reactを学ぶ際には、仮想DOMについての理解が不可欠です。仮想DOMがどのように機能するかを知ることで、Reactの開発においてより効率的にプログラミングを行うことができます。本記事を読むことで、Reactにおける仮想DOMとは何かを正確に理解することができますの…

#react#Virtual DOM#Document Object Model
deve.K's Programming Primer - プログラミング初心者のための入門ブログ•2年前

JavaScript DOM操作の基本 要素の取得【追加・削除・置換】

本日はJavaScriptでDOMの要素にアクセスし、それらを操作していく方法を解説致します。 JavaScript オブジェクトメソッド IDによる要素へのアクセス クラス名の要素へアクセス タグ名の要素にアクセス クエリセレクタによる要素へのアクセス スタイルの変更 要素の追加と削除 初心者がメソッドを使用する際の注意点 JavaScript Documentオブジェクトは、ドキュメントのすべてのHTML要素へのアクセスを提供するオブジェクトとなります。 ドキュメントオブジェクトは、HTML、head、body、その他のHTMLタグなどのHTMLドキュメントの要素をオブジェクトとして格納し…

#JavaScript#Document Object Model#DOM操作#メソッド#プロパティ
iimon TECH BLOG•13日前

ブラウザのオブジェクトモデルの構築について

はじめに こんにちは。 株式会社iimonでフロントエンドを担当している保田です。 今回はブラウザがレンダリングする際に構築されるDOM（Document ObjectModel）とCSSOM（CSS Object Model）について書きました。 レンダリングとは？ ブラウザに指定されたURLをブラウザの画面に表示することです。 ブラウザには以下のように、さまざまな機能が搭載されていますが、レンダリングの役割を担っているのがレンダリングエンジンです。 以下のサイトでまとまっているように使用されているレンダリングエンジンは使用されているブラウザごとにさまざまです。 webukatu.com 引…

Androidアプリ開発の覚書き•17日前

Jsoup：KotlinのプログラムでHTMLの表を加工する

JsoupというJavaのライブラリを用いて、HTMLを操作する方法を教えてもらいました。 元の文書がXMLの場合、パーサーを指定する必要があるそうなので、忘れないようにしたいです。 後半では、読み込み・書き込み時の文字コードの設定方法も教えてもらいました。 Kotlinのプログラムでhtmlの表を、見にくくても良いので、論理的な構造は保ちながらテキストに表示したいです。どうすれば良いでしょうか？ 実は、HTMLを保持している元の文書がXMLなのです。同じJsoupライブラリで大丈夫ですか？ Jsoupについて、歴史や他のライブラリと比較した場合との特徴を教えてください。 元のXMLに1MBに…

WEBサイト制作の勉強•2ヶ月前

JavaScriptとは

プログラムとは？いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。 プログラム コンピュータプログラム（英：computer programs）とは、コンピュータに対する命令（処理）を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。 要はコンピューターに命令し、動かす為に使う物（言語…

Androidアプリ開発の覚書き•2ヶ月前

WebViewでハイライトを動的に追加するには

また、ChatGPTに聞いてみました。 WebViewでハイライトをするには、Javascriptを用いて、直接View内のHTMLのDOMを操作する必要があるようです。 TextViewに、表を表示することはできますか？ WebViewに表示した文章に、アプリユーザーがハイライトを追加する処理を導入したいのですが、どうすれば良いですか？ ユーザーが選択したテキストを取得し、そのテキストをJavaScript関数に渡す処理は、どのようなものになりますか？ Javascriptの"window.getSelection()"では何を取得しているのですか？ あと、if文の"document.sel…

IT技術紹介•3ヶ月前

プログラミング言語：JavaScript

※プロモーションを含んでいます JavaScript（JS）は、Web開発の世界で広く使用されているプログラミング言語です。この記事では、JavaScriptの基礎、フロントエンドとバックエンドでの使用方法、そして将来性について解説します。 JavaScriptの基礎 動的なウェブページ: JavaScriptは、ウェブページを動的に操作するためのスクリプト言語として広く使用されています。HTMLとCSSと組み合わせることで、インタラクティブなユーザー体験を提供することができます。 オブジェクト指向プログラミング: JavaScriptはオブジェクト指向プログラミング言語であり、関数やオブジェ…

学生向けプログラミング入門 | 無料•3ヶ月前

Rails導入編 | カート機能の実装 | 19 | Ajaxリクエスト送信

↓↓クリックして頂けると励みになります。ランキング参加中プログラミング 【18 | Ajax】 ホーム】 >> 【20 | Helper】 Ajaxリクエストを送信できるようにします。 トップページでは「button_to()」を使っってcreateアクションへのリンクを作成しています。 これをAjaxリクエストを送信するように変更します。 それには呼び出しに「remote: true」パラメータを追加します。 「SampleCart/app/views/markets/index.html.erb」ファイルを以下のように編集します。 33行目を以下のように変更しています。 <%= butto…

Fenrir Engineers•4ヶ月前

DOMや仮想DOMについてざっくり知る

『DOM…？HTMLで使用するタグのことじゃないの？』 『仮想DOM？JavaScriptでいい感じにHTMLタグを操作してくれるものじゃない？知らんけど』 DOMとは何なのか。分かってそうで、実はちゃんと説明できないという方はいませんか？ かつての私もそうでした。ここで改めてまとめようと思います。 DOM（Document Object Model）とは何なのか。 JavaScriptでHTMLを操作する仕組みのこと。 HTMLを操作するための手段（インターフェース）を提供しています。 なぜDOMが必要なの？ Webページを作成するとき、HTMLを使用してコンテンツを作成します。 しかし、H…

webサイト制作の勉強｜2023年11月クラス用ブログ•4ヶ月前

JavaScriptの基礎

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当しているスクリプト言語です。 Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで使用場面は多岐にわたっています。それどころか、今やJavaScriptは宇宙船のUIにも使用されています。 note.com JavaScr…

itstaffing エンジニアスタイル•4ヶ月前

JavaScriptつまずかないための考え方

HTML/CSS画面にJavaScriptで動的な変化を付けてみましょう。その際、ビギナーがつまずきやすい箇所もご紹介。上手く乗り越える考え方とは？まずは、初めに理解しておきたい2つの事項をチェック。 JavaScriptを使い、カンタンな動きを付けてみる 前回は画面上のCSSの操作を簡単に体験しました。もう少し実用的な形でHTML/CSSの画面にJavaScriptで動的な変化を付けようとすると、以下の点を理解していく必要があるでしょう。 画面のCSSを操作する ユーザーの操作をイベントとして捕まえる DOM（Document Object Model）を扱ってHTMLを変化させる この連載…

AIko Code Symphony•5ヶ月前

モダンJavaScript入門: DOM操作

JavaScriptを使ってウェブページを動的に変更するためには、DOM（Document Object Model）の理解と操作が必要不可欠です。この記事では、DOM操作について詳しく解説し、それぞれの特徴と使用方法を具体的なコード例とともに説明します。 目次 DOMとは? 要素の選択 要素の作成と追加 要素の削除 属性の操作 スタイルの操作 DOMとは? DOMはDocument Object Modelの略で、HTMLやXML文書のプログラム的なインターフェースです。DOMを使うと、プログラムからHTMLの要素を操作したり、要素にイベントを割り当てたりすることができます。 // HTML…

はなちるのマイノート•5ヶ月前

【C#】System.Text.Jsonで直接UTF-8バイト配列にシリアライズ & UTF-8バイト配列からデシリアライズする方法

はじめに 今回はSystem.Text.Jsonを利用して直接UTF-8バイト配列にシリアライズ & UTF-8バイト配列からデシリアライズする方法を紹介したいと思います。また公式ドキュメントには文字列ベースのメソッド(UTF-16)を使用するよりもUTF-8バイト配列のシリアル化は約5から10%高速だと表記されています。 UTF-8 バイト配列へのシリアル化は、文字列ベースのメソッドを使用するより約 5 から 10% 高速です。 違いは、バイト (UTF-8) を文字列 (UTF-16) に変換する必要がないことから生じます。 C# で JSON のシリアル化と逆シリアル化を行う方法 - .…

FLINTERS Engineer's Blog•5ヶ月前

visxを用いて、Reactアプリケーション上での散布図の表現を広げる

こんにちは、株式会社FLINTERSでエンジニアをやっている丸山です。 この記事は2024年1月にFLINTERSが10周年を迎えることを記念して、133日連続でブログを書き続けるチャレンジの一環として書かれました。本記事は73日目の記事となります。 ちなみに63日目に投稿している丸山とは別の丸山になります。 今回の記事は、現在Reactを使って開発しているWebアプリケーションでデータの可視化を行う際に、visxという低レベルビジュアライゼーションコンポーネントライブラリを使用したので、それについて書きたいと思います。 はじめに データを取り扱う際、その可視化というのは重要です。 これはデー…