[12.10] TIL

今日はDOM要素についてもっと深く理解しました.
DOMはウェブページ(HTML)とプログラミング言語をつなぐ架け橋です.
DOMでHTML要素にアクセスする方法は次のとおりです.

getElementByID-id名、

へアクセス

getElementsByTagName-タグによる

へのアクセス

getElementsByClassName-クラス名アクセス

querySelector-CSS構文を使用したセレクタは

にアクセスします.

querySelector All-この名前の選択プログラム

をすべて選択

addEventListener

イベントの流れを簡単に説明するには、次のようにします.

には、ウィンドウオブジェクト、ドキュメント、bodyシーケンスDOMツリーがあり、スクリーンショットが行われます.

は、ボデンイベントリスナーを実行します.

キャプチャが完了したら、DOMツリーに沿って上へ、すべてのbundlingイベントリスナーを実行します.
*泡は泡のように積み上げられています->アクティブbubblingフェーズ

は、このようにイベントを順次実行することをイベント伝播(event propagation)と呼ぶ.

addEventListerの使い方は以下の通りです.

const button = document.querySelector("button");

button.addEventListener('click', function(){
	console.log("hello world");
})


// 클래스 생성, 제거 가능 
myBtn.addEventListener('click', function(){

// blue 라는 클래스의 속성 값 추가 
	myBtn.classList.add("blue");
  
//이외 remove, toggle(있으면 없어지고, 없으면 생기는), contains(해당 속성있는지 확인) 사용 가능하다. 

ナビゲーションノード

ここで,ノードはDOMの様々な要素とコンテンツを意味する.
以下に示すように、appleという要素のノードを検索します.

// 제코베 예제 참고 
const apple = document.querySelector(".apple");
console.log(apple.firstElementChild);  // 첫번째 자식을 찾습니다.
console.log(apple.lastElementChild);   // 마지막 자식을 찾습니다.
console.log(apple.nextElementSibling); // 다음 형제요소를 찾습니다.
console.log(apple.previousSibling);    // 이전 형제요소를 찾습니다.
console.log(apple.children);           // 모든 직계자식을 찾습니다.
console.log(apple.parentElement);      // 부모 요소를 찾습니다.

target

targetは、イベントが発生した震源の情報を表示します.

<article class="parent">
    <ol>
        <li><button class="btn-first" type="button">버튼1</button></li>
        <li><button type="button">버튼2</button></li>
        <li><button type="button">버튼3</button></li>
    </ol>
</article>

<script>
    const parent = document.querySelector('.parent');
    parent.addEventListener('click', function (event) {
        console.log(event.target);
  		//버튼1을 눌렀을 때 버튼1에 대한 정보를 반환해준다 
        console.log(event.currentTarget);
  		//버튼1의 부모인 parent의 정보를 반환해준다
    })
</script>

上のコードを実行してボタン2を押すと、targetにボタン2に関する情報が表示されます.
CurrentTargetは、ボタン2が属する親クラス名「parent」の情報を返す.こうして見つけられたのは、イベントの特徴のおかげです.

委任イベント

これらのイベントフローにより、イベントリスナーのない要素もイベントのようになります.これを「委任活動」といいます.

<article class="parent">
        <ol>
            <li><button class="btn-first" type="button">버튼1</button></li>
            <li><button type="button">버튼2</button></li>
            <li><button type="button">버튼3</button></li>
        </ol>
    </article>

    <script>
        const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event) {
            console.log(event.target);
      		//nodeName은 대문자로 표기해야함
            if (event.target.nodeName === "BUTTON") {
      		//버튼의 텍스트를 '버튼4'로 변경해줌
                event.target.innerText = "버튼4";
            }
        })
    </script>

コードを実行してボタンを押すと、これらのボタンのテキストが「ボタン4」に変更されます.

イベントのthis

const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event){
            console.log(this);
        })

// 화살표함수의 this는 상위스코프(부모스코프)를 표시한다 
const parent = document.querySelector('.parent');
        parent.addEventListener('click', (event) => {
            console.log(this);
        })

TDD

TDDはテストドライバ開発の略です!つまり、テストウィークも開発です.
今日習ったのはUnit Testです.これは、関数が正常に動作しているかどうかを確認します.
カリキュラムではジャスミンを用いてテストを行った.
来週も操作を続ける予定です.