DOMとは
7173 ワード
DOMとは?
ドキュメントオブジェクトモデルは、HTML、XMLドキュメントのプログラミングインターフェースです.
ソース:https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
DOMは、簡単なテキストからなるHTMLドキュメントをオブジェクトモデルとして表すプログラミングアプリケーションです.2)オブジェクト向けプログラミングでは、オブジェクトモデル(Webページ)へのアクセスを許可します.すなわち、ドキュメントの構造、スタイル、コンテンツを変更します.DOMとは何かをより具体的に説明するために、上記の説明に従って1、2回に分けて説明します.
1)DOMはウェブページのオブジェクト向け表示である.
DOMは、与えられたHTMLコードに基づいてオブジェクトモデル(ウェブページ上のオブジェクト向け表現)として表され、そのオブジェクトモデルは「ノードツリー」として表される.次の例では、次のHTMLドキュメントをノードツリー構造として示します.1つの幹(親幹)に複数のサブ枝があり、そのサブ枝に複数の葉があります.
ここではhtmlは親、下のラベルは子の枝、「Myfirst web page」などの内容は木の葉と考えられます.オブジェクトモデルはこのように表されるため、名前はドキュメントオブジェクトモデルに由来します.上記のオブジェクトモデルの各ノードは、ドキュメント構造の一部ではなく、それぞれの機能とアイデンティティを持つオブジェクトであり、DOMはこれらのオブジェクトをオブジェクトモデルとして表す.DOMは、ドキュメントを構成するオブジェクト(ドキュメント構造のみならず)の属性と動作(動作)を定義するドキュメント内の複数のオブジェクト(要素)のモデルであり、「ドキュメントオブジェクトモデル」と命名される.
DOMは、Webページ上のオブジェクト向け表示ですが、このオブジェクトモデルを操作するためのインタフェースでもあります.インタフェースの意味でのDOMは2番目によく使われますが、1番目のDOMを混同しないでください.
<注意事項>
DOMはHTMLドキュメントから生成されるだけなので、ほとんど同じで内容が同じと勘違いする可能性があります.ただし、DOMとHTMLでは内容が異なる場合があります.
DOMは有効なHTMLドキュメントのインタフェースであるため、DOMを生成するとブラウザは無効なHTMLコードを訂正します.例えば、
<!doctype html>
<html>
Hello world
</html><head>および<body>がないと判断できます.ただし、作成されたDOMでは、この2つの必須要素が正しく表示されます.後でDOMについてもっと詳しく論じます.これはインタフェースであるため、他のプログラミング言語で修正することができます.例えば、
function addToList(){
var listContainer = document.getElementById('listSection');
var newListElement = document.createElement("div");
var inputBox= document.getElementById('addText');
var inputBoxText = inputBox.value;
newListElement.setAttribute("class", "listElement");
newListElement.innerHTML="\
<img src='./pinkCircleIcon.png'>\
<button class='textButton' name='undone' type='button' value='' onclick='doneOrUndone(this);'></button>\
<button class='removeButton' type='button' onclick='removeFromList(this);'></button>";
newListElement.children[1].textContent= inputBoxText;
listContainer.appendChild(newListElement);
inputBox.value="";
}2)DOMは、ウェブページ(ドキュメント、ドキュメント)を表示、記憶、操作する方法を提供する.
DOMは、オブジェクト向け言語でオブジェクトモデル(Webページ)にアクセスできるプログラミングインターフェースで、ドキュメントの構造、スタイル、コンテンツを変更できます.主にJavaScriptを使用してDOMを操作しますが、pythonなどの他のオブジェクト向け言語でアクセスすることもできます.以上のJavaScriptは,このDOMインタフェースを用いた例である.
W3C DOMおよびWHATWG DOMなどのDOMインタフェースを使用する方法は、標準で定義されています.DOM標準の規定に加えて、さまざまなライブラリまたはフレームワークを使用してDOMにアクセスおよび操作することもできます.
<ヴァニラJavaScriptとは?>
バニラJavaScriptとは、DOMにアクセス可能な複数のフレームワークやライブラリを使用せずに、純粋なJavaScript(ECMAScript)を使用してコードを記述する方法を指します.AngularJS、ReAct、Vueです.jsやjQueryなどのフレームワーク/ライブラリは使用しません.そのためには、ECMAScriptの基本的な知識とDOMとBOMの構成部分を熟知する必要があります.
ソース:http://www.phpinfo.co.kr/index.php/2018/09/24/jsvanilla-js/
参考文献
->以上の画像ソース
Reference
この問題について(DOMとは), 我々は、より多くの情報をここで見つけました https://velog.io/@spig0126/DOM이란テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol