[JavaScript] DOM

5193 ワード

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>  <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>  </div>  </div>  </div>   <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>  <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> </aside> </div> </div>  </div>  </div>   </div> </div> <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>   <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> <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 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="8c11035dfa445e009c389ea2-|49" defer></script>