DOMとは?

DOMは、WebページのHTMLを階層化してツリー構造を形成するオブジェクトモデルです.
JavaScriptでは、このモデルを使用してWebページにアクセスしたり、ページを変更したりできます.DOMはHTMLとJavaScriptの接続点です.

次の図は、DOMDがツリー構造であり、それらの間の接続方法を示しています.

DOMは何ができますか?

JavaScriptでHTMLにアクセスできると言っていましたが、どのようにアクセスするか知っていますか?documentグローバルオブジェクトから直接アクセスできます.
JavaScriptの文書オブジェクトはDOM構造へのアクセスの関門であり,文書オブジェクトはHTML文書を表す.

なぜHTMLにアクセスするのですか?

documentオブジェクトを使用すると、DOMツリーのルートノードにアクセスできます.また、documentオブジェクトを使用して要素または要素にアクセスするプロパティ、すなわちclassまたはidの追加、スタイルの変更またはcssへの追加もできます.
次に、どのような方法があるかを一つ一つ理解してみましょう.

HTML要素へのアクセス

document.getElementsByTagName(「タグ名」)

document.getElementsByClassName(「クラス名」)

document.getElementsById(「ユーザー名」)

3つの方法は、HTML要素にアクセスする方法です.でも違う場所が見える
getElementsとgetEdumsには括弧[ ]があり、違いはありません.
違いは、idが一意の値(すなわち複数のタイプ)ではないため、タグ名を書き込むだけで、クラス名とタグ名を読み込むと同じタグ名またはクラス名が複数ある可能性があることです.
したがって、類似配列にいくつかの要素を入力してアクセスするために、カッコにindexの値を入力する必要があります.

document.querySelector("")

document.querySelectorAll("")

上記の3つの方法と同様に要素にアクセスしますが、上記の方法とは異なり、上記の方法でタグ名、クラス名、アイデンティティ名の入力のみが許可されている場合、クエリーコレクタは要素のサブ要素をロードできます.
例を挙げる

let el = document.querySelector("div.user-panel.main input[name=login]");

예제의 결과는 클래스가 "user-panel main"인 <div>(<div class="user-panel main">)
안의, 이름이 "login"인 <input> 중 첫 번째 요소에 접근하는 방법입니다.

HTML要素のコンテンツへのアクセス

HTML要素にテキストが含まれている2つの方法を見てみましょう.

innerText

innerHTML

両方のテキストが純粋なテキストであれば、まったく違いはありません.
ただし、処理属性の値が異なる
サンプルコードを見てみましょう


element.innerTextにhtmlを含む文字列を入力します.
htmlコードは文字列の形式で要素に含まれます.

前述したように、element.innerHTML属性にhtmlコードを入力します.htmlelementは、elementに含まれる.
上記の例では、'innerHTML()'をクリックします.
入力したhtmlタグを解析して、赤いAが表示されることを確認できます.

HTML要素の作成

createElementという名前のメソッドを使用して要素を作成できます.また、生成された要素を親要素に子要素として入れるappendChuld方法についても議論する.

function createTag() {
  // div 태그 가져오기
  let div = document.getElementsByTagName('div')[0]
  
  // span 태그 생성하기
  let span = document.createElement('span');
  
  // span 태그에 class 속성 부여하고, class 이름을 box로 하기
  span.className = 'box';
  
  // spab 태그 content에 안녕하세요 라는 텍스트 넣기
  span.innerHTML = '안녕하세요';
  
  // div 태그에 위에 만든 span 태그를 넣기
  div.appendChild(span);
}

リファレンス

MDN Web Docs Document