[JS][HTML] DOM

17228 ワード
TIL JavaScript html テキストリンク

DOM?


Document Object Modelの略で、HTML要素はJSのObjectのように操作できます.DOMにより、簡単なドキュメントからWebアプリケーションにHTMLをアップグレードできます.

JavaScriptをHTMLに適用する


MyScriptFileはHTMLと同じディレクトリにあります.jsのコードをロード
<script src="myScriptFile.js"></script>
<script>要素はHTML解析を一時停止し、登場とともに実行します.

<script>タグを追加する2つの典型的な方法


myScriptFile.jsは以下のように記述されている.
let msgElement = document.querySelector("#msg");
console.log(msgElement);
<head>の内側に挿入
  <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="myScriptFile.js"></script>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
  </body>
</html>
下部のドキュメントは分割されず、コンソール出力null.
終了前に<body>タグを挿入
  <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    <script src="myScriptFile.js"></script>
  </body>
</html>
<scipt>タグ前のドキュメントをグループ化して実行し、コンソールは<div id="msg">Hello JavaScript!</div>を出力します.
JavaScriptでは、別名にアクセスするにはパーティション化する必要があります.<scipt>を上部に配置すると、ページのロード速度が増加します.必要なときだけ手配しましょう.
上部に<scipt>と書き、すべてのエンティティの実行後に実行する方法
  • ドキュメントのロードイベントのコールバック関数で登録します.
  • scriptにasyncまたはdeferプロパティを追加し、scriptの実行とドキュメントのロードを同期させます.

    • 別名の検索


    子別名の検索

    console.dirを使用します.オブジェクトを問い合わせることができます.

    ダイレクトクエリdocument.태그명.children

    親別名の検索

    노드.parentNodeを使用します.
    <html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu">menu</div>
        <div class="menu">menu</div>
        <div class="menu">menu</div>
        <div class="profile-photo">photo</div>
      </div>
    <div id="footer">footer</div>
  </body>
</html>
    idがnavの要素の親要素を検索
    let nav = document.getElementById('nav')
nav.parentNode

    DOMによるHTML処理


    どんな種類の開発やコンピュータ言語を学ぶには、まずCRUD(Create、Read、Update、Delete)に集中します.

    Create


    createElement()

    document.createElement('div')->divラベルの作成
    const tweetDiv = document.createElement('div')
    tweetDiv変数への割当て

    Append


    append()

    document.body.append(tweetDiv)
    body elymansにtweetDivをアタッチする

    Read


    HTMLラベル、id、classの3種類が最もよく使われています.

    querySelector()

    const oneTweet = document.querySelector('.tweet')
    tweetでclassNameの最初の別名を受信

    querySelectorAll()

    const tweets = document.querySelectorAll('.tweet')
    ClassNameは、tweetとして同様のアレイ(Array-like Object)のテキストを受信します.

    Update


    textcontent

    tweetDiv.textContent = 'tweet!'
    <div>tweet!</div>タグに文字列を入力

    classList.add()

    tweetDiv.classList.add('tweet')
    <div class="tweet">tweet!</div>tweetクラスが追加されました

    setAttribute()

    tweetDiv.setAttribue('class', 'tweet')
    <div class="tweet">tweet!</div>tweetクラスが追加されました

    Delete


    remove()

    tweetdiv.remove()
    エンティティを削除しました

    removeChild()

    container.removeChild(container.firstChild)
    containerの最初のサブセグメントが削除されました
    container.removeChild(container.lastChild)
    コンテナの最後のサブセグメントが削除されました
    私はforeachメソッドや繰り返し文で私の考えているすべての要素を見つけて、それらを削除するしかありません.
    WinFormはPUSHモードのレポート機能を実現
    Django勝賢3チーム