第4週コード状態/DOM

16807 ワード
ハーモニー テキストリンク

✏️Achievement Goals


89 DOMの概念が理解できる.
COMの構造を理解し、HTMLとDOMの類似性を理解する.
JavaScriptアクション89 DOMを使用して、HTML要素を追加、削除、または変更できます.

📝summary

DOMドキュメントオブジェクトモデルの略.
htmlドキュメントの構造と関係をオブジェクト(object)で表すモデル

🤯だからドームってなに???


JAvascriptはHTML操作に特化した言語です
HTML操作を行うために、
作成対象資料型が必要
<div id="practice" class="red">안녕하세요</div>
HTMLファイルにdivタグがある場合はJavaScriptに変更できます
このとき、コンピュータはdivをオブジェクト(Object)としてJavaScriptを使用してdivを操作します.
資料型にまとめる.
var document = {
	div태그 : {
    	id : {practice}
        style : {color : "red"}
        innerHTML : "안녕하세요"
    }
}
上記のコードと同様に、必要な資料をインポートして変更するには、オブジェクト形式の資料の中で整理する必要があります.これがDOMです.
このようにhtmlドキュメントをJavaScriptで使用可能としてマークするオブジェクト(Object)をDOMと呼ぶ
DOM JavaScriptを使用して要素の属性を取得または変更する

📚DOMによるHTML処理


ブラウザでは、DOMツリーの検索と操作を支援するさまざまな方法(DOM API)が用意されています.
いろいろな方法を学びましょう.

1.新しい装飾を作る


活用するために、変数に割り当てるといいです
const newEl = document.createElement('div')
console.log(newEl) // <div></div>

2.文字列の入力

newEl.textContent = '문자열 입력은 textContent'
console.log(newEl) // <div>문자열 입력은 textContent<div>

3.クラスの追加

newEl.classList.add('red')
console.log(newEl) // <div class = 'red'>문자열 입력은 textContent<div>

4.別名に追加

document.body.append(newEl)
画面にはまだ要素が見えません
画面に表示したい場合は、appendメソッドを使用してbodyラベルに入れることができます.


このように追加されたページが表示されます
この場合、マスタータグではなく、必要な位置に配置する必要があります.
希望する場所の情報を検索できるようにするには

5.クエリー情報（オブジェクトを返す）

element = document.querySelector(selectors);
// selector의 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 
// 일치하는게 없으면 null을 반환한다
クエリー・セレクタの
[セレクタ](Selector)を最初のパラメータに渡して確認できます.
HTMLタグ("div")、id("#tweetList")、class(.tweet)は最も一般的な3つのコレクターです
  <body>
    <div id="container">
      <h2>Tweet List</h2>
      <div class="tweet">hello</div>
      <div class="tweet">world</div>
      <div class="tweet">code</div>
      <div class="tweet">states</div>
    </div>
  </body>
このようなコードがあれば
querySelector : 선택자가 선택하는 요소의 첫번째 요소를 반환

console.log(document.querySelector(".tweet")) 
// <div class="tweet">hello</div>

querySelectorAll : 모든 요소(NodeList)를 반환

console.log(document.querySelectorAll(".tweet")) 
// NodeList {0: HTMLDivElement, 1: HTMLDivElement, 2: HTMLDivElement, 3: HTMLDivElement, entries: ƒ entries()…}
// 0: <div class="tweet">hello</div>
// 1: <div class="tweet">world</div>
// 2: <div class="tweet">code</div>
// 3: <div class="tweet">states</div>
上のコードにコンテナにdivラベルを追加したい場合は、このように使用できます.
const container = document.querySelector('#container')
container.append(newEl)

6.削除


1)削除するエンティティの場所がわかっている場合

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // append 했던 엘리먼트를 삭제할 수 있다

2）複数の子を削除

document.querySelector('#container').innerHTML = '';
// id가 container인 엘리먼트 아래의 모든 엘리먼트를 지운다
innerHTMLはセキュリティの問題があるので、異なる方法を使用します.
InnerHTMLはサイト間スクリプト攻撃を受けやすいという問題があります.innerHTML属性は文字列自体を変更できるので、ハッカーに<script>タグを使ってJavaScriptコードを作成し、実行させることができます.
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
// removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드이다
// 모든 자식 엘리먼트를 삭제하기 위해, 반복문을 활용할 수 있다
// 자식 엘리먼트가 남아있지 않을 때까지, 
// 첫 번째 자식 엘리먼트를 삭제하는 코드이다

3）不要な部分の消去防止

<h2>Tweet List</h2>というタイトルのh 2ラベルを保持する場合は、
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}
// container의 자식 엘리먼트가 1개만 남을 때까지
// 마지막 자식 엘리먼트를 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

// 직접 클래스 이름이 tweet인 엘리먼트만 찾아서 지우는 방법
BOJ 5719-ほぼ最短パス
Java変換ファイルの符号化を実現