Udemy section 12 (35일) - DOM 요소 삭제

 

1. DOM 요소 삭제 하기 , 기존요소 이동하기.

   - 두가지의 방법이 있는데, older browser에 적용 가능한 더 safer한 방법은 가장 하단줄을 참고!

   - 기존 요소 이동은 append 혹은 insert를 통해서 가능함!

 

   - innerHTML의 모든 내용을 접근할수 있게 해줌! textcontent와는 조금 다름!

      innerHTML 안에서 줄바꿈은 안됨! +를 이용해서 줄바꿈을 적용할수는 있긴하지만...

 

//REMOVE ELEMENTS

//1. Select the element that should be removed.

let firstH1Element = document.querySelector('h1');


//2  Remove it !

firstH1Element.remove(); // 혹은 아래 
// firstH1Element.parentElement.removeChild(firstH1Element);  //safer way for older browser.

// MOVER ELEMENTS

firstParagraph.parentElement.append(firstParagraph)


// innerHTML

firstParagraph.innerHTML = 'Hi This is <strong>important!</strong>';

 

(참고)

console.log(firstParagraph.textContent)

   ㄴ text 만 노출됨

console.log(firstParagraph.innerHTML)

   ㄴ html 요소를 모두 포함하고 있음

 

2. 이벤트리스너 소개 !

 

사용자가 클릭하거나 스크롤을 하거나 등등 다양한 이벤트에 이벤트를 리슨 할수 있!

 -> 자바스크립트 가능함!

let paragraphElement = document.querySelector('p')
// let paragraphElement = document.querySelector('p')   // 윗줄과 같은 의미 p 를 가지고 옴

function changeParagraphText(){
  paragraphElement.textContent = 'Clicked!';
  console.log('Paragraph click!') // 이벤트리스너는 한번만 바뀌는게 아님!
}

paragraphElement.addEventListener('click', changeParagraphText);

// 요소에 이벤트 리스너를 추가하는데, 브라우저가 할일을 브라우저에 명령해주기에 메서드이다!
// 매개변수는 함수를 가르키고 있어야함!
// changeParagraph에 ()<-를 추가하면 함수가 바로 실행됨!

 

3, 사용자 입력 이벤트 소개 

 

let inputElement = document.querySelector('input');

function retrieveUserInput(){
  let enteredText = inputElement.value;
  console.log(enteredText)
}

inputElement.addEventListener('input', retrieveUserInput);

 

4. 이벤트를 묘사하는 객체 

 

이벤트를 처리할때 브라우저는 함수에 전달된 특정 매개변수를 자동으로 제공해준다! 그럼 해방이벤트가 발생할떄때 실행하도록 브라우저에 지시함! 그래서 이벤트에 연결할 계획인 함수에서 모든이베느에 대해 브라우저가 자동으로 전달되는 특정 매개 변수를 사용 할수 있다! 그래서 어떤 이벤트를 리슨하고있는지 상관이 없게되는게 이게 바로 발생하는 이벤트를 묘사하는 객체임!

 

function retrieveUserInput(event){
  // let enteredText = inputElement.value; // 연결된 값이 찍힘!
  let enteredText = event.target.value; // 연결된 값이 찍힘! 외부함수를 쓰지 않아도 됨!
  // let enteredText = event.data;  // 't', 'e' 값이 각각 찍힘
  console.log(enteredText)
  // console.log(event) // 이벤트가 발생한것을 설명함 
}

inputElement.addEventListener('input', retrieveUserInput);