📂 DOM ( Document Object Model)

WebページのHTMLを階層化し、ツリー構造で作成したオブジェクト(Object)です.
Javascriptでは、このモデルを使用してWebページにアクセスしたり、ページを変更したりできます.
HTMLページとスクリプト言語(Javascript)を接続します.


このような木の構造が形成されています.
階層を表す最も有効な概念はobject(オブジェクト)であるため,この形式である.
アクセス方法もオブジェクトと同じです.(key. value)
主にDotNotationを使用します.短すぎるから

🗃 Document.querySelector

document.querySelector(".link_main");

または、

 document.getElementByClassName("link_main")[0];

このように書くことができます
~中のイメージを探していると、

document.querySelector('.link_main img');

あるいは

const main = document.getElementByClass('link')[0];
main.querySelector('img');

/* 뒤에 배열처럼 인덱스 적는 이유는. 
클래스는 아이디랑 다르게 하나가 아닐 수 있기 때문에 인덱스 안쓰면 배열을 반환함.
 몇번째 클래스를 반환할건지 써줘야함.
 
 (실제로는 배열이 아님. 유사배열 이라고 한다. 나중에 알면 됨)*/

特定の要素に近づく方法にはいろいろあります.
結果は同じかもしれませんが、限られた部分では使用できないことが多いです.
querySelectorに比べてgetElementByを使用して特定のidにアクセスする値は速いが、世界的には諸説ある.
使い切れば分かります.
querySelectorを使用して、

document.querySelector(".link_main img") 이런 식으로 
~ 안의 이미지 이렇게 접근 가능. 
img 에 클래스나 id가 부여 안되어있어도 ~안의 ~ 이렇게도 할 수 있다 .

classとquerySelectorを使うとき

const main = document.getElelmentsByClassName("link_main")[0];

//하고, 

main.queryselector("img")

いいですよ.複雑になれば、このように分けてやる場合もあります.getElementById는 주체가 반드시 document 여야만 한다.IDの有無にかかわらずgetElementByIdはこのように書くことはできません

const logo = document.querySelector(".link_main img"); 

// 해놓고 

logo.style.backgroundColor= "yellow";

하면 됨

 document.body.innerHTML = "내용 다 바꿈"; 
 // 태그 내에 엄청 많은 요소가 있어도 innerHTML  사용하면 내용전부가 교체됨.

let blueElement = document.querySelector('blue');
blueElement.style.backgroundColor = 'blue';

// 이렇게 특정 element 에 접근해서 스타일 수정도 가능

Javascriptでスタイルを変更する場合-使用できません.
Objectのプロパティ名-無効な名前と同じです.
CamelCaseに変えればいいです.createElement(tagName):要素を作成できます.
どこに入るか指定していないので、作成後に要素に追加する必要があります..innerHTML:コンテンツが表示されます.全部新しく書いたもので代用します..appendChild:エレメントの後ろに貼り付け (テキストが聞こえない)

/* getElementByClassName으로 불러온 뒤에.
innerHTML로 내용 바꿔버림
className 으로 클래스 이름 바꿈*/


/*createElement로 각각을 만든 다음,
innerHTML 로 내용 바꾸고
appendChild로 요소 뒤에 붙여준다.*/

🖥 Event

interactionユーザーインタラクション

など多種多様です.全く知る必要はありません.必要だと思ったらグーグルの時
mdneventはこのように検索しても、ほとんど書かれたものしか書かれていません.

addEventListener

イベントを聴いている人

addEventListener関数を特定の要素(呼び出し)に貼り付けます.이벤트 종류および이벤트가 발생했을 때 실행할 함수が因子で伝達される.
言い換えれば이벤트가 발생하면, 두번째 인자로 넘긴 함수가 실행된다.関数はパラメータとして渡すこともできます.
このように因子に伝達される関数をcallback 함수と呼ぶ.
コールバック関数はすぐに実行できません.イベントタイプに応じて(exをクリック).
クリックすると実行を呼び出されます~という意味です
addEventListenerでよく使用されるイベント
- click
- contextmenu
- dblclick
- mousedown
- mouseenter
- mouseleave
- mousemove
- mouseover
- mouseout
- mouseup
- pointerlockchange
- pointerlockerror
- select
- wheel
最もよく使われるのはクリックです
event関数を追加したい場合は、前に学習したDOMを使用します.

const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;

  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;      // !password값이 true이면, 이니까 password값이 false면,
  }
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  
  alert('회원가입 성공!!');
});

returnロールはreturnと종료です
最後に3回使ったら.
if else if else if else
こんなのと全く同じ
returnは関数で関数が終了し、次のステップはできません.
重要なのは、callback関数が終了することです.
(breakで何が起こるかを確認する必要があります)

key event

キーボードを押すときに発生するキーストローク

キーボードを押して押し、キーボードを離すと

キーが表示されます.

キーボードを押すと、任意のテキストを作成するときにポップアップされるボタン

が表示されます.

 const thisIsPw = document.getElementById('password');
 //getElementByClass 할때는 뒤에 [0] 같이 index넣어줬어야했는데,
 //id는 하나라 필요없음
const thisIsCode = document.getElementById('code');

thisIsPw.addEventListener('keydown', function(event) {
  thisIsCode.innerHTML = event.code; 
});
// 키보드로 뭔가 누르면, thisIsCode 에다가 그 뭔가 누른event의 이름정보 값을 추가해라. 

.codeは、入力された鍵の名前情報である.(IE使用.keycode)

thisIsPw.addEventListener('keydown', function(e) {
if (e.code === 'Enter') {
   //로그인 함수로 이동
} 
});
//key down 일어났을때, 그 입력값 e의 코드가 enter 가 맞으면 로그인 함수로 이동해라! 
//  (엔터치면 로그인되게 하는 함수)

ex)
Input#re-passwordにkeyupアクティビティを追加してください.
イベント発生時に実行される関数では、次の機能を作成してください.

const thisIsPw = document.getElementById('password');
const thisIsButton = document.getElementsByClassName('login-btn')[0];
const Repassword = document.getElementById('re-password');

Repassword.addEventListener('keyup', function(){

let PAlert = document.getElementsByClassName('alert')[0];


if( thisIsPw.value === Repassword.value ){

PAlert.innerHTML = " ";
return;
}
PAlert.innerHTML = "비밀번호가 일치하지 않습니다";

});

getElementclassの場合はelements
idはelementのみ