- 앨리먼트를 HTML과 CSS말고 객체 형태로 볼 수 있는 방법은 console창에
console.dir($0)
으로 조회할 수 있다.
$0
표시가 생긴다. 그 상태에서 콘솔창에 console.dir($0)
을 넣어서 조회하면 객체처럼 많은 내용들이 출력된다.
- 중요한 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
innerHTML
$0.textContent = '내용이 바뀌었어요'; //"내용이 바뀌었어요 $0.innerHTML = '<a href="http://naver.com">네이버</a>' // 네이버 //네이버가 네이버주소로 링크가 걸리는걸 볼 수 있다.
$0.textContent ='<a href="http://naver.com">네이버</a>' // <a href="http://naver.com">네이버</a>
7 value
: form 입력 값
//HTML
<input type="text" class="PhoneNumber" placeholder="폰 번호를 작성 하시오">
$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