DOM 라이브 강의 정리(9-19)

Blackwidow·2020년 12월 25일
0
  1. 앨리먼트를 HTML과 CSS말고 객체 형태로 볼 수 있는 방법은 console창에 console.dir($0)으로 조회할 수 있다.
  • $0은 해당앨리먼트를 선택하면 Elements탭 html에서 해당 앨리먼트가 선택되면서 오른쪽에 $0표시가 생긴다. 그 상태에서 콘솔창에 console.dir($0)을 넣어서 조회하면 객체처럼 많은 내용들이 출력된다.
  • 조회하면 태그형태, 태그의 class이름, 태그의 id이름, 텍스트, 부모앨리먼트, 자식앨리먼트 등을 조회할 수 있다.
  1. 중요한 DOM객체
<span class="나는 클래스 이름이다" id="나는 아이디 이름이다.">First name</span> == $0

1. tagName : 태그 이름

$0.tagName; // "SPAN"

2. id : 아이디

$0.id; // "나는 아이디 이름이다."

3. className : 클래스 이름

$0.className; // "나는 클래스 이름이다"

4. classList : 클래스 리스트

$0.classList; // DOMTokenList(3) ["나는", "클래스", "이름이다", value: "나는 클래스 이름이다"]

5. attributes : 속성으로 class, id, length 조회

$0.attributes;
// NamedNodeMap {0: class, 1: id, class: class, id: id, length: 2}
$0.attributes[0]; // class
$0.attributes[1]; // id
$0.attributes.length; // 2

6. innerHTML,textContent: 엘리먼트에 담긴 내용, 즉 내용을 할당할 수 있다.

$0.textContent; //"First name"
$0.innerHTML; // "First name"
  • 하나의 앨리먼트 내용을 넣고 싶을때 textContent
  • html통째로 내용을 바꾸고 싶을때 innerHTML
$0.textContent = '내용이 바뀌었어요'; //"내용이 바뀌었어요
$0.innerHTML = '<a href="http://naver.com">네이버</a>' // 네이버
//네이버가 네이버주소로 링크가 걸리는걸 볼 수 있다. 
  • 만약, 태그전체를 넣는데 textContent을 이용하면?
$0.textContent ='<a href="http://naver.com">네이버</a>'
// <a href="http://naver.com">네이버</a>
  • 텍스트 자체만 수정되는것을 알 수 있다.

7 value: form 입력 값

//HTML
<input type="text" class="PhoneNumber" placeholder="폰 번호를 작성 하시오">
  • 위에 창에 010-1234-5678을 입력했다면,
$0.value // "010-1234-5678"

아래 HTML은 자식엘리먼트(element) vs 자식노드(node)를 비교하기 위한 코드이다. (8,9번용)

// HTML
<body>
  <div id="practice" class="highlight red">
    여기 엘리먼트 하나가 있다
    <span>자식도 있다</span>
    <span>자식도 여럿 있다</span>
  </div>
</body>

8. children: 자식엘리먼트

$0.children // span, span 

9. childNodes: 자식 노드

  • 여기 엘리먼트 하나가 있다라는 텍스트만 갖고 오고 싶을때
$0.childNodes;
/*
"\n     여기 엘리먼트 하나가 있다 ,
span,
"\n      ",
span,
"\n      "
*/ 

10. children: 자식 앨리먼트

$0.children; 
// HTMLCollection [i.fa.fa-check-circle]
// 이런식을 나온다.

11. parentElement: 부모 앨리먼트

$0.parentElement;
//<label class="input-form valid">이렇게 나오고 앞에 화살표를 펼치면 부모의 자식엘리먼트 모두 출력된것을 볼 수 있다. 

12. dataset: 데이터를 엘리먼트에 집어넣고 싶을때

13. 이벤트

13-1. 클릭 이벤트

** HTML
<botton>Click Me</botton>

위에 버튼 엘리먼트를 js을 이용해 클릭하면 thank you라고 콘솔창에 띄워주게 할 수 있는 방법 2가지!

** javaScript_1
$0.onclick = function() {
  console.log('thanks you!')
}
** javaScript_2
$0.addEventListener('click', function() {
  console.log('thank you!')
});

13.2 엘리먼트 선택

  • tag 이용 getElementsByTagName
  • id 이용 getElementById
  • class 이용 getElementsByClassName
  • selector 이용 querySelector / querySelectorAll

14. DOM조작(innerHTML,Method)

14-1. innerHTML

  • innerHTML 속성은 읽기 뿐만 아니라, 쓰기도 가능한 속성이다.
  • HTML 태그를 입력할 수도 있다.
  • 가장 쓰기 쉬운 속성이지만, 느리고 보안위협이 있다.(textContent 지향!)

** HTML

<div id="target">변경 전</div>

** JavaScript

let target = document.querySelector('#target');
target.innerHTML = `
  <span>변경 후</span>
`;

** HTML 출력결과

<div id="target">
  <span>변경 후</span>
</div>

14-2. Method

  • 엘리먼트를 만들 수 있는 것이 메소드
  • innerHTML과 비교해서 다소 복잡하다.
  • 메소드를 이용한 엘리먼트 생성은 동시에 이벤트 핸들러 등록이 가능하다.

** HTML

<div id="target">변경 전</div>

** JavaScript

let target = document.querySelector('#target');
let newSpan = document.createElement('SPAN');
//span 엘리먼트를 만듭니다.
newSpan.innerHTML = '변경 후';
target.appendChild(newSpan);
//target 아랫쪽에 newSpan 엘리먼트를 추가합니다.

** HTML 출력결과

<div id="target">
  변경 전
  <span>변경 후</span>
</div>

DOM공부하기 좋은 검색어
vanilla javascript dom manipulation cheat sheet
DOM작성시 이 싸이트를 켜놓고 참고하면 도움이 되겠다.
Vanilla JavaScript Quick Reference / Cheatsheet

profile
javascript 공부하는 sumiindaeyo

0개의 댓글