1. Dom의 정의
javascript를 이용해서 엘리먼트의 속성값을 얻어내거나, 변경하는 방법
HTML은 트리 구조를 가지고 있습니다.
객체도 자세히 보면 트리 구조를 가지고 있습니다.
그래서 정리하자면 DOM이란, HTML 엘리먼트를 javascript 이용해서 객체의 형태로 가져올수 있다.
(* 하지만 DOM이 javascript는 아닙니다.)
-> 이렇게 DOM에 대해서 이해를 하면 될 것 같다.
2. 그러면 어떻게 DOM에 접근을 할수 있을까 ?
document라는 전역변수로 접근을 할수 있습니다.
콘솔에 document를 쳐보자
[그림] 객체 형태는 아지만 html 구조가 나타납니다.
객체 형태로 어떻게 볼수 있을까 ?
console.dir(document)
[그림] document가 객체형태로 나온다. 이말인 즉슨 우리가 객체에서 접근하는 방법으로 하나하나 접근이 가능하다는 의미입니다.
[그림] 접근 예시
(* 개발자콘솔 element창에서 볼 수도 있습니다.)
[그림] $0: 내가 클릭한 엘리먼트의 변수의 값으로 지정이 됩니다.
console.dir($0)를 콘솔 창에 쳐봅시다
tagname/ 부모 엘리먼트 / 아이디 속성 이런것이 객체형태로 나오게 됩니다.
3. 알아둬야될 엘리먼트 객체 속성
- classList -> 유사배열 형태로 나온다.
- className -> text 형태로 나온다.
<html>
<li class="comment hello world" id="test"> == $0 
[그림] 조회 결과
-
attributes
[그림] 조회 결과
-
innerHTML : HTML을 통채로 바꾸고 싶을때
-
innerText
-
textContent :하나의 단일 엘레먼트에다 내용을 넣을때
선택 (text만 있는 엘리먼트는 차이가 없다.)
<html> <div class="contents">시각장애인들 짱</div> ==$0
-
3개의 차이점
선택
<html> <li class="comment hello world" id="test"> ==$0
[그림:innerText] 화면에 렌더링되는 텍스트만 보여줍니다.
[그림:innerHTML] 테그 전체를 보여줍니다.
[그림:textContent] 공백을 포함해서 보여줍니다.
-
innerHTML(태그를 써넣을수 있습니다.)과 textContent(문자열만)를 이용해서 내용을 변경
innerHTML : 태그로 들어갑니다.
<js>
$0.innerHTML='<a href="https://naver.com">네이버</a>'
-> "<a href="https://naver.com">네이버</a>"<html>
<div class="contents"> == $0
<a href="https://naver.com">네이버</a>
</div>
textContent 이용 : 문자열로만 들어갑니다.
<js>
$0.textContent='<a href="https://naver.com">네이버</a>'
-> "<a href="https://naver.com">네이버</a>"<html>
<div class="contents"><a href="https://naver.com">네이버</a></div> ==$0
- form 입력값 (속성이름: value)
- 선택
<html>
<input id="username" type="text" placeholder="아이디를 입력하세요"> == $0<js>
console.log($0.value) // ""- 변경
<js>
console.log($0.value) // "asdfasdfadsfsdf"- 자식element vs 자식node
html
<body>
<div id="practice" class="highlight red">
여기 엘리먼트가 하나 있습니다
<span>자식도 있습니다</span>
<span>자식도 여럿 있습니다</span>
</div>
</body>
-
결론 element는 node입니다. text는 노드이나 element는 아닙니다.
-
dataset (tag 자체에다가 데이터를 담고 싶을때)/(화면에 보이지 않는 data)
<html>
<div data-user="steve" data-role="moderator" data-user-id="1">
Steve Lee
</div><js>
console.log($0.dataset.user) // 'steve'
console.log($0.dataset.role) // 'moderator'
console.log($0.dataset.userId) / '1'- 이벤트
클릭 이벤트
4. 자바스크립트를 통해서 엘리먼트를 가져오기
- 태그를 이용: getElementsByTagName
- id를 이용: getElementById
- class를 이용: getElementsByClassName
- selector를 이용: querySelector(주로 Id 혹은 한개만 받아올때)
querySelectorAll(주로 여러개의 Tag or class를 받아올때 배열형태로 가져옵니다)
출처 :코드스테이츠
