DOMおよび要素メソッドの操作、デバッグ

DOMとは?
ドキュメントオブジェクトモデル
HTML、XMLドキュメントにアクセスするためのインタフェースです.
このオブジェクトモデルは、ドキュメント内のすべての要素を定義し、これらの要素にアクセスする方法を提供します.
広義には、WebブラウザがHTMLページを認識する方法を意味する.
狭義には、ドキュメントオブジェクトに関連するオブジェクトの集合である可能性があります.
DOMは、ドキュメントの構造化された表現(Structured Representation)を提供し、プログラミング言語でDOM構造にアクセスする方法を提供し、ドキュメントの構造、スタイル、コンテンツを変更するのに役立ちます.
DOMは、構造化ノードと属性とメソッドを持つオブジェクトを使用してドキュメントを表します.
Webページをスクリプトまたはプログラミング言語にリンクする責任を負います.
DOMを使うには特にやるべきことはありません.
各ブラウザは独自の方法でDOMを実現しており、実際のDOM規格に合致していることを確認する必要があります.
すべてのWebブラウザは、スクリプトがアクセスできるWebページを作成するために、常にある程度のDOMを使用します.

ドキュメントオブジェクトモデル(DOM)は、メモリにWebドキュメント構造を表すことで、スクリプトとプログラミング言語をページに関連付けます.スクリプトは主にJavaScriptを指し、HTML、SVG、XMLオブジェクトをJavaScript言語の一部ではないドキュメントとしてモデリングします.
DOMはドキュメントを論理ツリーとして表します.ツリー内の各ブランチはノードで終了し、各ノードにオブジェクトがあります.DOMメソッドでは、ツリーへのプログラミングアクセスが可能になります.これにより、ドキュメントの構造、スタイル、および内容を変更できます.
ノードにはイベントプロセッサも含まれます.イベントが発生すると、イベントに関連付けられたプロセッサが起動します.
HTMLをJavaScriptとしてモデリングしたのは文書オブジェクトモデル(DOM)です.
DOMはノード単位に分割され、このノードはツリー構造である.
デバッグ
誤った行為を解決する.
初期のコンピューター開発者の一人グレース・ハッパーは、コンピューターの故障原因を調べたところ、回路の間に蛾が挟まっていることが分かった.この蛾はコンピュータに故障をもたらし、その時からコンピュータに何か問題が発生したらエラーと呼ばれます.また、デバッグ(debugging)は、エラーをキャプチャし、エラーを検索して修復することを意味します.
Document.querySelector()
Document.QuerySelector()は、指定した選択者または選択者グループに一致するドキュメントの最初のElementを返します.
一致する要素がない場合はnullを返します.
1つ以上の選択者を含むDOMString.有効なCSSセレクタでなければ、SYNTAX ERR異常が発生します.
id、クラス名、タグ名が使用可能
Document.querySelectorAll()
指定したコレクタグループに一致するドキュメント内のエンティティのリストを表す静的(非アクティブ)ノードのリストを返します.
Document.getElementById()
指定された文字列に一致するid属性を持つ要素を検索し、その属性を表すElementオブジェクトを返します.
IDは、ドキュメント内で一意である必要があるため、特定の要素をすばやく検索するときに便利です.
IDのない要素にアクセスするにはDocumentを使用します.querySelector()を使用してください.
すべての選択プログラムが使用可能です.
Element.getElementsByClassName()
指定されたクラスのすべてのサブ要素を持つリアルタイムHTML Collectionを返します.
DocumentのgetElementsByClassName()メソッドの動作は同じですが、Documentルートディレクトリからドキュメント全体をナビゲートします.
Document.getElementsByTagName()
別名のHTML Collectionと指定したタグ名を返します.
ルートノードを含むドキュメント全体を検索します.
戻ってきたHTML Collectionは生きていて、これはdocumentです.getElementsByTagName()を自動的に更新し、DOMツリーとの同期を維持します.
クラス名の設定
element.className="名前";
既存のクラス名をすべて削除して再設定すると、
例1に示すように、classNameプロパティを使用します.
「classList」がreadonlyプロパティであるため、値を直接指定できません.
クラスの追加
Element.classList.add
指定したクラスのメソッドを追加します.

クラスを複数追加
element.classList.add(「名称1」,「名称2」...);
element.classList.複数のパラメータをadd()関数に渡します.
複数のクラスを一度に追加できます.

クラスの変更
element.classList.replace(「変更前の名前」、「変更後の名前」)
また、既存のclassプロパティで特定のclass itemを検索することで、アイテムの名前を変更することもできます.
クラスの削除
Element.classList.remove
指定したクラスのメソッドを削除します.
innerText
innerTextは「Element」の属性で、Elementからユーザーの「表示」テキスト値を取得します.
上記の例では、「innerText」ボタンをクリックします.
次のテキストを取得します.
元div中
「こんにちは.「お会いできて嬉しいです」と入力しましたが、
ブラウザがユーザーに表示すると、連続するスペースは無視され、1つのスペースのみが処理されます.
「こんにちは.「お会いできて嬉しいです」として表示されます.
さらに、上記の例のdivには、「display:none」と定義されたテキストも含まれています.
ブラウザには「display:none」と定義された「非表示テキスト」は表示されません.
innerTextは、ユーザーが表示するテキストを取得します.
これは、ユーザがブラウザのCtrl+Cからクリップボードにdivのコンテンツをコピーする場合に容易に理解できる.
innerText、textContent差異
共通点:エンティティとノードにテキストまたは入力値を追加する方法
HTML

<div id='my_div'>
  안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>
<input type='button'
       value='innerText'
       onclick='getInnerText()'/>
<input type='button'
       value='textContent'
       onclick='getTextContent()'/>

JS

function getInnerText() {
  const element = document.getElementById('my_div');
  alert(element.innerText);
} 

function getTextContent() {
  const element = document.getElementById('my_div');
  alert(element.textContent);
} 

innerText
innerTextは「Element」の属性で、Elementからユーザーの「表示」テキスト値を取得します.
divの中だったのか.
「こんにちは.「お会いできて嬉しいです」と入力しましたが、
ブラウザがユーザーに表示すると、連続するスペースは無視され、1つのスペースのみが処理されます.
「こんにちは.「お会いできて嬉しいです」として表示されます.
さらに、上記の例のdivには、「display:none」と定義されたテキストも含まれています.
ブラウザには「display:none」と定義された「非表示テキスト」は表示されません.
innerTextは、ユーザーが表示するテキストを取得します.
これは、ユーザがブラウザのCtrl+Cからクリップボードにdivのコンテンツをコピーする場合に容易に理解できる.
textContent
textContentは「ノード」の属性です.
innetTextとは違います
上記の例ではtextContentボタンをクリックします.
「こんにちは.「お会いできて嬉しいです」の連続するスペースが表示されていることを確認します.
また、「display:none」スタイルを適用した「非表示テキスト」文字列も出力されます.