[DOM]DOMとは?

6077 ワード
DOM DOM Event テキストリンク
出典:Ellisswエンジニアトラック

🤔 DOMとは?


DOM(document object model)
:ドキュメントオブジェクトモデル
  • オブジェクト向けモデルを用いる構造化文書
    • を表す.
  • HTMLまたはXMLドキュメントのプログラミングインタフェース
    :DOMは、ドキュメントに構造化された表現を提供し、プログラミング言語でドキュメントの構造、スタイル、コンテンツを変更できます.

    • ✔DOMの種類

  • Core DOM:すべてのドキュメントタイプに対応するDOMモデル
  • HTML DOM:HTMLドキュメントのDOMモデル代替
  • XML DOM:ドキュメントのDOMモデル

    • HTML DOM


    :HTMLドキュメントへの操作とアクセスの標準化方法
    すべてのHTML要素はHTML DOMからアクセスできます

    📝 Document


    ドキュメントオブジェクト


    :documentオブジェクト表示ページ
    したがって、Webページに存在するHTML要素にアクセスするには、ドキュメントオブジェクトからアクセスする必要があります.

    Document method


    1.HTML要素の選択


    :新しいHTML要素を選択する方法
    - document.getElementById(): 해당 아이디 요소
- document.getElementByClassName(): 해당 클래스 요소 모두
=> id는 유일하지만 class는 여러개 있을 수 있기 때문

- document.getElementByName(): 해당 이름 속성값을 가지는 요소 모두

- document.querySelector(): 해당 선택자로 선택되는 요소 1개
- document.querySelectorAll(): 해당 선택자로 선택되는 요소 모두
    参考まで:getElementByIdとquerySelectorの違い

    2.HTML要素の生成


    :HTML要素を選択する方法
    - document.createElement(): 지정된 HTML 요소를 생성
- document.write(): HTML 출력 스트림을 통해 텍스트 출력

    3.HTMLイベントハンドラの追加


    :HTML要素にイベントハンドラを追加するためのプロパティ

    アクティブ。


    :WebブラウザがHTML要素のイベントの発生を示します.JavaScriptは、発生したイベントに応答し、特定の操作を実行します(たとえば、マウスが停止しているとき、マウスが停止しているとき、クリックしているとき...).

    イベントハンドラ


    :イベント発生時に処理を担当する関数.イベント発生を指定すると、Webブラウザで登録済みイベントハンドラが実行されます
    <p onclick="onClick">click</p>
<script>
const onClick=()=>{
  document.getElementByTagName("p").innerHTML ="clicked";
}
</script>

    ✅ HTML ➡️ DOM


    <html>
  <head>
    <title>자바스크립트 기초</title>
  </head>
  <body>
    <article>
      <header>header</header>
      <section>
        <header>header 1</header>
       section1
      </section>
    </article>
  </body>
</html>
    BOJ/Baekjun-1069-python
    Recursive Functions