DevLog__[DOM & CRUD]

4951 ワード
DOM テキストリンク

# Intro


省略

# html & css


DOM! Document Object Model. ドキュメントのオブジェクト構造を縮小!何を言っているのか分からず、鼻の穴さえ聞き取れなかった!実は私は何を言って、重要なのはこれを持って何をすることができます!徹底した工科学生の考え...ハハ...君を褒める.
DOMは複数の優れたWeb開発者が集まって徹底的に分析して準備した構造で、HTMLにアクセスできる非常に小さな部分です.したがって,DOMを用いてhtmlを構成するノードの情報を抽出して修正することができる.ははは.
何の意味かまだ分からないに違いない.例を挙げてログイン!
ボックスに
  • idとパスワードをそれぞれ入力し、ログインボタンを押します.
  • ボックスに入力されたidとパスワードを収集します.
  • サーバを使用して、データベースにIDが登録されているかどうかを確認し、登録されている場合はパスワードが正しいことを確認します.
  • idとパスワードに関する情報がある場合はログインに失敗し、ない場合はログインに失敗します.
    • ここでDOMのキャラクターは1番と2番、3番と4番はまだ勉強していない内容ですが、見逃しましょう!
    正確には、DOMの仕事は「htmlで作成されたボックスからidとpasswordを取得する」ことです.この動作を許可するのは、ログインボタンが押された場合にのみイベントハンドラです.そのため,フロントで基本的な機能を実現するためには,DOMとイベントハンドラを理解し,それらを習得する必要があると考えられる.
    何を学んでもこれが何に使われているかを知る必要があります.今日の緒論はしびれている.次に、HTMLにアクセスして情報を削除できるDOMのコマンドを見てみましょう.
    斑点🤟

    1. CRUD


    CRUDとは、ほとんどのコンピュータソフトウェアが持つ基本的なデータ処理機能です.作成、読み取り、更新、削除です.ユーザインタフェースが備えるべき機能(情報の参照/取得/更新)としても用いることができる.
    以下はDOMで使用するCRUDコマンドです.
    Create
  • createElement():カッコに入力したタグを文字列に返します.
    • document.createElement(‘div’);   <!-- OUTPUT : <div></div>   -->
  • append():最後に括弧内入力ノードとしてサブノードを追加します.
    • const tweetDiv = document.createElement(‘div’);
document.body.append(tweetDiv);  <!-- body의 자식 노드로 tweetDiv가 추가됨 -->
    Read
  • カッコの値とid、class、tag名は同じ要素ノードを返します.
  • querySelector():カッコに入力された値のタイプ#に基づいて、点.
  • querySelector All():querySelectorと同じです.
  • getElementById():querySelectorとは反対に#,粘着しない.
  • getElementByTagName():getElementByIdと同じです.
  • getElementByClassName():getElementByIdと同じです.
    • <!-- <div class="tweet">hello</div> -->
<!-- <body id="container">...생략....</body> -->
const oneTweet = document.querySelector(‘.tweet’);
const tweets = document.querySelectorAll(‘.tweet’);
<!-- ------------------------------------------------ -->
const getOneTweet = document.getElementById(‘’container’);
const queryOneTweet = document.querySelector(‘#container’);
console.log(getOneTweet === queryOneTweet);                <!-- true -->
<!-- 이제 container의 자식으로 divfmf 추가할 수 있다. -->
const container = document.querySelector(‘#container’);
const tweetDiv = document.createElement(‘div’);
container.append(tweetDiv);
    Update
  • className():ノードにclassを割り当てます.
    • 'Node'.className = 'className';
  • classList.add():ノードにclassを割り当てます.(classNameとは異なり、複数追加可能)
    • 'Node'.classList.add('className');
  • textContent():ノードにテキストを割り当てます.
    • 'Node'.textContent = 'hello world'
  • setAttribute(attribute,value):指定した属性に値を割り当てます.
    • 'Node'.setAttribute('id', value);
  • Ex 
    • const oneDiv = document.createElement(‘div’)
console.log(oneDiv)             <!--         <div></div>        -->
oneDiv.textContent = ‘dev’;
console.log(oneDiv)             <!--      <div>dev</div>        -->
oneDiv.classList.add(’tweet’)
console.log(oneDiv)             <!-- <div class=‘tweet’></div>  -->
    Delete
  • remove():メソッドを使用して自分のノードを削除します.
    • '노드'.remove()
  • removeChild():カッコに入力されたサブノードを削除します.
    • '노드'.removeChild('자식노드')

    2.イベントハンドラ（Event Handler）

  • イベントハンドラは、特定の状況(イベント)を処理する際に何らかの行為をさせる方法である.
  • addEventListener(特定の場合、関数)
    • '노드'.addEventListener('click', '함수')
  • addEventListener()特定の状況が発生したときに何をするか、注意して聞いてください!言うに等しい.
    • 次のコードはhtml内の各コンテンツにイベントハンドラを設定します.

    # Work Off


    ツイッターのクローンコードの過程で、フロントの開発を少し体験しました.本当に軽いです.先端開発者は設計に関する知識と感覚を持つべきだと考えている.このような開発者は何人いますか...?ちょっと気になってかっこいいデザインを学ぶフロントエンド開発者...芸術家のようにもおしゃれに見えます.錯覚ですか.ははは
    今私はまだ未来何をするか分かりません.私はフロントエンドとバックエンドの2つの分野で経験を積んでいません.私の今の明日はどうなるか分かりません.ははは….
    でもフロントで開発されたものは直感的なものがあって、確かに面白かったです.アップルのサイトに入るとスクロールして動画のようにページを閲覧しますか?感じがして、私も一度はそうしたいです.とてもかっこいいです.私はやはり表面的なのが好きで、かっこいいです.ああ...関种ですか...大丈夫です.私の好きなことをすればいい!きょうもそれほど悪くないぜひ見てね~👋

    基本的にしっかりした開発者になるまで。🔥🔥🔥

    更新後にDjango管理者にログインできませんでした:エラーを与えてください(403)CSRF検証は失敗しました.リクエストが中止されました.
    TailWindCSS V 3から始める0反応中