[JavaScript] DOM


DOM



ドキュメントオブジェクトモデル(Document Object Model)は、Webページのすべての内容をオブジェクトとして表します.DOMは、ドキュメントの構造表示を提供し、プログラミング言語でDOM構造にアクセスする方法を提供します.これにより、ドキュメントの構造、スタイル、コンテンツを変更できます.
  • DOMタイプ
    -コアDOM:すべてのドキュメントタイプのDOMモデル
    -HTMLドキュメントのDOMモデル
    -XML DOM:ドキュメントのDOMモデル
  • 1.Documentオブジェクト


    DocumentオブジェクトはWebページそのものを表します.したがって、DOMに対して実行されるすべての演算は、ドキュメントオブジェクトから開始されます.documentオブジェクトはDOMにアクセスする「アクセスポイント」です.

    2.Documentメソッド


    Documentオブジェクトは、HTML要素に関連する操作を処理するためのさまざまな方法を提供します.
  • HTML要素
  • を選択
  • HTML要素
  • を生成する.
  • HTMLイベントハンドラ
  • を追加
  • HTMLオブジェクトの選択
  • 3.HTML要素の選択


    document.documentElement : document.DocumentElement DOMツリー上部の<html>タグへのアクセス
    -document.head:<head>ラベルアクセス
    -document.body:<body>ラベルアクセスdocument.getElementsByTagName(태그이름):タグ名のすべての要素を選択document.getElementsByName(name속성값):対応するname属性値を持つすべての要素を選択document.getElementById(아이디):アイデンティティ要素の選択document.getElementsByClassName(클래스이름):クラスに属するすべての要素を選択document.querySelectorAll(선택자):選択者としてのすべての要素を選択document.querySelector(선택자):選択者として要素を選択
    注意!getElementByIdのみがElement部分に「s」を付けません.
    これは、ドキュメントに複数のタグやクラスが存在するのに比べて、アイデンティティが1つだけ存在しなければならない要素であるためです.
    -previousElementSibling:前の要素を選択
    -nextElementSibling:次の要素を選択します.
    -parentElement():親要素の選択
    -firstElementChild():最初のサブエレメントを選択
    -lastElementChild():最後のサブエレメントを選択
    getElementsByTagName("*");  // 모든 태그 선택
    
    document.querySelector(".class");  // querySelector로 class 선택
    document.querySelector("#id");  // querySelector로 id 선택
    
    // id가 yellow인 요소를 선택하여 색상 변경하기
    let yellow = document.getElementById('yellow');
    yellow.style.color = 'yellow';

    4.HTML要素の生成

    document.createElement(HTML요소):指定されたHTML要素を生成document.write(텍스트):HTMLによるストリーム出力テキスト

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

    document.getElementById(아이디).onclick = function(){ 실행할 코드 }:マウスクリックイベントに関連付けるイベントハンドラコードを追加

    6.HTMLオブジェクトの選択

    document.doctype HTMLドキュメントのドキュメントタイプ(doctype)を返します.document.documentElement:戻り要素document.head:戻り要素
    は、document.body要素を返します.document.scripts:すべての要素を返します
    は、document.title要素を返します.<code>document.forms</code>:<form>はすべての要素を返します<code>document.images</code>:<img>はすべての要素を返します.<code>document.anchors</code>:name属性を持つすべての<a>要素を返す<code>document.links</code>:href属性を持つ<area>要素と<a>要素を返す<code>document.embeds</code>:<embed>はすべての要素を返します.<code>document.cookie</code> HTMLドキュメントのクッキーを返します<code>document.domain</code>:HTMLドキュメントが存在するサーバのドメイン名(ドメイン名)を返します.<code>document.URL</code> HTMLドキュメントの完全なURLアドレスを返します<code>document.baseURI</code> HTMLドキュメントの絶対ベースURIを返します.<code>document.documentURI</code>:HTMLドキュメントのURIを返す<code>document.referrer</code>にリンクされたドキュメントのURIを返します.<code>document.documentMode</code>:Webブラウザが使用しているモードを返します.<code>document.implementation</code>:HTML DOM実装に戻る<code>document.inputEncoding</code>:HTMLドキュメントの文字コード(文字セット)フォーマットを返す<code>document.lastModified</code>:HTMLドキュメントの最終更新日時を返す<code>document.readyState</code>:HTMLドキュメントのロード状態(ロード状態)を返す<code>document.strictErrorChecking</code>:エラーを強制的にチェックするかどうかを返します.<br>参考資料<br>🔗 <a href="http://www.tcpschool.com/javascript/js_dom_concept" rel="noreferrer noopener nofollow">TCP School</a> <br>🔗 <a href="https://ko.javascript.info/dom-nodes" rel="noreferrer noopener nofollow">javascript.info</a> <br>🔗 <a href="https://velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80" rel="noreferrer noopener nofollow">DOM이란 무엇인가?</a></disable_script><div class="container-fluid p-0"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3219747971601011" crossorigin="anonymous"></script> <!-- jpdebug-blog-source-div --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3219747971601011" data-ad-slot="3872614099" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="source-div row mt-4 pt-2"> <div class=""> <div class="alert alert-light col-12 " role="alert" style="background-color:#f2f2f2;"> <h5 class="text-dark">Reference</h5> この問題について([JavaScript] DOM), 我々は、より多くの情報をここで見つけました<a href="https://velog.io/@kim_unknown_/JavaScript-DOM" rel="noreferrer noopener nofollow" class=" h4 text-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"> <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path> <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path> </svg> https://velog.io/@kim_unknown_/JavaScript-DOM </a> <hr> <p class="m-0 p-0 small " style="font-size: 12px;line-height: 1.8;"> テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。</p> <p class="mt-0 m-0" style="line-height: 1.8;"> <small class="" style="font-size: 12px;"> Collection and Share based on the CC Protocol</small> </p> </div> </div> </div> </div> <div class="row mb-4 pt-4 pb-4"><div class="col-6 text-primary "> <a class=" btn btn-outline-dark small float-left " href="/p/3367109"> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"> <line x1="19" y1="12" x2="5" y2="12"></line> <polyline points="12 19 5 12 12 5"></polyline> </svg> rValue, lValue</a> </div><div class="col-6 text-primary "> <a class=" btn btn-outline-dark small float-right " href="/p/3367111">[Java]伯俊1158号 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </a> </div></div> </article> </div> <!-- end row --> </div> <!-- end card-body --> </div> <!-- end card --> </div> <!-- end chat area--> <!-- start user detail --> <div class="col-12 col-xxl-3 col-xl-3 "> <div class="card sticky-top" style="top: 20px;"> <div class="row"> <aside class="col-md-12 col-xxl-12 d-none d-md-block pt-0"> <div class="sticky"> <div class="container-fluid p-0 m-0 bg-light-off "> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3219747971601011" crossorigin="anonymous"></script> <!-- jpdebug-right-top-1 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-3219747971601011" data-ad-slot="1251860546"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </aside> </div> <div class="card-body"> <div class="row "> <aside class="col-md-12 col-xxl-12 d-none d-md-block pt-3"> <div class="sticky"><ul id="toc" class="nav flex-column toc overflow-scroll"> <h4 class="nav-link h4 relate_nav_title text-dark" disabled>関連内容</h4><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3501690">必要最低限のTypeScriptプロジェクトをCLIで作成する</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3501464">JavaScriptのコードをCleanに書く7つのTips</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3501416">配列・オブジェクトからリテラル型を生成する</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3501366">TypeScriptモジュールのまとめ方</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3501011">Next.jsでフォームの値を復元するには</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3500776">配列をプリミティブ型で操作する</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3500735">【メモ】JSの非同期処理について学んだことまとめ</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3500734">次世代のReact? Solid.jsについて</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3500704">JavaScriptで使える都道府県のテンプレート</a> </li><li class="nav-item"> <a data-scroll class="nav-link text-black-50" href="/p/3444281">GitHubにプッシュして草を生やすチュートリアル</a> </li></ul><!-- <div class="container-fluid p-0">--> <!-- <script async--> <!-- src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3219747971601011"--> <!-- crossorigin="anonymous"></script>--> <!-- <!– jpdebug-post-right –>--> <!-- <ins class="adsbygoogle"--> <!-- style="display:block"--> <!-- data-ad-client="ca-pub-3219747971601011"--> <!-- data-ad-slot="8535334719"--> <!-- data-ad-format="auto"--> <!-- data-full-width-responsive="true"></ins>--> <!-- <script>--> <!-- (adsbygoogle = window.adsbygoogle || []).push({});--> <!-- </script>--> <!-- </div>--> </div> </aside> </div> </div> <!-- end card-body --> </div> <!-- end card--> </div> <!-- end col --> <!-- end user detail --> </div> </div><!-- footer --> <footer class="bg-light p-3 mt-5"> <div class="container"> <div class="row gutter-3"> <div class="col-12 col-md-12 text-white text-center text-lowercase"> <p class="mb-0 text-black-50 small text-lowercase">©2022 jpdebug.com. All Rights Reserved. | <a href="/privacy" target="_blank" class="text-dark" rel="nofollow">Privacy Policy</a> | <a href="/contact_us" target="_blank" class="text-dark" rel="nofollow">Contact US</a> | <a href="/sitemap.xml" target="_blank" class="text-dark" rel="nofollow">Sitemap</a></p> </div> </div> </div> </footer> <!-- / footer --> <!-- Bootstrap 4 Version --> <div class="nk-cookie-banner alert alert-secondary text-center mb-0 small" role="alert" style="background: rgba(255, 255, 255, .6);border-color:#f2f2f2;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(20px);"> 🍪このウェブサイトは、あなたが我々のウェブサイトで最高の経験を得ることを確実とするために、クッキーを使います。 <a href="/privacy" target="blank" rel="nofollow">プライバシー条項の表示</a> <button type="button" class="btn btn-primary btn-sm ml-3 shadow-none" onclick="window.nk_hideCookieBanner()"> 同意します </button> </div><!-- JS Global Compulsory hs-builder:build-delete --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script> <script src="/static/all_theme_package/quick-website.min.js"></script> <script src="/static/all_theme_package/cookie-banner.js"></script><script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d95bbf01f0dd90da512ecedf1d9661bd"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script async src="//static.getclicky.com/101379076.js"></script> <!--<script>--> <!-- $(document).ready(function () {--> <!-- $("pre").addClass("language-none");--> <!-- });--> <!--</script>--> <script src="/static/all_theme_package/auto-enable-prism.js"></script> <script src="/static/all_theme_package/prism.min.js"></script></body> </html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="2c70a29ac0da66a2e451ea54-|49" defer></script>