ドキュメントオブジェクトモデルとは何ですか。また、その使用方法を知っておく必要がある理由。

つまり、HTMLを学び、最初のタグを作成し、CSSについて学び、美しいフォーム、すばらしいボタン、レスポンシブページを作成し、それがどれほどすばらしいかをみんなに示し始めました。

しかし、あなたは学習の新たな一歩を踏み出したいと決心し、自分自身に疑問を抱き始めました。ボタンをクリックしたときに、ページにアニメーションが表示されることを願っています。」

さて、それはDOMがあなたの問題を解決するために来るところです。あなたはおそらくそれについてたくさん聞いたことがあるでしょう、しかしあなたはそれが何であるかそしてそれがどんな問題を解決するかまだ知らないかもしれません。それでは、掘り下げてみましょう。

それで、DOMは何ですか?

周りに見られる、「あんなものを作れたらいいのに」と思わせるクールなアニメーションをすべて知っていますか?これらのアニメーションはすべて、DOMを操作することによって作成されます。それを操作し、Webサイトをよりクールに見せるための方法を説明します。

DOM(Document Object Model)は、HTMLおよびXMLドキュメントがブラウザーによってどのように読み取られるかを表すインターフェイスです。これにより、言語(JavaScript)でWebサイトを操作、構造化、およびスタイル設定できます。ブラウザがHTMLドキュメントを読み取ると、ドキュメントオブジェクトモデルと呼ばれる表現ツリーが作成され、そのツリーにアクセスする方法が定義されます。

利点

DOMを操作することで、無限の可能性が生まれます。更新せずにページのデータを更新するアプリケーションを作成できます。また、ユーザーがカスタマイズできるアプリケーションを作成し、更新せずにページのレイアウトを変更することもできます。要素をドラッグ、移動、および削除できます。

私が言ったように、あなたには無限の可能性があります—あなたはただあなたの創造性を使う必要があります。

ブラウザによる表現

上の画像では、表現ツリーと、それがブラウザによってどのように作成されるかを確認できます。この例では、よく目にする4つの重要な要素があります。

  1. ドキュメント:すべてのHTMLドキュメントを処理します。
  2. 要素HTMLまたはXML内にあるすべてのタグがDOM要素に変わります。
  3. テキスト:すべてのタグのコンテンツ。
  4. 属性:特定のHTML要素のすべての属性。この画像では、属性class =” hero”< p>要素の属性です。

DOMの操作

これで、DOMの操作を開始するという最良の部分に到達しました。まず、いくつかのメソッドとイベントの動作を確認するために、例としてHTML要素を作成します。

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

とてもシンプルですよね?次に、DOMメソッドについてさらに学習します。要素を取得して操作を開始する方法です。

メソッド

DOMには多くのメソッドがあります。これらは、ノード(要素)とイベントの間の接続であり、後で詳しく説明します。最も重要な方法のいくつかとその使用方法を紹介します。ここでは紹介しないメソッドが他にもたくさんありますが、それらすべてのメソッドをここで確認できます。

getElementById()

このメソッドは、渡された名前IDを含む要素を返します。ご存知のとおり、idは一意である必要があるため、必要な要素のみを取得するのに非常に便利な方法です。

var myStart = document.getElementsById('start');

myStart:渡されたIDに似た変数名。

startidが渡されました。また、その特定の名前のIDがない場合は、nullを返します

getElementsByClassName()

このメソッドは、渡された特定の名前クラスを含むすべての要素のHTMLCollectionを返します。

var myContainer = document.getElementsByClassName('container');

myContainer:渡されたクラスに似た変数名。

.containerクラスに合格しました。その特定の名前のクラスがない場合は、nullを返します

getElementsByTagName()

これは上記のメソッドと同じように機能します。HTMLCollectionも返しますが、今回は1つの違いがあります。つまり、渡されたタグ名を持つすべての要素を返します。

var buttons = document.getElementsByTagName('button');

ボタン:渡されたタグ名に似た変数名。

ボタン:取得したいタグ名

querySelector()

特定のCSSセレクターが渡された最初の要素を返します。ちょうどことを覚えておいてくださいセレクタが従うべきCSSの構文をセレクターがない場合は、nullを返します

var resetButton = document.querySelector('#reset');

resetButton:渡されたセレクターに似た変数名。

#resetセレクターが渡されました。一致するセレクターがない場合はnullを返します

querySelectorAll()

querySelector()メソッドと非常に似ていますが、1つだけ違いがあります。渡されたCSSセレクターと一致するすべての要素を返します。セレクタはまた、従うべきCSSの構文をセレクターがない場合は、nullを返します

var myButtons = document.querySelector('#buttons');

myButtons:渡されたセレクターに似た変数名。

#buttonsセレクターが渡されました。一致するセレクターがない場合はnullを返します

これらは、最もよく使用されるDOMメソッドの一部です。HTMLページに新しい要素を作成するcreateElement()や、要素HTMLの新しい属性を設定できるsetAttribute()など、使用できるメソッドは他にもいくつかあります。あなたは自分でそれらを探索することができます。

ここでも、あなたは左側に、ここにすべての方法を見つけることができる方法。近いうちに必要になるかもしれないので、他のいくつかを見てみることを強くお勧めします。

次に、イベントについて学習します。イベントがないと、ページでアニメーションを作成できません。

イベント

先ほど説明したように、DOM要素にはメソッドがありますが、イベントもあります。これらのイベントは、私たちのページで双方向性を可能にする責任があります。しかし、あなたが知らないかもしれないことが1つありますイベントメソッドでもあります

クリック

最もよく使用されるイベントの1つは、クリックイベントです。ユーザーが特定の要素をクリックすると、何らかのアクションが実現します。

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

addEventListener()パラメーターは次のとおりです。

  1. 必要なイベントのタイプ(この場合は「クリック」)。
  2. コールバック関数
  3. デフォルトでは、useCaptureはfalseです。イベントを「キャプチャ」するかどうかを示します。

選択する

このイベントは、特定の要素が選択されたときに何かをディスパッチしたい場合に使用します。その場合はつもり派遣シンプルなアラートを

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

これらは、最も一般的に使用されるイベントの一部です。もちろん、ドラッグアンドドロップイベントなど、使用できるイベントは他にもたくさんあります。ユーザーが要素のドラッグを開始すると、アクションを実行でき、その要素をドロップすると、別のアクションを実行できます。

次に、DOMをトラバースしていくつかのプロパティを使用する方法を見ていきます。

DOMのトラバース

DOMをトラバースして、これから説明するいくつかのプロパティを使用できます。これらのプロパティを使用すると、要素、コメント、テキストなどを返すことができます。

.childNodes

このプロパティは、指定された要素の子ノードnodeListを返します。テキストやコメントなどを返します。ですから、使いたいときは気をつけてください。

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

。第一子

このプロパティは、指定された要素の最初の子を返します。

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nodeName

このプロパティは、指定された要素の名前を返します。この場合、divを渡したので、「div」が返されます。

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

このプロパティは、現在のノードの値を返すか設定するため、テキストとコメントに固有です。この場合、divを渡したため、nullが返されます

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

このプロパティは、指定された要素のタイプを返します。この場合、「1」を返します。

var container = document.querySelector('.container')
var getValue = container.nodeType;

しかし、とにかく「1」はどういう意味ですか?これは基本的に、指定された要素のnodeTypeです。この場合、それは_ELEMENT_NODE_であり、nullを返します。これが属性の場合、「2」として私たちと属性値に返されます。

nodeTypesについて詳しくは、こちらをご覧ください。

要素

これらのプロパティは、上記のプロパティの代わりに、要素のみを返します。混乱が少なく、理解しやすいため、より頻繁に使用され、推奨されます。

.parentNode

このプロパティは、指定されたノードの親を返します。

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

指定された要素の最初の子要素を返します。

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

指定された要素の最後の子要素を返します。

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

これらは、DOMが持つ多くのプロパティの一部です。いつか必要になるかもしれないので、DOM、その仕組み、およびそのメソッドとプロパティについての基本を知ることは非常に重要です。

結論

DOMは、素晴らしい革新的なアプリケーションを作成するためのいくつかの重要なAPIを提供します。その基本を理解すれば、信じられないほどのものを作ることができます。DOMについて詳しく知りたい場合は、ここをクリックしてすべてのMDNドキュメントを読むことができます。

?FはTwitterで私をollow!

F GitHubの上に私ollow!

遠い機会を探しているので、何か聞きたいことがあれば、私に連絡してください!