今日は何を手に入れましたか?

今日は日曜日です.勉強する時間は楽しい時間です.

const element = document.getElementById('one');

element.className = 'blue';

それ自体が楽しい!!IDをくれたelementをclassに変えるなんて!いいですね.分かったら行きましょう.
JavaScriptの関数はオブジェクトです.オブジェクトにpropertyを持たせることができます.

function 주체(name, home, age){
  this.name = name;
  this.home = home;
  this.age = age;
}

주체.prototype.sum = function(){}

let kim = new 주체('kim', true, 20)
let lee = new 주체('lee', false, 10)
console.log(kim.name)

ボディという名前のオブジェクトを作成すると、ボディsプロトタイプという名前のオブジェクトが作成され、相互に関連付けられます(すなわち、関連付けられます).関連付けの方法は、生成されたオブジェクト(マスター関数)にプロトタイプと呼ばれるproperty(属性)を生成し、このpropertyの内部でマスターs prototypeという関数を参照することである.逆に、マスターs prototype関数には、初期に作成された関数(オブジェクト)に関連付けられたアドレスを参照するconstructor(ジェネレータ)というpropertyが作成されます.

私は書いて理解しましたが、複雑すぎて、私の書いた文章は今度理解すれば成功します.
学習の過程で、流行に合わないが、このようなものもあることに気づいた.これは理解するだけで過ぎ去るべきだ.
基礎的なDOM操作をもう少し勉強します.

addEventListener

window.onload = function() {
  let title = documnet.getElementById('main-ttile');
  console.log(title);
}
/*이런 방법보다는 최신의 방법으로 적으면 (DOMContentLoaded 를 onload로 해도된다.
로드는 전부다 로드가 될때까지 기다리고 있다가 로드가 다 되면 함수를 실행한다. 
하지만 DOMContentLoaded는 DOM의 컨텐트가 로드가 다 될때까지만 기다린다. 
element 안의 이미지나 데이터를 다 불러오기 전에 함수를 실행.*/

window.addEventListener('DOMContentLoaded', function() {
  let title = document.getElementById('main-title');
  console.log(title);
}/*, false 기본값이 false이기때문에 안 넣어도 됨*/);
//아 그리고.. script 링크가 가 body의 아래에 있다면 저런거 다 안 적어도 된다.
//그냥 아래처럼 적으면 끝난다. 왜냐면 위에서 이미 load가 다 끝났을테니까.
let title = document.getElementById('main-title');
console.log(title);

だからtitleにscriptを追加しないで、bodyの一番下に貼ります~!
分かりますが、再度確認します.
JavaScriptで作成したSPA*は適用されません.それ自体がシナリオだから
SPA = single page application
うん、もう一度やってみよう.

let title = document.getElementById('main-title');
let titleSpan = title.getElementsByTagName('span')
console.log(titleSpan[0]);
/* titleSpan에서 method를 보면 get elements by tag name 여기서 elements라고
되어있다. 이 이유는 id처럼 하나만 지정하는게 아니기 때문에 tag가 여러개일수도 있기때문.
그리고 이렇게 불러오면 titleSpan은 유사배열이라고하는 배열형태의 값이 나온다.
유사배열이기 때문에 배열안의 값을 index 값으로 불러오는것처럼 [index number]로
불러올 수 있다.*/

純javascriptバニラjavascript
jqueryの依存性は低下している.

querySelector

let mainTitle = document.querySelctor('#main-title');
console.log(mailTitle);
// querySelctor는 id 는 # class는 . 으로 CSS처럼 불러올 수 있기때문에 더 강력하다.
// jquery 같은 느낌이지만 순수 Js라 좀 더 길다. 하지만 조건에 맞는 값 하나만 리턴.
let subTitle = document.querySelctorAll('.subTitle');//All이 붙었다
console.log(subTitle); //return 유사배열. 조건에 맞는 값 모두 리턴.
for (let i = 0; i < subTitle.length; i++) {
  subTitle[i].style.border = '1px solid red';
} // jquery 보다 번거롭지만(jquery는 for문 안써도 됨) 이렇게 가능하다.

//a tag안에 링크 가져오기
let link = document.querySelector('subTitle a');
console.log(link.getAttribute('href'));
//만약에 클래스 이름도 불러오려면 
console.log(link.getAttribute('class'));
//가져와봤으니 setting도 해보자.
link.setAttribute('href', 'https://velog.io/@ckddhks59');
console.log(link.getAttribute('href'));
//내 velog주소가 담겨있는것을 확인.

ではclassとidもリセットできますよね?ok!
getAttributeはreturn値を持つ関数ですか?yes! これでコンソールウィンドウが撮れます
getを加える方法の大部分はreturn値があります
setは設定されます動作を設定すること自体が戻り値です...pass~
今classを入れましょう

link.className = 'special';
//기존에 class가 있다면 사라진다. className 속성의 값을 바꾼것이기때문.
//만약 원래 있던 클래스는 내버려두고 special이라는 클래스만 추가하고싶으면?
link.classList.add('special'); // 요래하면 된다. 긋~!

// 삭제도 해보자
setTimeout(function(){
  link.classList.remove('other-class');
}, 2000); // 그냥 삭제하면 심심하니 타이머 함수를 사용해봤다. 2초 뒤에 작동함.