16日目TIL

10563 ワード
DOM Today I learned テキストリンク

開始します。


今日から、毎日2つの問題のjavascript符号化問題が追加されました.既存のコードテストサイトは多くの問題を解決しており、現在は難易度が低く、時間内に通過することができます.JavaScriptをたゆまず勉強し、より高いレベルに達するように努力しなければならない.今日は初めてのDOMですが、他の章と同じように、新しい概念を学ぶときは慣れるまで努力する必要があります.DOMの基本概念、動作原理、必要性は理解していますが、APIにはあまり詳しくないので、実際に使うときは熟知しています.

DOM


定義＃テイギ＃
DOMはDocument Object Modelの略で、JavaScriptオブジェクトを扱うようにHTML要素を操作できるモデルです.HTMLは、JavaScriptのオブジェクトと同じ構造を持つため、親要素が1つしかなく、子要素が複数あることができます.オブジェクトとして表すことができます.これらのDOMでは、JavaScriptを使用してHTMLの要素を追加、変更、または削除できます.
挿入位置
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </body>
</html>
WebブラウザがHTMLファイルの解析中にscriptに遭遇すると、HTMLの解析を停止してscriptを最初に実行するため、後続のHTML要素はjavascriptにロードできません.したがって、body tag内の最後の部分に位置することが望ましい.
上記のドキュメントのコンソールウィンドウでconsoleを選択します.dir(document.body)を入力すると、数十種類の鍵がクエリーされていることを確認できます.ページに表示されている内容はHelloJavaScript!キーもnull値で出力されます.htmlの要素を変更する場合は、JavaScriptでHTMLを変更するには、DOMで作成したオブジェクトのキーと値の場所、およびそれらにアクセスする方法を理解する必要があります.

CRUD(CREATE, READ, UPDATE, DELETE)


DOMでHTMLの要素を変更するには、要素を作成、クエリー、更新、削除できるコマンドを理解する必要があります.次の命令語に加えて,混同しやすい概念とよく用いられる命令語を学習する.
Create
const oneDiv = document.createElement('div')
oneDivという名前の変数をcreateElement(「div」)で作成して割り当てます.これは空のラベルなので、ページには表示されませんが、必要な場所や内容に変更できます.
document.body.append(oneDiv)
生成したdivはappendという方法でbodyに入れることができる.
Read
document.querySelector('#msg')
querySelectorを使用すると、HTML内の任意の要素をオブジェクトとしてロードできます.これは類似の配列または配列型宿屋と呼ばれ、正式な名前はArray-like Objectです.idを表します.同じ名前のidはないので問題ありませんが、classまたはtagを使用して要素をロードする場合、querySelectorは最初の要素のみをインポートします.該当する要素をすべて読み込む場合は、querySelector Allメソッドを使用する必要があります.
Update
oneDiv.textContent = 'dev';
oneDiv.classList.add('one');
document.querySelector('#msg').append(oneDiv)
新しく挿入したdivでtextContentを使用してtextを変更し、classListでclassのプロパティを追加します.設計は通常CSSでclassまたはtag単位で適用されるため、このコマンドを使用して同じ場所classの要素と同じ設計を適用します.
その後再びappendをmsgのサブエレメントとして入れます.
Delete
oneDiv.remove()
上記の方法で示すように、対応する要素にremoveを使用して削除します.ただし、エレメントではなくエレメントのすべてのサブエレメントを削除する場合は、次の例のように重複文とremoveChildを使用できます.
const msg = document.querySelector('#msg');
while (msg.firstChild) {
  msg.removeChild(container.firstChild);
}
removeChildは最初のサブアイテムのみを削除する方法なのでmsg.すべての要素は、firstChildがfalse、すなわちサブ要素がすべて消えるまで削除を繰り返すことができます.
似たような配列であるため,重複文を用いて多様な方法で削除することができる.
const msg = document.querySelector('#msg');
while (msg.children.length > 1) {
  msg.removeChild(container.lastChild);
}
LastChildを使用する場合は、最初のサブセグメントのみが保持され、すべて削除されます.
const one = document.querySelectorAll('.one')
one.forEach(function(el){
    el.remove();
})
// or
for (let el of one){
    el.remove()
}
class oneという名前の要素のみを検索して削除します

課題



学んだ内容に基づいて,アイデンティティとパスワードの検証が可能な木業ページを作成した.入力するたびに実行されるonekeyupというコマンドとクラス名を変更することで、CSSで指定したdisplay:noneプロパティを使用してページを整理できます.これにより、タスクの実行時にDOMが何であるかを理解できます.
【Sqlserver】バックアップとログバックアップに基づくリストアテスト
TIL54 - json.loads/json.load